@opensite/ui 1.6.7 → 1.6.8

package/dist/hero-productivity-launcher-video.js

@@ -10,32 +10,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -946,7 +920,7 @@ function HeroProductivityLauncherVideo({
   videoSrc,
   videoSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
@@ -978,7 +952,7 @@ function HeroProductivityLauncherVideo({
   const renderVersionInfo = useMemo(() => {
     if (versionInfoSlot) return versionInfoSlot;
     if (!versionInfo) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-6 text-xs", getTextColor(background, "muted")), children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
       versionInfo.version && /* @__PURE__ */ jsx("span", { children: versionInfo.version }),
       versionInfo.osRequirement && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
       versionInfo.installMethod && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
@@ -994,7 +968,7 @@ function HeroProductivityLauncherVideo({
         className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
         children: [
           secondaryCta.primaryText && /* @__PURE__ */ jsx("span", { children: secondaryCta.primaryText }),
-          secondaryCta.secondaryText && /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1", getTextColor(background, "muted")), children: [
+          secondaryCta.secondaryText && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
             /* @__PURE__ */ jsx("span", { children: secondaryCta.secondaryText }),
             /* @__PURE__ */ jsx(
               DynamicIcon,
@@ -1026,15 +1000,17 @@ function HeroProductivityLauncherVideo({
   return /* @__PURE__ */ jsxs(
     Section,
     {
-      className: cn(
-        "dark relative overflow-hidden bg-background py-12 font-sans md:py-20",
-        className
-      ),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center dark overflow-hidden bg-background py-12 font-sans md:py-20", className),
+      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("relative z-20 container max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
             /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
-            /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
+            /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             renderActions,

package/dist/hero-spiral-pattern-cards.cjs

@@ -6,6 +6,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var img = require('@page-speed/img');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,58 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -882,14 +831,18 @@ function HeroSpiralPatternCards({
   description,
   actions,
   actionsSlot,
+  images,
+  imagesSlot,
+  optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  imagesClassName
 }) {
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -912,53 +865,57 @@ function HeroSpiralPatternCards({
       );
     }) });
   }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const renderImages = React.useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex flex-col items-center justify-center lg:mt-32", imagesClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
+      images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center overflow-hidden rounded-lg border border-border opacity-60 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: images[0].src,
+          alt: images[0].alt,
+          className: cn("h-full w-full object-cover", images[0].className),
+          optixFlowConfig
+        }
+      ) }),
+      images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center overflow-hidden rounded-lg border border-border opacity-80 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: images[1].src,
+          alt: images[1].alt,
+          className: cn("h-full w-full object-cover", images[1].className),
+          optixFlowConfig
+        }
+      ) }),
+      images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center overflow-hidden rounded-lg border border-border md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: images[2].src,
+          alt: images[2].alt,
+          className: cn("h-full w-full object-cover", images[2].className),
+          optixFlowConfig
+        }
+      ) })
+    ] }) });
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName), children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center", children: [
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-16 flex flex-col items-center justify-center lg:mt-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "b relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-1/2 top-full z-0 flex w-480 -translate-x-1/2 -translate-y-16 md:-translate-y-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              version: "1.1",
-              viewBox: "0 0 800 800",
-              className: cn("h-full w-full opacity-20", getTextColor(background, "muted")),
-              children: Array.from(Array(4e3).keys()).map((dot, index, array) => {
-                const angle = 0.2 * index;
-                const scalar = 300 + index * (100 / array.length);
-                const x = Math.round(Math.cos(angle) * scalar);
-                const y = Math.round(Math.sin(angle) * scalar);
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "circle",
-                  {
-                    r: 1,
-                    cx: 400 + x,
-                    cy: 400 + y,
-                    fill: "currentColor",
-                    opacity: (array.length - index) / array.length
-                  },
-                  index
-                );
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center rounded-lg border border-border opacity-60 md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center rounded-lg border border-border opacity-80 md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center rounded-lg border border-border md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) })
-        ] }) })
-      ]
+        renderImages
+      ] })
     }
   );
 }

package/dist/hero-spiral-pattern-cards.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { A as ActionConfig } from './blocks-DP3Vofl4.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-CdNtNOuP.cjs';
@@ -26,7 +26,20 @@ interface HeroSpiralPatternCardsProps {
     /**
      * Custom slot for rendering actions (overrides actions array)
      */
-    actionsSlot?: React.ReactNode; /**
+    actionsSlot?: React.ReactNode;
+    /**
+     * Array of images to display (expects 3 images for stacked card effect)
+     */
+    images?: ImageItem[];
+    /**
+     * Custom slot for rendering images (overrides images array)
+     */
+    imagesSlot?: React.ReactNode;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -58,7 +71,11 @@ interface HeroSpiralPatternCardsProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the images container
+     */
+    imagesClassName?: string;
 }
