@opensite/ui 2.8.2 → 2.8.3

package/dist/project-video-hover-rounded.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DTNjmUnl.cjs';
-import './blocks-CrqLti5l.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DM27LAzE.cjs';
+import './blocks-U7wOoE0O.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-video-hover-rounded.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CdK9AUiW.js';
-import './blocks-BTy27FOO.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-64wrtPed.js';
+import './blocks-DmMuCMEh.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-video-hover-stack.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DTNjmUnl.cjs';
-import './blocks-CrqLti5l.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DM27LAzE.cjs';
+import './blocks-U7wOoE0O.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-video-hover-stack.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CdK9AUiW.js';
-import './blocks-BTy27FOO.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-64wrtPed.js';
+import './blocks-DmMuCMEh.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-video-hover-two-by-two.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DTNjmUnl.cjs';
-import './blocks-CrqLti5l.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DM27LAzE.cjs';
+import './blocks-U7wOoE0O.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-video-hover-two-by-two.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CdK9AUiW.js';
-import './blocks-BTy27FOO.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-64wrtPed.js';
+import './blocks-DmMuCMEh.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-work-showcase.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DTNjmUnl.cjs';
-import './blocks-CrqLti5l.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-DM27LAzE.cjs';
+import './blocks-U7wOoE0O.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-work-showcase.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CdK9AUiW.js';
-import './blocks-BTy27FOO.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-64wrtPed.js';
+import './blocks-DmMuCMEh.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-zigzag-layout.d.cts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground } from './community-initiatives-DTNjmUnl.cjs';
-import './blocks-CrqLti5l.cjs';
+import { S as SectionBackground } from './community-initiatives-DM27LAzE.cjs';
+import './blocks-U7wOoE0O.cjs';
 import 'react';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/project-zigzag-layout.d.ts

@@ -1,10 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { OptixFlowConfig } from '@page-speed/img';
-import { S as SectionBackground } from './community-initiatives-CdK9AUiW.js';
-import './blocks-BTy27FOO.js';
+import { S as SectionBackground } from './community-initiatives-64wrtPed.js';
+import './blocks-DmMuCMEh.js';
 import 'react';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/registry.cjs

@@ -23484,6 +23484,7 @@ function CarouselPrevious({
       className: cn(
         "absolute size-8 rounded-full",
         orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        canScrollPrev ? "cursor-pointer" : "cursor-not-allowed",
         className
       ),
       disabled: !canScrollPrev,
@@ -23513,6 +23514,7 @@ function CarouselNext({
       className: cn(
         "absolute size-8 rounded-full",
         orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        canScrollNext ? "cursor-pointer" : "cursor-not-allowed",
         className
       ),
       disabled: !canScrollNext,
@@ -33736,6 +33738,7 @@ function CarouselGradientText({
         href: item.href,
         className: cn(
           "relative flex aspect-4/5 max-h-[500px] rounded-2xl",
+          "transition-all duration-500 shadow-sm hover:shadow-xl",
           item.className,
           cardClassName
         ),
@@ -33758,16 +33761,15 @@ function CarouselGradientText({
                 "size-full rounded-2xl bg-cover object-cover",
                 imageClassName
               ),
-              loading: "lazy",
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-white/70", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-1 text-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white space-y-2 text-pretty text-shadow-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-lg font-semibold", children: [
               item.title,
               "."
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.description })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-75 text-base font-normal", children: item.description })
           ] }) })
         ]
       }
@@ -33817,7 +33819,7 @@ function CarouselGradientText({
                     ]
                   }
                 ),
