@opensite/ui 0.8.2 → 0.8.4

package/dist/project-work-showcase.js

@@ -951,7 +951,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/registry.cjs

@@ -449,7 +449,7 @@ var Section = React52__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -18788,7 +18788,7 @@ function CarouselImageHero({
   images,
   autoPlayInterval = 7500,
   className,
-  containerClassName = "mx-auto w-full max-w-7xl relative z-10 rounded-2xl overflow-hidden shadow-xl",
+  containerClassName = "mx-none md:mx-auto w-screen md:w-full max-w-screen md:max-w-7xl relative z-10 rounded-none md:rounded-2xl overflow-hidden shadow-none md:shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -18798,19 +18798,33 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-32",
   pattern,
   patternOpacity
 }) {
   const [currentImageIndex, setCurrentImageIndex] = React52__namespace.useState(0);
+  const intervalRef = React52__namespace.useRef(null);
+  const goToNext = React52__namespace.useCallback(() => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
+  }, [images?.length]);
+  const resetInterval = React52__namespace.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React52__namespace.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
   React52__namespace.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex(
-        (prevIndex) => (prevIndex + 1) % (images?.length ?? 1)
-      );
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -18844,12 +18858,15 @@ function CarouselImageHero({
     {
       background,
       spacing,
-      className: cn("relative min-h-[600px] overflow-hidden", className),
+      className: cn(
+        "relative min-h-screen md:min-h-[600px] overflow-hidden",
+        className
+      ),
       pattern,
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -18882,7 +18899,7 @@ function CarouselImageHero({
               children: images?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
-                  onClick: () => setCurrentImageIndex(index),
+                  onClick: () => goToSlide(index),
                   className: cn(
                     "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
                     index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
@@ -19867,9 +19884,9 @@ function CarouselProgressSlider({
           className: cn(className),
           pattern,
           patternOpacity,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative min-h-[400px]", imageClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-4 lg:gap-8 lg:grid-cols-2", contentClassName), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-video", children: [
+              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
                 SliderWrapper,
                 {
                   value: slide.id,
@@ -19888,20 +19905,26 @@ function CarouselProgressSlider({
                   ) })
                 },
                 slide.id
-              )) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+              )),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
                 Pressable,
                 {
                   onClick: togglePause,
                   asButton: true,
                   variant: "outline",
                   size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm",
                   "aria-label": isPaused ? "Play" : "Pause",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: isPaused ? "lucide/play" : "lucide/pause", size: 18 })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: isPaused ? "lucide/play" : "lucide/pause",
+                      size: 18
+                    }
+                  )
                 }
               ) })
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -20273,7 +20296,7 @@ function CarouselPrevious({
 }
 function CarouselNext({
   className,
-  variant = "outline",
+  variant = "default",
   size = "icon",
   ...props
 }) {
@@ -20312,7 +20335,7 @@ function FeatureShowcase({
   equalizeOnMobile,
   stretchMediaOnMobile,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20344,9 +20367,7 @@ function FeatureShowcase({
       const heights = slideRefs.current.slice(0, items.length).map((node) => node?.offsetHeight ?? 0);
       const maxHeight = Math.max(...heights, 0);
       if (maxHeight > 0) {
-        setMobileSlideHeight(
-          (prev) => prev === maxHeight ? prev : maxHeight
-        );
+        setMobileSlideHeight((prev) => prev === maxHeight ? prev : maxHeight);
       }
     };
     updateHeights();
@@ -20396,17 +20417,28 @@ function FeatureShowcase({
       /* @__PURE__ */ jsxRuntime.jsx(
         CarouselPrevious,
         {
-          className: cn(baseArrowClassName, "left-4 md:left-6", arrowClassName)
+          className: cn(baseArrowClassName, "right-16", arrowClassName)
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         CarouselNext,
         {
-          className: cn(baseArrowClassName, "right-4 md:right-6", arrowClassName)
+          className: cn(baseArrowClassName, "right-0", arrowClassName)
         }
       )
     ] });
-  }, [items, carouselClassName, equalizeOnMobile, mobileSlideHeight, slideClassName, contentClassName, mediaWrapperClassName, mediaClassName, baseArrowClassName, arrowClassName]);
+  }, [
+    items,
+    carouselClassName,
+    equalizeOnMobile,
+    mobileSlideHeight,
+    slideClassName,
+    contentClassName,
+    mediaWrapperClassName,
+    mediaClassName,
+    baseArrowClassName,
+    arrowClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {

package/dist/registry.js

@@ -409,7 +409,7 @@ var Section = React52__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),
@@ -18748,7 +18748,7 @@ function CarouselImageHero({
   images,
   autoPlayInterval = 7500,
   className,
-  containerClassName = "mx-auto w-full max-w-7xl relative z-10 rounded-2xl overflow-hidden shadow-xl",
+  containerClassName = "mx-none md:mx-auto w-screen md:w-full max-w-screen md:max-w-7xl relative z-10 rounded-none md:rounded-2xl overflow-hidden shadow-none md:shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
@@ -18758,19 +18758,33 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-0 md:py-32",
   pattern,
   patternOpacity
 }) {
   const [currentImageIndex, setCurrentImageIndex] = React52.useState(0);
+  const intervalRef = React52.useRef(null);
+  const goToNext = React52.useCallback(() => {
+    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
+  }, [images?.length]);
+  const resetInterval = React52.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(goToNext, autoPlayInterval);
+  }, [goToNext, autoPlayInterval]);
+  const goToSlide = React52.useCallback((index) => {
+    setCurrentImageIndex(index);
+    resetInterval();
+  }, [resetInterval]);
   React52.useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentImageIndex(
-        (prevIndex) => (prevIndex + 1) % (images?.length ?? 1)
-      );
-    }, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [images?.length, autoPlayInterval]);
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -18804,12 +18818,15 @@ function CarouselImageHero({
     {
       background,
       spacing,
-      className: cn("relative min-h-[600px] overflow-hidden", className),
+      className: cn(
+        "relative min-h-screen md:min-h-[600px] overflow-hidden",
+        className
+      ),
       pattern,
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0 bg-black", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxs(
             "div",
             {
@@ -18842,7 +18859,7 @@ function CarouselImageHero({
               children: images?.map((_, index) => /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: () => setCurrentImageIndex(index),
+                  onClick: () => goToSlide(index),
                   className: cn(
                     "flex h-4 w-4 items-center justify-center rounded-full transition-colors",
                     index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
@@ -19827,9 +19844,9 @@ function CarouselProgressSlider({
           className: cn(className),
           pattern,
           patternOpacity,
-          children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("relative min-h-[400px]", imageClassName), children: [
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4 lg:gap-8 lg:grid-cols-2", contentClassName), children: [
+            /* @__PURE__ */ jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-video", children: [
+              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
                 SliderWrapper,
                 {
                   value: slide.id,
@@ -19848,20 +19865,26 @@ function CarouselProgressSlider({
                   ) })
                 },
                 slide.id
-              )) }),
-              /* @__PURE__ */ jsx("div", { className: "relative mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsx(
+              )),
+              /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   onClick: togglePause,
                   asButton: true,
                   variant: "outline",
                   size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full",
+                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-background/80 backdrop-blur-sm",
                   "aria-label": isPaused ? "Play" : "Pause",
-                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: isPaused ? "lucide/play" : "lucide/pause", size: 18 })
+                  children: /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: isPaused ? "lucide/play" : "lucide/pause",
+                      size: 18
+                    }
+                  )
                 }
               ) })
