@opensite/ui 1.7.0 → 1.7.2

package/dist/hero-architecture-fullscreen.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;
@@ -832,34 +833,34 @@ function HeroArchitectureFullscreen({
   actionSlot,
   backgroundImage,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "mx-0 min-h-screen h-full w-screen max-w-full relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex items-end",
   taglineClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  optixFlowConfig
 }) {
   const renderAction = React.useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
-          typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "group-hover:underline", children: label }) : label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      icon,
+      typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "group-hover:underline", children: label }) : label,
+      iconAfter
+    ] }) });
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
@@ -867,21 +868,56 @@ function HeroArchitectureFullscreen({
       pattern,
       patternOpacity,
       className: cn(
-        "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-['']",
+        "relative flex min-h-screen min-w-screen items-center justify-center dark w-full overflow-hidden font-poppins",
         className
       ),
       containerClassName,
-      style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
-      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 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 border-border pl-6 text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+      children: [
+        backgroundImage && /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: backgroundImage,
+            alt: "",
+            className: "absolute inset-0 min-h-screen min-w-screen object-cover object-center brightness-50",
+            optixFlowConfig
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-340 p-8 md:p-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-end gap-6 md:gap-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm leading-none uppercase text-balance text-white text-shadow-xl",
+                  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 text-white text-balance text-shadow-xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-5 sm:flex-row sm:items-center", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-base text-balance text-white text-shadow-xl",
+                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.d.cts

@@ -67,7 +67,14 @@ interface HeroArchitectureFullscreenProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Optional Optix Flow configuration for image optimization
+     */
+    optixFlowConfig?: {
+        apiKey: string;
+        compression?: number;
+    };
 }
-declare function HeroArchitectureFullscreen({ tagline, heading, description, action, actionSlot, backgroundImage, background, spacing, pattern, patternOpacity, className, containerClassName, taglineClassName, headingClassName, descriptionClassName, }: HeroArchitectureFullscreenProps): React.JSX.Element;
+declare function HeroArchitectureFullscreen({ tagline, heading, description, action, actionSlot, backgroundImage, background, spacing, pattern, patternOpacity, className, containerClassName, taglineClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroArchitectureFullscreenProps): React.JSX.Element;
 
 export { HeroArchitectureFullscreen, type HeroArchitectureFullscreenProps };

package/dist/hero-architecture-fullscreen.d.ts

@@ -67,7 +67,14 @@ interface HeroArchitectureFullscreenProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Optional Optix Flow configuration for image optimization
+     */
+    optixFlowConfig?: {
+        apiKey: string;
+        compression?: number;
+    };
 }
-declare function HeroArchitectureFullscreen({ tagline, heading, description, action, actionSlot, backgroundImage, background, spacing, pattern, patternOpacity, className, containerClassName, taglineClassName, headingClassName, descriptionClassName, }: HeroArchitectureFullscreenProps): React.JSX.Element;
+declare function HeroArchitectureFullscreen({ tagline, heading, description, action, actionSlot, backgroundImage, background, spacing, pattern, patternOpacity, className, containerClassName, taglineClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroArchitectureFullscreenProps): React.JSX.Element;
 
 export { HeroArchitectureFullscreen, type HeroArchitectureFullscreenProps };

package/dist/hero-architecture-fullscreen.js

@@ -5,6 +5,7 @@ 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-architecture-fullscreen.tsx
 function cn(...inputs) {
@@ -811,34 +812,34 @@ function HeroArchitectureFullscreen({
   actionSlot,
   backgroundImage,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "mx-0 min-h-screen h-full w-screen max-w-full relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex items-end",
   taglineClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  optixFlowConfig
 }) {
   const renderAction = useMemo(() => {
     if (actionSlot) return actionSlot;
     if (!action) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon,
-          typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "group-hover:underline", children: label }) : label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = action;
+    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: "group-hover:underline", children: label }) : label,
+      iconAfter
+    ] }) });
   }, [actionSlot, action]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
@@ -846,21 +847,56 @@ function HeroArchitectureFullscreen({
       pattern,
       patternOpacity,
       className: cn(
-        "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-['']",
+        "relative flex min-h-screen min-w-screen items-center justify-center dark w-full overflow-hidden font-poppins",
         className
       ),
       containerClassName,
-      style: { backgroundImage: backgroundImage ? `url('${backgroundImage}')` : void 0 },
-      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 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 border-border pl-6 text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+      children: [
+        backgroundImage && /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: backgroundImage,
+            alt: "",
+            className: "absolute inset-0 min-h-screen min-w-screen object-cover object-center brightness-50",
+            optixFlowConfig
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-20 h-full w-full max-w-340 p-8 md:p-24", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-end gap-6 md:gap-12", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-sm leading-none uppercase text-balance text-white text-shadow-xl",
+                  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 text-white text-balance text-shadow-xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }))
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-between gap-5 sm:flex-row sm:items-center", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-base text-balance text-white text-shadow-xl",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) }),
           /* @__PURE__ */ jsx("div", { className: "shrink-0", children: renderAction })
-        ] })
-      ] }) })
+        ] }) })
+      ]
     }
   );
 }

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