-                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : null,
+                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 md:mt-4 text-xl", taglineClassName), children: tagline }) : tagline : null,
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -33853,8 +33855,12 @@ function CarouselGradientText({
               "span",
               {
                 className: cn(
-                  "flex h-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-muted-foreground/15 text-xs font-semibold whitespace-nowrap transition-all duration-300",
-                  index + 1 === current ? "w-fit px-4" : "my-4 mx-2 md:mx-4 size-4"
+                  "transition-all duration-500",
+                  "bg-card text-card-foreground",
+                  "ring-4 ring-primary",
+                  "flex shrink-0 items-center justify-center",
+                  "h-8 overflow-hidden rounded-full text-xs font-semibold whitespace-nowrap",
+                  index + 1 === current ? "w-fit px-4 mx-2" : "my-4 mx-2 md:mx-4 size-4 hover:bg-primary hover:text-primary-foreground cursor-pointer"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -35176,8 +35182,33 @@ function InteriorCarousel({
   patternClassName,
   optixFlowConfig
 }) {
+  const [api, setApi] = React8.useState();
   const [lightboxOpen, setLightboxOpen] = React8.useState(false);
   const [lightboxIndex, setLightboxIndex] = React8.useState(0);
+  const [canScrollPrevious, setCanScrollPrevious] = React8.useState(false);
+  const [canScrollNext, setCanScrollNext] = React8.useState(false);
+  React8.useEffect(() => {
+    if (!api) return;
+    const updateState = () => {
+      React8.startTransition(() => {
+        setCanScrollPrevious(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+      });
+    };
+    updateState();
+    api.on("select", updateState);
+    api.on("reInit", updateState);
+    return () => {
+      api.off("select", updateState);
+      api.off("reInit", updateState);
+    };
+  }, [api]);
+  const scrollPrevious = React8.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React8.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
   const lightboxItems = React8.useMemo(() => {
     if (!images || images.length === 0) return [];
     return images.map((image, index) => {
@@ -35273,35 +35304,39 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        heading || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-6 md:px-8", children: [
+        heading || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 mb-6 md:mb-16 px-6 md:px-8 max-w-full md:max-w-md", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
               className: cn(
-                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                "text-2xl font-semibold tracking-tight md:text-4xl lg:text-6xl text-pretty",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          descriptionContent && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg text-balance", descriptionClassName), children: descriptionContent }) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          ) : heading),
+          descriptionContent && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
             {
-              className: cn("max-w-lg text-balance", descriptionClassName),
+              className: cn(
+                "text-lg text-balance opacity-75",
+                descriptionClassName
+              ),
               children: descriptionContent
             }
-          ))
+          ) : descriptionContent)
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 md:px-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          Carousel,
-          {
-            opts: {
-              align: "start",
-              loop
-            },
-            className: cn("mx-auto w-full max-w-6xl", carouselClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 md:px-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Carousel,
+            {
+              opts: {
+                align: "start",
+                loop
+              },
+              setApi,
+              className: cn("mx-auto w-full max-w-6xl", carouselClassName),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
                 CarouselContent,
                 {
                   style: {
@@ -35310,28 +35345,26 @@ function InteriorCarousel({
                   className: carouselContentClassName,
                   children: imagesContent
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CarouselPrevious,
-                {
-                  className: cn(
-                    "left-5 scale-120 border-none bg-foreground/30 text-background hover:bg-foreground/50",
-                    controlsClassName
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CarouselNext,
-                {
-                  className: cn(
-                    "right-5 scale-120 border-none bg-foreground/30 text-background hover:bg-foreground/50",
-                    controlsClassName
-                  )
-                }
               )
-            ]
-          }
-        ) }),
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CarouselPagination,
+            {
+              onPrevious: scrollPrevious,
+              onNext: scrollNext,
+              canScrollPrevious,
+              canScrollNext,
+              size: "lg",
+              mobileSize: "md",
+              className: cn(
+                "mt-4 justify-end md:mt-0 md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:justify-between md:pointer-events-none",
+                controlsClassName
+              ),
+              buttonClassName: "bg-foreground text-background hover:bg-foreground/80 pointer-events-auto md:mx-5"
+            }
+          )
+        ] }) }),
         lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
           lightbox.Lightbox,
           {
@@ -35765,7 +35798,8 @@ function BlogGridAuthorCardsComponent({
   viewAllAction,
   viewAllSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -35774,7 +35808,6 @@ function BlogGridAuthorCardsComponent({
   viewAllClassName,
   optixFlowConfig,
   background,
-  spacing,
   pattern,
   patternOpacity
 }) {
@@ -35817,7 +35850,7 @@ function BlogGridAuthorCardsComponent({
           href: postHref,
           className: cn("group flex flex-col", postCardClassName),
           children: [
-            post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 flex overflow-clip rounded-xl md:mb-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "transition-opacity duration-300 group-hover:opacity-80", children: /* @__PURE__ */ jsxRuntime.jsx(
+            post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shadow-xl mb-6 flex overflow-clip rounded-xl md:mb-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "transition-opacity duration-300 group-hover:opacity-80", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.Img,
               {
                 src: post.image,
@@ -35826,17 +35859,17 @@ function BlogGridAuthorCardsComponent({
                 optixFlowConfig
               }
             ) }) }),
-            (post.label || post.category) && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: post.label || post.category }) }),
-            post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-2xl lg:pt-4 lg:text-3xl", children: post.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-2xl lg:pt-4 lg:text-3xl", children: post.title })),
-            (post.summary || post.description) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 line-clamp-2 text-sm text-muted-foreground md:mb-5 md:text-base", children: post.summary || post.description }),
-            (post.author || post.authorAvatar) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12", children: [
+            post.label || post.category ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: post.label || post.category }) : null,
+            post.title && (typeof post.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-semibold wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 leading-tight transition-all duration-300 group-hover:underline group-hover:underline-offset-4", children: post.title }) : post.title),
+            (post.summary || post.description) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 line-clamp-2 text-sm md:mb-5 md:text-base", children: post.summary || post.description }),
+            (post.author || post.authorAvatar) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-12 ring-4 ring-primary shadow-lg", children: [
                 post.authorAvatar && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: post.authorAvatar }),
                 /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: post.authorInitials || (authorStr ? authorStr.slice(0, 2).toUpperCase() : "") })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-px", children: [