-declare function HeroSpiralPatternCards({ badgeText, heading, description, actions, actionsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, }: HeroSpiralPatternCardsProps): React.JSX.Element;
+declare function HeroSpiralPatternCards({ badgeText, heading, description, actions, actionsSlot, images, imagesSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, imagesClassName, }: HeroSpiralPatternCardsProps): React.JSX.Element;
 
 export { HeroSpiralPatternCards, type HeroSpiralPatternCardsProps };

package/dist/hero-spiral-pattern-cards.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { A as ActionConfig } from './blocks-XLPGq8A5.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-CdNtNOuP.js';
@@ -26,7 +26,20 @@ interface HeroSpiralPatternCardsProps {
     /**
      * Custom slot for rendering actions (overrides actions array)
      */
-    actionsSlot?: React.ReactNode; /**
+    actionsSlot?: React.ReactNode;
+    /**
+     * Array of images to display (expects 3 images for stacked card effect)
+     */
+    images?: ImageItem[];
+    /**
+     * Custom slot for rendering images (overrides images array)
+     */
+    imagesSlot?: React.ReactNode;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -58,7 +71,11 @@ interface HeroSpiralPatternCardsProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the images container
+     */
+    imagesClassName?: string;
 }
-declare function HeroSpiralPatternCards({ badgeText, heading, description, actions, actionsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, }: HeroSpiralPatternCardsProps): React.JSX.Element;
+declare function HeroSpiralPatternCards({ badgeText, heading, description, actions, actionsSlot, images, imagesSlot, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, imagesClassName, }: HeroSpiralPatternCardsProps): React.JSX.Element;
 
 export { HeroSpiralPatternCards, type HeroSpiralPatternCardsProps };

package/dist/hero-spiral-pattern-cards.js

@@ -5,63 +5,12 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Img } from '@page-speed/img';
 
 // components/blocks/hero/hero-spiral-pattern-cards.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -861,14 +810,18 @@ function HeroSpiralPatternCards({
   description,
   actions,
   actionsSlot,
+  images,
+  imagesSlot,
+  optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  imagesClassName
 }) {
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
@@ -891,53 +844,57 @@ function HeroSpiralPatternCards({
       );
     }) });
   }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsxs(
+  const renderImages = useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex flex-col items-center justify-center lg:mt-32", imagesClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
+      images[0] && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center overflow-hidden rounded-lg border border-border opacity-60 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: images[0].src,
+          alt: images[0].alt,
+          className: cn("h-full w-full object-cover", images[0].className),
+          optixFlowConfig
+        }
+      ) }),
+      images[1] && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center overflow-hidden rounded-lg border border-border opacity-80 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: images[1].src,
+          alt: images[1].alt,
+          className: cn("h-full w-full object-cover", images[1].className),
+          optixFlowConfig
+        }
+      ) }),
+      images[2] && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center overflow-hidden rounded-lg border border-border md:w-85 md:max-w-85", children: /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: images[2].src,
+          alt: images[2].alt,
+          className: cn("h-full w-full object-cover", images[2].className),
+          optixFlowConfig
+        }
+      ) })
+    ] }) });
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName), children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
           badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-16 flex flex-col items-center justify-center lg:mt-32", children: /* @__PURE__ */ jsxs("div", { className: "b relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-1/2 top-full z-0 flex w-480 -translate-x-1/2 -translate-y-16 md:-translate-y-8", children: /* @__PURE__ */ jsx(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              version: "1.1",
-              viewBox: "0 0 800 800",
-              className: cn("h-full w-full opacity-20", getTextColor(background, "muted")),
-              children: Array.from(Array(4e3).keys()).map((dot, index, array) => {
-                const angle = 0.2 * index;
-                const scalar = 300 + index * (100 / array.length);
-                const x = Math.round(Math.cos(angle) * scalar);
-                const y = Math.round(Math.sin(angle) * scalar);
-                return /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    r: 1,
-                    cx: 400 + x,
-                    cy: 400 + y,
-                    fill: "currentColor",
-                    opacity: (array.length - index) / array.length
-                  },
-                  index
-                );
-              })
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center rounded-lg border border-border opacity-60 md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) }),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center rounded-lg border border-border opacity-80 md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) }),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center rounded-lg border border-border md:w-85 md:max-w-85", getNestedCardBg(background, "accent")) })
-        ] }) })
-      ]
+        renderImages
+      ] })
     }
   );
 }