@opensite/ui 0.8.6 → 0.8.8

package/dist/hero-product-showcase-floating.cjs

@@ -997,7 +997,7 @@ function HeroProductShowcaseFloating({
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold text-foreground", children: floatingStat.value }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold ", children: floatingStat.value }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: floatingStat.label })
       ] })
     ] }) });
@@ -1017,7 +1017,7 @@ function HeroProductShowcaseFloating({
         idx
       )) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-foreground", children: userCount.count }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: userCount.count }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: userCount.label })
       ] })
     ] }) });
@@ -1051,7 +1051,7 @@ function HeroProductShowcaseFloating({
         renderProductShowcase,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] })

package/dist/hero-product-showcase-floating.js

@@ -976,7 +976,7 @@ function HeroProductShowcaseFloating({
         }
       ) }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-foreground", children: floatingStat.value }),
+        /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: floatingStat.value }),
         /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: floatingStat.label })
       ] })
     ] }) });
@@ -996,7 +996,7 @@ function HeroProductShowcaseFloating({
         idx
       )) }),
       /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
-        /* @__PURE__ */ jsx("div", { className: "font-semibold text-foreground", children: userCount.count }),
+        /* @__PURE__ */ jsx("div", { className: "font-semibold ", children: userCount.count }),
         /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: userCount.label })
       ] })
     ] }) });
@@ -1030,7 +1030,7 @@ function HeroProductShowcaseFloating({
         renderProductShowcase,
         /* @__PURE__ */ jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] })

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