-                post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: post.author }),
-                (post.published || post.date) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: post.published || post.date })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-px text-sm", children: [
+                post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: post.author }),
+                (post.published || post.date) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-75", children: post.published || post.date })
               ] })
             ] })
           ]
@@ -35853,25 +35886,37 @@ function BlogGridAuthorCardsComponent({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         (heading || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-6 md:mb-14 lg:mb-16", headerClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between gap-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
               className: cn(
-                "mb-4 w-full text-4xl font-medium md:mb-5 md:text-5xl lg:mb-6 lg:text-6xl",
+                "text-2xl font-semibold tracking-tight md:text-4xl lg:text-6xl text-pretty",
                 headingClassName
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })) }) }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionClassName, children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          ) : heading) }) }),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg text-balance opacity-75",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : description)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3",
+              "grid",
+              "grid-cols-1 md:grid-cols-2 2xl:grid-cols-3",
+              "gap-8 md:gap-12",
               postsClassName
             ),
             children: postsContent
@@ -35880,10 +35925,7 @@ function BlogGridAuthorCardsComponent({
         (viewAllSlot || viewAllAction) && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(
-              "mt-8 flex flex-col items-center py-2 md:hidden",
-              viewAllClassName
-            ),
+            className: cn("mt-16 flex flex-col items-center", viewAllClassName),
             children: viewAllActionContent
           }
         )
@@ -42307,12 +42349,13 @@ var FeatureCard = React8__namespace.memo(
           borderRadius: "24px"
         },
         className: cn(
-          "relative flex items-start gap-4 bg-background text-foreground md:w-fit md:max-w-sm",
+          "bg-card text-card-foreground",
+          "relative flex items-start gap-4 md:w-fit md:max-w-sm",
           isActive ? "shadow-xl overflow-visible" : "cursor-pointer shadow-none hover:shadow-xl transition-shadow duration-500 overflow-hidden"
         ),
         onClick,
         children: [
-          isActive && feature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-background rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+          isActive && feature.href && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 bg-card rounded-full h-fit w-fit p-2 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
               href: feature.href,
@@ -42460,7 +42503,7 @@ var FeaturesMobile = React8__namespace.memo(
             x: { type: "spring", stiffness: 300, damping: 30 },
             opacity: { duration: 0.2 }
           },
-          className: "rounded-3xl bg-background p-4 text-left",
+          className: "border border-muted/50 rounded-3xl bg-card text-card-foreground p-4 text-left",
           children: (currentFeature?.title || currentFeature?.description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
             currentFeature.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: currentFeature.title }),
             currentFeature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1", children: currentFeature.description })
@@ -42565,7 +42608,8 @@ function FeatureAnimatedCarousel({
           "div",
           {
             className: cn(
-              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl bg-muted p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
+              "bg-muted border border-muted/50",
+              "relative flex min-h-[500px] flex-col-reverse gap-8 overflow-hidden rounded-3xl p-6 md:flex-row md:items-center md:p-12 lg:min-h-[600px]"
             )
           }
         )
@@ -53034,6 +53078,7 @@ function HeroAdCampaignExpert({
   descriptionClassName,
   optixFlowConfig
 }) {
+  const { responsiveClassName } = useResponsiveLayout({ directionConfig });
   const renderActions = React8.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
@@ -53042,7 +53087,7 @@ function HeroAdCampaignExpert({
       {
         actions,
         actionsSlot,
-        actionsClassName
+        actionsClassName: cn("mt-4 md:mt-4", actionsClassName)
       }
     );
   }, [actionsSlot, actions, actionsClassName]);
@@ -53090,8 +53135,6 @@ function HeroAdCampaignExpert({
     descriptionClassName,
     renderActions
   ]);
-  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
-  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
   const hasMedia = mediaItem?.image || mediaItem?.video;
   const renderMedia = React8.useMemo(() => {
     if (!mediaItem) return null;
@@ -53136,8 +53179,7 @@ function HeroAdCampaignExpert({
         {
           className: cn(
             "flex items-center gap-12 md:gap-16 lg:gap-24",
-            mobileOrder,
-            desktopOrder
+            responsiveClassName
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -53145,7 +53187,7 @@ function HeroAdCampaignExpert({
               {
                 items: headerItems,
                 className: cn(
-                  "relative flex flex-col items-start gap-4 md:gap-8 lg:w-1/2",
+                  "relative flex flex-col items-start gap-4 w-full lg:w-1/2",
                   contentClassName
                 )
               }