@opensite/ui 1.6.7 → 1.6.8

package/dist/hero-architecture-fullscreen.cjs

@@ -31,54 +31,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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 getBorderColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "border-foreground/20";
-      case "muted":
-        return "border-foreground/10";
-      case "accent":
-        return "border-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "border-border";
-      case "muted":
-        return "border-muted";
-      case "accent":
-        return "border-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -880,11 +832,11 @@ function HeroArchitectureFullscreen({
   actionSlot,
   backgroundImage,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   taglineClassName,
   headingClassName,
   descriptionClassName
@@ -915,17 +867,18 @@ function HeroArchitectureFullscreen({
       pattern,
       patternOpacity,
       className: cn(
-        "dark relative h-svh max-h-[1400px] w-full overflow-hidden bg-cover bg-center bg-no-repeat font-poppins after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-foreground/65 after:content-['']",
+        "relative flex items-center justify-center dark h-svh max-h-[1400px] w-full overflow-hidden bg-cover bg-center bg-no-repeat font-poppins after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-foreground/65 after:content-['']",
         className
       ),
+      containerClassName,
       style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 container h-full w-full max-w-340", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-12", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-340", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-12", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-245.5 flex-col gap-1", children: [
-          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm leading-none uppercase", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
+          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm leading-none uppercase text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: taglineClassName, children: tagline })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-3xl leading-snug! md:text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col justify-between gap-5 sm:flex-row sm:items-center", children: [
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-81 border-l pl-6 text-base", getBorderColor(background, "muted"), getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-81 border-l border-border pl-6 text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: renderAction })
         ] })
       ] }) })

package/dist/hero-architecture-fullscreen.js

@@ -10,54 +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 getBorderColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "border-foreground/20";
-      case "muted":
-        return "border-foreground/10";
-      case "accent":
-        return "border-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "border-border";
-      case "muted":
-        return "border-muted";
-      case "accent":
-        return "border-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -859,11 +811,11 @@ function HeroArchitectureFullscreen({
   actionSlot,
   backgroundImage,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   taglineClassName,
   headingClassName,
   descriptionClassName
@@ -894,17 +846,18 @@ function HeroArchitectureFullscreen({
       pattern,
       patternOpacity,
       className: cn(
-        "dark relative h-svh max-h-[1400px] w-full overflow-hidden bg-cover bg-center bg-no-repeat font-poppins after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-foreground/65 after:content-['']",
+        "relative flex items-center justify-center dark h-svh max-h-[1400px] w-full overflow-hidden bg-cover bg-center bg-no-repeat font-poppins after:absolute after:top-0 after:left-0 after:block after:h-full after:w-full after:bg-foreground/65 after:content-['']",
         className
       ),
+      containerClassName,
       style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
-      children: /* @__PURE__ */ jsx("div", { className: cn("relative z-20 container h-full w-full max-w-340", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-12", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "relative z-20 h-full w-full max-w-340", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-12", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex max-w-245.5 flex-col gap-1", children: [
-          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-none uppercase", getTextColor(background, "muted"), taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
+          tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-none uppercase text-muted-foreground", taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: taglineClassName, children: tagline })),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-3xl leading-snug! md:text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }))
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col justify-between gap-5 sm:flex-row sm:items-center", children: [
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-81 border-l pl-6 text-base", getBorderColor(background, "muted"), getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-81 border-l border-border pl-6 text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsx("div", { className: "shrink-0", children: renderAction })
         ] })
       ] }) })

package/dist/hero-badge-shadow-overlay.cjs

@@ -7,6 +7,7 @@ var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 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;
@@ -32,32 +33,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";
-    }
-  }
-}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -991,17 +966,20 @@ Section.displayName = "Section";
 function HeroBadgeShadowOverlay({
   announcementBadge,
   announcementText,
-  announcementHref = "#",
+  announcementHref,
+  description,
+  descriptionClassName,
   heading,
   actions,
   actionsSlot,
-  backgroundImageUrl = "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/shadow-overlay.png",
+  backgroundImageUrl,
+  optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "mx-0 w-screen px-0 sm:px-0 lg:px-0 max-w-screen relative z-10 min-h-screen h-full",
   announcementClassName,
   headingClassName,
   actionsClassName
@@ -1009,8 +987,15 @@ function HeroBadgeShadowOverlay({
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1025,8 +1010,8 @@ function HeroBadgeShadowOverlay({
         },
         index
       );
-    });
-  }, [actionsSlot, actions]);
+    }) });
+  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -1034,33 +1019,45 @@ function HeroBadgeShadowOverlay({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative", className),
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-10 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col min-h-screen h-full justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-10 text-center px-6 max-full md:max-w-lg", children: [
           (announcementBadge || announcementText) && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
               href: announcementHref,
               className: cn(
-                "flex items-center gap-2 rounded-full px-2 py-1 text-sm transition-colors",
-                `hover:${getNestedCardBg(background)}`,
+                "flex items-center gap-2 rounded-full px-2 py-1 text-sm bg-card text-card-foreground",
                 announcementClassName
               ),
               children: [
                 announcementBadge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: announcementBadge }),
                 announcementText,
-                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+                /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 16 })
               ]
             }
           ),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-xl text-center",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          renderActions
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        backgroundImageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
           {
-            className: "absolute inset-0 -z-10 bg-[50%_0] bg-no-repeat",
-            style: { backgroundImage: `url('${backgroundImageUrl}')` }
+            src: backgroundImageUrl,
+            alt: "Background Image",
+            className: "absolute inset-0 -z-10 h-full w-full object-cover brightness-50",
+            optixFlowConfig
           }
         )
       ]