@@ -986,7 +986,7 @@ function HeroProductivityLauncherVideo({
       Pressable,
       {
         href: secondaryCta.href,
-        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 text-white",
+        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__ */ jsxRuntime.jsx("span", { children: secondaryCta.primaryText }),
           secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
@@ -1028,7 +1028,7 @@ function HeroProductivityLauncherVideo({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 container max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold text-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold text-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [

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

@@ -965,7 +965,7 @@ function HeroProductivityLauncherVideo({
       Pressable,
       {
         href: secondaryCta.href,
-        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 text-white",
+        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: "flex items-center gap-1 text-muted-foreground", children: [
@@ -1007,7 +1007,7 @@ function HeroProductivityLauncherVideo({
       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__ */ 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-foreground [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-foreground [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-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-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: [

package/dist/hero-saas-dashboard-preview.cjs

@@ -1046,7 +1046,7 @@ function HeroSaasDashboardPreview({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderEmailForm
         ] }),

package/dist/hero-saas-dashboard-preview.js

@@ -1025,7 +1025,7 @@ function HeroSaasDashboardPreview({
       children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight text-foreground md:text-5xl lg:text-6xl", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderEmailForm
         ] }),

package/dist/hero-shared-inbox-layered.cjs

@@ -464,7 +464,7 @@ function HeroSharedInboxLayered({
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container pt-10", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
           subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground", children: subtitle }) : subtitle),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] text-foreground", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] text-foreground", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderLayeredImages })

package/dist/hero-shared-inbox-layered.js

@@ -439,7 +439,7 @@ function HeroSharedInboxLayered({
       children: /* @__PURE__ */ jsx("div", { className: cn("container pt-10", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
           subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground", children: subtitle }) : subtitle),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] text-foreground", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] text-foreground", headingClassName), children: heading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsx("div", { children: renderLayeredImages })

package/dist/hero-software-growth-video-dialog.cjs

@@ -1064,7 +1064,7 @@ function HeroSoftwareGrowthVideoDialog({
       label: "Get Started Now",
       href: "#",
       variant: "outline",
-      className: "group block h-fit w-fit overflow-hidden rounded-full px-5 py-2 text-center text-base text-foreground"
+      className: "group block h-fit w-fit overflow-hidden rounded-full px-5 py-2 text-center text-base "
     }
   ];
   const renderActions = React.useMemo(() => {
@@ -1123,7 +1123,7 @@ function HeroSoftwareGrowthVideoDialog({
         className: cn("font-dm_sans bg-background py-12 md:py-24", className),
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-[1440px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-8", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none text-foreground md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none text-foreground md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-212.5 text-center text-lg leading-snug text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             renderActions
           ] }),

package/dist/hero-software-growth-video-dialog.js

@@ -1041,7 +1041,7 @@ function HeroSoftwareGrowthVideoDialog({
       label: "Get Started Now",
       href: "#",
       variant: "outline",
-      className: "group block h-fit w-fit overflow-hidden rounded-full px-5 py-2 text-center text-base text-foreground"
+      className: "group block h-fit w-fit overflow-hidden rounded-full px-5 py-2 text-center text-base "
     }
   ];
   const renderActions = useMemo(() => {
@@ -1100,7 +1100,7 @@ function HeroSoftwareGrowthVideoDialog({
         className: cn("font-dm_sans bg-background py-12 md:py-24", className),
         children: /* @__PURE__ */ jsx("div", { className: cn("container max-w-[1440px]", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-8", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none text-foreground md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none text-foreground md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-212.5 text-center text-lg leading-snug text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             renderActions
           ] }),

package/dist/hero-split-geometric-shapes.cjs

@@ -6,6 +6,8 @@ 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');
+var lightbox = require('@page-speed/lightbox');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -830,22 +832,55 @@ function HeroSplitGeometricShapes({
   description,
   actions,
   actionsSlot,
-  shapesSlot,
+  images,
+  imagesSlot,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   className,
   containerClassName,
   contentClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  imagesClassName,
+  imageClassName,
+  optixFlowConfig
 }) {
+  const [lightboxOpen, setLightboxOpen] = React.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React.useState(0);
+  const lightboxItems = React.useMemo(() => {
+    if (!images || images.length === 0) return [];
+    return images.map((image, index) => {
+      const src = typeof image === "string" ? image : image.src;
+      const alt = typeof image === "string" ? "Gallery image" : image.alt || "Gallery image";
+      return {
+        id: `hero-split-geometric-${index}-${src.slice(-8)}`,
+        src,
+        alt,
+        type: "image"
+      };
+    });
+  }, [images]);
+  const handleImageClick = React.useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = React.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -862,16 +897,75 @@ function HeroSplitGeometricShapes({
       );
     }) });
   }, [actionsSlot, actions]);
-  const renderShapes = React.useMemo(() => {
-    if (shapesSlot) return shapesSlot;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-7/8 h-full w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[12%] right-[50%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[36%] right-[50%] flex aspect-5/6 w-[40%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[36%] left-[54%] flex aspect-5/6 w-[40%] justify-center rounded-lg border border-border bg-accent" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[12%] left-[54%] flex aspect-square w-[24%] justify-center rounded-lg border border-border bg-accent" })
-    ] }) });
-  }, [shapesSlot]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const renderImages = React.useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center",
+          imagesClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-7/8 h-full w-full", children: images.map((image, index) => {
+          const src = typeof image === "string" ? image : image.src;
+          const alt = typeof image === "string" ? "Gallery image" : image.alt || "Gallery image";
+          const itemClass = typeof image === "string" ? void 0 : image.className;
+          const positionClasses = [
+            "absolute top-[12%] right-[50%] aspect-square w-[24%]",
+            // Top left, small square
+            "absolute top-[36%] right-[50%] aspect-5/6 w-[40%]",
+            // Middle left, tall rectangle
+            "absolute bottom-[36%] left-[54%] aspect-5/6 w-[40%]",
+            // Middle right, tall rectangle
+            "absolute bottom-[12%] left-[54%] aspect-square w-[24%]"
+            // Bottom right, small square
+          ];
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "cursor-pointer overflow-hidden rounded-lg border border-border",
+                positionClasses[index % 4],
+                itemClass
+              ),
+              onClick: () => handleImageClick(index),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleImageClick(index);
+                }
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src,
+                  alt,
+                  className: cn(
+                    "h-full w-full object-cover transition-opacity hover:opacity-90",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
+                }
+              )
+            },
+            index
+          );
+        }) })
+      }
+    );
+  }, [
+    imagesSlot,
+    images,
+    imagesClassName,
+    imageClassName,
+    optixFlowConfig,
+    handleImageClick
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
@@ -879,15 +973,75 @@ function HeroSplitGeometricShapes({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container flex flex-col items-center", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-accent/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center px-16 py-16 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left", contentClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-6 text-4xl font-bold text-pretty lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8 max-w-xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderActions
-        ] }),
-        renderShapes
-      ] }) }) })
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col items-center"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "2xl:w-[calc(min(100vw-2*theme(container.padding),100%+8rem))] w-full overflow-clip rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-0 md:gap-8 lg:grid-cols-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "container flex flex-col items-center px-10 py-8 text-center lg:mx-auto lg:items-start lg:px-16 lg:py-32 lg:text-left",
+                contentClassName
+              ),
+              children: [
+                badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: badgeText }) : badgeText),
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "my-6 text-4xl font-bold text-pretty lg:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mb-8 max-w-xl lg:text-xl",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+                renderActions
+              ]
+            }
+          ),
+          renderImages
+        ] }) }) }),
+        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
+      ]
     }
   );
 }