@@ -972,7 +972,7 @@ function HeroBillingPlatformLogos({
   logos,
   logosSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -1046,15 +1046,15 @@ function HeroBillingPlatformLogos({
               "div",
               {
                 className: cn(
-                  "flex flex-col items-center gap-4 lg:flex-row",
+                  "flex flex-col items-start md:items-center gap-4 lg:flex-row",
                   actionsClassName
                 ),
                 children: renderActions
               }
             ) })
           ] }) }),
-          imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mr-auto ml-auto aspect-[1.28581291/1] w-full max-w-149 lg:mr-0 lg:ml-auto", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mx-auto aspect-[1.020365896/1] h-full w-[79.35%] max-w-118.25 overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+          imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mr-auto ml-auto md:aspect-[1.28581291/1] w-full max-w-full md:max-w-149 lg:mr-0 lg:ml-auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mx-auto md:aspect-[1.020365896/1] h-full w-full md:w-[79.35%] max-w-full md:max-w-118.25 overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
                 src: mainImage.src,
@@ -1108,7 +1108,7 @@ function HeroBillingPlatformLogos({
           "div",
           {
             className: cn(
-              "flex flex-col items-center justify-center gap-8 pt-28",
+              "flex flex-col items-center justify-center gap-8 pt-8 md:pt-28",
               logosClassName
             ),
             children: [

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

@@ -947,7 +947,7 @@ function HeroBillingPlatformLogos({
   logos,
   logosSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -1021,15 +1021,15 @@ function HeroBillingPlatformLogos({
               "div",
               {
                 className: cn(
-                  "flex flex-col items-center gap-4 lg:flex-row",
+                  "flex flex-col items-start md:items-center gap-4 lg:flex-row",
                   actionsClassName
                 ),
                 children: renderActions
               }
             ) })
           ] }) }),
-          imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "relative mr-auto ml-auto aspect-[1.28581291/1] w-full max-w-149 lg:mr-0 lg:ml-auto", children: [
-            /* @__PURE__ */ jsx("div", { className: "relative mx-auto aspect-[1.020365896/1] h-full w-[79.35%] max-w-118.25 overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsx(
+          imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "relative mr-auto ml-auto md:aspect-[1.28581291/1] w-full max-w-full md:max-w-149 lg:mr-0 lg:ml-auto", children: [
+            /* @__PURE__ */ jsx("div", { className: "relative mx-auto md:aspect-[1.020365896/1] h-full w-full md:w-[79.35%] max-w-full md:max-w-118.25 overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsx(
               Img,
               {
                 src: mainImage.src,
@@ -1083,7 +1083,7 @@ function HeroBillingPlatformLogos({
           "div",
           {
             className: cn(
-              "flex flex-col items-center justify-center gap-8 pt-28",
+              "flex flex-col items-center justify-center gap-8 pt-8 md:pt-28",
               logosClassName
             ),
             children: [

package/dist/hero-centered-gradient-cta.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 reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -824,6 +825,38 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function HeroCenteredGradientCta({
   badge,
   badgeIcon,
@@ -835,7 +868,7 @@ function HeroCenteredGradientCta({
   features,
   featuresSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -850,8 +883,15 @@ function HeroCenteredGradientCta({
   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: "flex flex-col items-start mt-6 md:mt-8 gap-4 sm:flex-row sm:items-center", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -860,51 +900,94 @@ function HeroCenteredGradientCta({
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
-            label,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
             iconAfter
           ] })
         },
         index
       );
-    });
+    }) });
   }, [actionsSlot, actions]);
   const renderFeatures = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", feature.className), children: [
-      feature.icon,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.title })
-    ] }, index));
+    return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        href: feature.href,
+        className: cn("flex items-center gap-2", feature.className),
+        children: [
+          feature.icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.title })
+        ]
+      },
+      index
+    ));
   }, [featuresSlot, features]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center min-h-screen overflow-hidden bg-background py-32", className),
+      className,
       containerClassName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(120,119,198,0.3),transparent)]", gradientClassName) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col items-center text-center", children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-            "inline-flex items-center gap-2 rounded-full border border-border/50 bg-accent px-4 py-2 text-sm",
-            badgeClassName
-          ), children: [
-            badgeIcon,
-            typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
-          ] }),
-          (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: [
-            "Build something",
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-linear-to-r from-primary to-purple-600 bg-clip-text text-transparent", children: headingHighlight })
-          ] }) : null),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-          (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm text-muted-foreground", featuresClassName), children: renderFeatures })
-        ] })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative gap-6 z-10 flex flex-col items-center text-center", children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-3", children: [
+          badgeIcon,
+          typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
+        ] }),
+        (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-full md:max-w-md text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-full md:max-w-md text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-linear-to-r from-primary to-purple-600 bg-clip-text text-transparent", children: headingHighlight })
+          }
+        ) : null),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "max-w-full md:max-w-md text-md md:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-0 md:mt-6 flex flex-col gap-4 sm:flex-row",
+              actionsClassName
+            ),
+            children: renderActions
+          }
+        ),
+        (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-4 md:mt-6 flex flex-col md:flex-row items-center gap-4 md:gap-8 text-sm",
+              featuresClassName
+            ),
+            children: renderFeatures
+          }
+        )
+      ] })
     }
   );
 }