-            ] }),
+            ] }) }),
             /* @__PURE__ */ jsx(
               "div",
               {
@@ -20233,7 +20256,7 @@ function CarouselPrevious({
 }
 function CarouselNext({
   className,
-  variant = "outline",
+  variant = "default",
   size = "icon",
   ...props
 }) {
@@ -20272,7 +20295,7 @@ function FeatureShowcase({
   equalizeOnMobile,
   stretchMediaOnMobile,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -20304,9 +20327,7 @@ function FeatureShowcase({
       const heights = slideRefs.current.slice(0, items.length).map((node) => node?.offsetHeight ?? 0);
       const maxHeight = Math.max(...heights, 0);
       if (maxHeight > 0) {
-        setMobileSlideHeight(
-          (prev) => prev === maxHeight ? prev : maxHeight
-        );
+        setMobileSlideHeight((prev) => prev === maxHeight ? prev : maxHeight);
       }
     };
     updateHeights();
@@ -20356,17 +20377,28 @@ function FeatureShowcase({
       /* @__PURE__ */ jsx(
         CarouselPrevious,
         {
-          className: cn(baseArrowClassName, "left-4 md:left-6", arrowClassName)
+          className: cn(baseArrowClassName, "right-16", arrowClassName)
         }
       ),
       /* @__PURE__ */ jsx(
         CarouselNext,
         {
-          className: cn(baseArrowClassName, "right-4 md:right-6", arrowClassName)
+          className: cn(baseArrowClassName, "right-0", arrowClassName)
         }
       )
     ] });
-  }, [items, carouselClassName, equalizeOnMobile, mobileSlideHeight, slideClassName, contentClassName, mediaWrapperClassName, mediaClassName, baseArrowClassName, arrowClassName]);
+  }, [
+    items,
+    carouselClassName,
+    equalizeOnMobile,
+    mobileSlideHeight,
+    slideClassName,
+    contentClassName,
+    mediaWrapperClassName,
+    mediaClassName,
+    baseArrowClassName,
+    arrowClassName
+  ]);
   return /* @__PURE__ */ jsxs(
     Section,
     {

package/dist/resource-detail-whitepaper-sidebar.cjs

@@ -917,7 +917,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-detail-whitepaper-sidebar.js

@@ -896,7 +896,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-course-cards.cjs

@@ -996,7 +996,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-course-cards.js

@@ -974,7 +974,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-featured-articles.cjs

@@ -949,7 +949,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-featured-articles.js

@@ -928,7 +928,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-featured-grid.cjs

@@ -1027,7 +1027,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-featured-grid.js

@@ -1004,7 +1004,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-news-updates.cjs

@@ -968,7 +968,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/resource-list-news-updates.js

@@ -945,7 +945,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/reviews-images-helpful.cjs

@@ -1015,7 +1015,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/reviews-images-helpful.js

@@ -991,7 +991,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/reviews-list-verified.cjs

@@ -565,7 +565,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/reviews-list-verified.js

@@ -542,7 +542,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/section.cjs

@@ -374,7 +374,7 @@ var Section = React__default.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/section.js

@@ -368,7 +368,7 @@ var Section = React.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/service-detail-centered-expertise.cjs

@@ -916,7 +916,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/service-detail-centered-expertise.js

@@ -895,7 +895,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/service-detail-compact-cards.cjs

@@ -916,7 +916,7 @@ var Section = React__namespace.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/service-detail-compact-cards.js

@@ -895,7 +895,7 @@ var Section = React__default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/service-detail-image-hero.cjs

@@ -376,7 +376,7 @@ var Section = React__default.default.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),

package/dist/service-detail-image-hero.js

@@ -370,7 +370,7 @@ var Section = React.forwardRef(
               maxWidth: containerMaxWidth,
               className: cn("relative z-10", containerClassName),
               children: [
-                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
                   subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
                   title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
                 ] }),