package/dist/hero-split-geometric-shapes.d.cts

@@ -1,12 +1,29 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
+/**
+ * Image configuration for hero split geometric shapes.
+ */
+interface HeroSplitGeometricShapesImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
+}
 interface HeroSplitGeometricShapesProps {
     /**
      * Badge/label text above heading
@@ -29,9 +46,13 @@ interface HeroSplitGeometricShapesProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Custom slot for geometric shapes (overrides default shapes)
+     * Array of images to display in masonry layout (can be strings or objects)
      */
-    shapesSlot?: React.ReactNode; /**
+    images?: (string | HeroSplitGeometricShapesImage)[];
+    /**
+     * Custom slot for rendering images (overrides images array)
+     */
+    imagesSlot?: React.ReactNode; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -67,7 +88,19 @@ interface HeroSplitGeometricShapesProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the images container
+     */
+    imagesClassName?: string;
+    /**
+     * Additional CSS classes for each image
+     */
+    imageClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSplitGeometricShapes({ badgeText, heading, description, actions, actionsSlot, shapesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroSplitGeometricShapesProps): React.JSX.Element;
+declare function HeroSplitGeometricShapes({ badgeText, heading, description, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imagesClassName, imageClassName, optixFlowConfig, }: HeroSplitGeometricShapesProps): React.JSX.Element;
 
-export { HeroSplitGeometricShapes, type HeroSplitGeometricShapesProps };
+export { HeroSplitGeometricShapes, type HeroSplitGeometricShapesImage, type HeroSplitGeometricShapesProps };

package/dist/hero-split-geometric-shapes.d.ts

@@ -1,12 +1,29 @@
 import * as React from 'react';
 import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
+/**
+ * Image configuration for hero split geometric shapes.
+ */
+interface HeroSplitGeometricShapesImage {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
+}
 interface HeroSplitGeometricShapesProps {
     /**
      * Badge/label text above heading
@@ -29,9 +46,13 @@ interface HeroSplitGeometricShapesProps {
      */
     actionsSlot?: React.ReactNode;
     /**
-     * Custom slot for geometric shapes (overrides default shapes)
+     * Array of images to display in masonry layout (can be strings or objects)
      */
-    shapesSlot?: React.ReactNode; /**
+    images?: (string | HeroSplitGeometricShapesImage)[];
+    /**
+     * Custom slot for rendering images (overrides images array)
+     */
+    imagesSlot?: React.ReactNode; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -67,7 +88,19 @@ interface HeroSplitGeometricShapesProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the images container
+     */
+    imagesClassName?: string;
+    /**
+     * Additional CSS classes for each image
+     */
+    imageClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroSplitGeometricShapes({ badgeText, heading, description, actions, actionsSlot, shapesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroSplitGeometricShapesProps): React.JSX.Element;
+declare function HeroSplitGeometricShapes({ badgeText, heading, description, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imagesClassName, imageClassName, optixFlowConfig, }: HeroSplitGeometricShapesProps): React.JSX.Element;
 
-export { HeroSplitGeometricShapes, type HeroSplitGeometricShapesProps };
+export { HeroSplitGeometricShapes, type HeroSplitGeometricShapesImage, type HeroSplitGeometricShapesProps };