package/dist/hero-badge-shadow-overlay.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, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-CdNtNOuP.cjs';
@@ -71,7 +71,19 @@ interface HeroBadgeShadowOverlayProps {
      * Additional CSS classes for the actions container
      */
     actionsClassName?: string;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroBadgeShadowOverlay({ announcementBadge, announcementText, announcementHref, heading, actions, actionsSlot, backgroundImageUrl, background, spacing, pattern, patternOpacity, className, containerClassName, announcementClassName, headingClassName, actionsClassName, }: HeroBadgeShadowOverlayProps): React.JSX.Element;
+declare function HeroBadgeShadowOverlay({ announcementBadge, announcementText, announcementHref, description, descriptionClassName, heading, actions, actionsSlot, backgroundImageUrl, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, announcementClassName, headingClassName, actionsClassName, }: HeroBadgeShadowOverlayProps): React.JSX.Element;
 
 export { HeroBadgeShadowOverlay, type HeroBadgeShadowOverlayProps };

package/dist/hero-badge-shadow-overlay.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, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-CdNtNOuP.js';
@@ -71,7 +71,19 @@ interface HeroBadgeShadowOverlayProps {
      * Additional CSS classes for the actions container
      */
     actionsClassName?: string;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
+    /**
+     * OptixFlow image optimization configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroBadgeShadowOverlay({ announcementBadge, announcementText, announcementHref, heading, actions, actionsSlot, backgroundImageUrl, background, spacing, pattern, patternOpacity, className, containerClassName, announcementClassName, headingClassName, actionsClassName, }: HeroBadgeShadowOverlayProps): React.JSX.Element;
+declare function HeroBadgeShadowOverlay({ announcementBadge, announcementText, announcementHref, description, descriptionClassName, heading, actions, actionsSlot, backgroundImageUrl, optixFlowConfig, background, spacing, pattern, patternOpacity, className, containerClassName, announcementClassName, headingClassName, actionsClassName, }: HeroBadgeShadowOverlayProps): React.JSX.Element;
 
 export { HeroBadgeShadowOverlay, type HeroBadgeShadowOverlayProps };

package/dist/hero-badge-shadow-overlay.js

@@ -6,37 +6,12 @@ import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Img } from '@page-speed/img';
 
 // components/blocks/hero/hero-badge-shadow-overlay.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";
-    }
-  }
-}
 var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -970,17 +945,20 @@ Section.displayName = "Section";
 function HeroBadgeShadowOverlay({
   announcementBadge,
   announcementText,
-  announcementHref = "#",
+  announcementHref,
+  description,
+  descriptionClassName,
   heading,
   actions,
   actionsSlot,
-  backgroundImageUrl = "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/shadow-overlay.png",
+  backgroundImageUrl,
+  optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "mx-0 w-screen px-0 sm:px-0 lg:px-0 max-w-screen relative z-10 min-h-screen h-full",
   announcementClassName,
   headingClassName,
   actionsClassName
@@ -988,8 +966,15 @@ function HeroBadgeShadowOverlay({
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1004,8 +989,8 @@ function HeroBadgeShadowOverlay({
         },
         index
       );
-    });
-  }, [actionsSlot, actions]);
+    }) });
+  }, [actionsSlot, actions, actionsClassName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -1013,33 +998,45 @@ function HeroBadgeShadowOverlay({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative", className),
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-10 text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col min-h-screen h-full justify-center items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-10 text-center px-6 max-full md:max-w-lg", children: [
           (announcementBadge || announcementText) && /* @__PURE__ */ jsxs(
             Pressable,
             {
               href: announcementHref,
               className: cn(
-                "flex items-center gap-2 rounded-full px-2 py-1 text-sm transition-colors",
-                `hover:${getNestedCardBg(background)}`,
+                "flex items-center gap-2 rounded-full px-2 py-1 text-sm bg-card text-card-foreground",
                 announcementClassName
               ),
               children: [
                 announcementBadge && /* @__PURE__ */ jsx(Badge, { children: announcementBadge }),
                 announcementText,
-                /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+                /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 16 })
               ]
             }
           ),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-semibold lg:text-8xl text-white text-balance text-shadow-xl text-center",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          renderActions
         ] }) }),
-        /* @__PURE__ */ jsx(
-          "div",
+        backgroundImageUrl && /* @__PURE__ */ jsx(
+          Img,
           {
-            className: "absolute inset-0 -z-10 bg-[50%_0] bg-no-repeat",
-            style: { backgroundImage: `url('${backgroundImageUrl}')` }
+            src: backgroundImageUrl,
+            alt: "Background Image",
+            className: "absolute inset-0 -z-10 h-full w-full object-cover brightness-50",
+            optixFlowConfig
           }
         )
       ]

package/dist/hero-billing-platform-logos.cjs

@@ -973,13 +973,12 @@ function HeroBillingPlatformLogos({
   logosTagline,
   logos,
   logosSlot,
-  backgroundNoiseUrl = "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1030,13 +1029,10 @@ function HeroBillingPlatformLogos({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(
-        "dark font-sans",
-        className
-      ),
-      style: { backgroundImage: backgroundNoiseUrl ? `url('${backgroundNoiseUrl}')` : void 0 },
+      className: cn("relative flex items-center justify-center dark font-sans", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl leading-tight md:text-5xl lg:text-[3.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),

package/dist/hero-billing-platform-logos.d.cts

@@ -47,10 +47,6 @@ interface HeroBillingPlatformLogosProps {
      * Custom slot for logos (overrides logos array)
      */
     logosSlot?: React.ReactNode;
-    /**
-     * Background noise texture URL
-     */
-    backgroundNoiseUrl?: string;
     /**
      * Background style for the section
      */
@@ -100,6 +96,6 @@ interface HeroBillingPlatformLogosProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroBillingPlatformLogos({ heading, description, actions, actionsSlot, mainImage, overlayImages, imagesSlot, logosTagline, logos, logosSlot, backgroundNoiseUrl, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, logosClassName, optixFlowConfig, }: HeroBillingPlatformLogosProps): React.JSX.Element;
+declare function HeroBillingPlatformLogos({ heading, description, actions, actionsSlot, mainImage, overlayImages, imagesSlot, logosTagline, logos, logosSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, logosClassName, optixFlowConfig, }: HeroBillingPlatformLogosProps): React.JSX.Element;
 
 export { HeroBillingPlatformLogos, type HeroBillingPlatformLogosProps };

package/dist/hero-billing-platform-logos.d.ts

@@ -47,10 +47,6 @@ interface HeroBillingPlatformLogosProps {
      * Custom slot for logos (overrides logos array)
      */
     logosSlot?: React.ReactNode;
-    /**
-     * Background noise texture URL
-     */
-    backgroundNoiseUrl?: string;
     /**
      * Background style for the section
      */
@@ -100,6 +96,6 @@ interface HeroBillingPlatformLogosProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroBillingPlatformLogos({ heading, description, actions, actionsSlot, mainImage, overlayImages, imagesSlot, logosTagline, logos, logosSlot, backgroundNoiseUrl, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, logosClassName, optixFlowConfig, }: HeroBillingPlatformLogosProps): React.JSX.Element;
+declare function HeroBillingPlatformLogos({ heading, description, actions, actionsSlot, mainImage, overlayImages, imagesSlot, logosTagline, logos, logosSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, logosClassName, optixFlowConfig, }: HeroBillingPlatformLogosProps): React.JSX.Element;
 
 export { HeroBillingPlatformLogos, type HeroBillingPlatformLogosProps };

package/dist/hero-billing-platform-logos.js

@@ -947,13 +947,12 @@ function HeroBillingPlatformLogos({
   logosTagline,
   logos,
   logosSlot,
-  backgroundNoiseUrl = "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1004,13 +1003,10 @@ function HeroBillingPlatformLogos({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(
-        "dark font-sans",
-        className
-      ),
-      style: { backgroundImage: backgroundNoiseUrl ? `url('${backgroundNoiseUrl}')` : void 0 },
+      className: cn("relative flex items-center justify-center dark font-sans", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
           /* @__PURE__ */ jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl leading-tight md:text-5xl lg:text-[3.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-5 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),