@opensite/ui 2.3.1 → 2.3.3

package/dist/about-mission-features.cjs

@@ -462,7 +462,6 @@ function AboutMissionFeatures({
   features,
   featuresSlot,
   className,
-  containerClassName,
   titleClassName,
   descriptionClassName,
   missionLabelClassName,
@@ -474,7 +473,8 @@ function AboutMissionFeatures({
   featuresClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -505,7 +505,8 @@ function AboutMissionFeatures({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 lg:gap-16", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",

package/dist/about-mission-features.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { F as FeatureItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
+import { F as FeatureItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface AboutMissionFeaturesProps {
@@ -118,6 +118,6 @@ interface AboutMissionFeaturesProps {
      */
     patternOpacity?: number;
 }
-declare function AboutMissionFeatures({ title, description, missionLabel, missionText, mainImage, missionBackgroundImage, featuresTitle, featuresDescription, features, featuresSlot, className, containerClassName, titleClassName, descriptionClassName, missionLabelClassName, missionTextClassName, mainImageClassName, missionSectionClassName, featuresTitleClassName, featuresDescriptionClassName, featuresClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: AboutMissionFeaturesProps): React.JSX.Element;
+declare function AboutMissionFeatures({ title, description, missionLabel, missionText, mainImage, missionBackgroundImage, featuresTitle, featuresDescription, features, featuresSlot, className, titleClassName, descriptionClassName, missionLabelClassName, missionTextClassName, mainImageClassName, missionSectionClassName, featuresTitleClassName, featuresDescriptionClassName, featuresClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: AboutMissionFeaturesProps): React.JSX.Element;
 
 export { AboutMissionFeatures, type AboutMissionFeaturesProps };

package/dist/about-mission-features.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { F as FeatureItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import { F as FeatureItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface AboutMissionFeaturesProps {
@@ -118,6 +118,6 @@ interface AboutMissionFeaturesProps {
      */
     patternOpacity?: number;
 }
-declare function AboutMissionFeatures({ title, description, missionLabel, missionText, mainImage, missionBackgroundImage, featuresTitle, featuresDescription, features, featuresSlot, className, containerClassName, titleClassName, descriptionClassName, missionLabelClassName, missionTextClassName, mainImageClassName, missionSectionClassName, featuresTitleClassName, featuresDescriptionClassName, featuresClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: AboutMissionFeaturesProps): React.JSX.Element;
+declare function AboutMissionFeatures({ title, description, missionLabel, missionText, mainImage, missionBackgroundImage, featuresTitle, featuresDescription, features, featuresSlot, className, titleClassName, descriptionClassName, missionLabelClassName, missionTextClassName, mainImageClassName, missionSectionClassName, featuresTitleClassName, featuresDescriptionClassName, featuresClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: AboutMissionFeaturesProps): React.JSX.Element;
 
 export { AboutMissionFeatures, type AboutMissionFeaturesProps };

package/dist/about-mission-features.js

@@ -456,7 +456,6 @@ function AboutMissionFeatures({
   features,
   featuresSlot,
   className,
-  containerClassName,
   titleClassName,
   descriptionClassName,
   missionLabelClassName,
@@ -468,7 +467,8 @@ function AboutMissionFeatures({
   featuresClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -499,7 +499,8 @@ function AboutMissionFeatures({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-8 lg:gap-16", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h1",

package/dist/about-mission-principles.cjs

@@ -910,9 +910,9 @@ function AboutMissionPrinciples({
   visionActionSlot,
   visionClassName,
   className,
-  containerClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -954,9 +954,22 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: cn("relative rounded-lg border p-6 transition-colors", `hover:${getNestedCardBg(background, "muted")}`),
+            className: cn(
+              "relative rounded-lg border p-6 transition-colors",
+              `hover:${getNestedCardBg(background, "muted")}`
+            ),
             children: [
-              principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute right-4 top-4 text-3xl font-bold", getAccentColor(background), "opacity-20"), children: principle.number }),
+              principle.number && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute right-4 top-4 text-3xl font-bold",
+                    getAccentColor(background),
+                    "opacity-20"
+                  ),
+                  children: principle.number
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
                 principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: principle.description }) : principle.description)

package/dist/about-mission-principles.d.cts

@@ -1,7 +1,7 @@
-export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-r_NhxVet.cjs';
+export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-BFOWojwp.cjs';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';

package/dist/about-mission-principles.d.ts

@@ -1,7 +1,7 @@
-export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-DmVsuoHE.js';
+export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-CUqiRX_E.js';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-XLPGq8A5.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';

package/dist/about-mission-principles.js

@@ -889,9 +889,9 @@ function AboutMissionPrinciples({
   visionActionSlot,
   visionClassName,
   className,
-  containerClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -933,9 +933,22 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("relative rounded-lg border p-6 transition-colors", `hover:${getNestedCardBg(background, "muted")}`),
+            className: cn(
+              "relative rounded-lg border p-6 transition-colors",
+              `hover:${getNestedCardBg(background, "muted")}`
+            ),
             children: [
-              principle.number && /* @__PURE__ */ jsx("div", { className: cn("absolute right-4 top-4 text-3xl font-bold", getAccentColor(background), "opacity-20"), children: principle.number }),
+              principle.number && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute right-4 top-4 text-3xl font-bold",
+                    getAccentColor(background),
+                    "opacity-20"
+                  ),
+                  children: principle.number
+                }
+              ),
               /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
                 principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
                 principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: principle.description }) : principle.description)

package/dist/about-network-spotlight.cjs

@@ -907,7 +907,6 @@ function AboutNetworkSpotlight({
   spotlightCard,
   spotlightCardSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   eyebrowClassName,
   headingClassName,
@@ -917,6 +916,7 @@ function AboutNetworkSpotlight({
   imageClassName,
   spotlightCardClassName,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,

package/dist/about-network-spotlight.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-BFOWojwp.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface AboutNetworkSpotlightProps {
@@ -120,6 +120,6 @@ interface AboutNetworkSpotlightProps {
  * AboutNetworkSpotlight - Dark spotlight section with image overlay and CTA.
  * Ideal for partner programs, network invitations, or alliance highlights.
  */
-declare function AboutNetworkSpotlight({ eyebrow, heading, description, highlights, highlightsSlot, actions, actionsSlot, image, spotlightCard, spotlightCardSlot, className, containerClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, highlightsClassName, actionsClassName, imageClassName, spotlightCardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: AboutNetworkSpotlightProps): React.JSX.Element;
+declare function AboutNetworkSpotlight({ eyebrow, heading, description, highlights, highlightsSlot, actions, actionsSlot, image, spotlightCard, spotlightCardSlot, className, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, highlightsClassName, actionsClassName, imageClassName, spotlightCardClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: AboutNetworkSpotlightProps): React.JSX.Element;
 
 export { AboutNetworkSpotlight, type AboutNetworkSpotlightProps };

package/dist/about-network-spotlight.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CUqiRX_E.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface AboutNetworkSpotlightProps {
@@ -120,6 +120,6 @@ interface AboutNetworkSpotlightProps {
  * AboutNetworkSpotlight - Dark spotlight section with image overlay and CTA.
  * Ideal for partner programs, network invitations, or alliance highlights.
  */
-declare function AboutNetworkSpotlight({ eyebrow, heading, description, highlights, highlightsSlot, actions, actionsSlot, image, spotlightCard, spotlightCardSlot, className, containerClassName, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, highlightsClassName, actionsClassName, imageClassName, spotlightCardClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: AboutNetworkSpotlightProps): React.JSX.Element;
+declare function AboutNetworkSpotlight({ eyebrow, heading, description, highlights, highlightsSlot, actions, actionsSlot, image, spotlightCard, spotlightCardSlot, className, contentClassName, eyebrowClassName, headingClassName, descriptionClassName, highlightsClassName, actionsClassName, imageClassName, spotlightCardClassName, background, containerClassName, spacing, pattern, patternOpacity, optixFlowConfig, }: AboutNetworkSpotlightProps): React.JSX.Element;
 
 export { AboutNetworkSpotlight, type AboutNetworkSpotlightProps };

package/dist/about-network-spotlight.js

@@ -886,7 +886,6 @@ function AboutNetworkSpotlight({
   spotlightCard,
   spotlightCardSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   eyebrowClassName,
   headingClassName,
@@ -896,6 +895,7 @@ function AboutNetworkSpotlight({
   imageClassName,
   spotlightCardClassName,
   background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,

package/dist/about-split-hero.cjs

@@ -801,7 +801,10 @@ function AboutSplitHero({
       case "dark":
         return "bg-foreground text-background";
       case "gray":
-        return cn(getNestedCardBg(background), getNestedCardTextColor(background));
+        return cn(
+          getNestedCardBg(background),
+          getNestedCardTextColor(background)
+        );
       case "white":
         return "bg-background";
       default:
@@ -820,52 +823,63 @@ function AboutSplitHero({
       ),
       children: [
         pattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
-                brandTextClassName
-              ),
-              children: [
-                brandText,
-                brandText && brandHighlight && " ",
-                brandHighlight && /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
-                      brandHighlightClassName
-                    ),
-                    children: brandHighlight
-                  }
-                )
-              ]
-            }
-          ),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "text-base leading-relaxed opacity-90 sm:text-lg",
-                descriptionClassName
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 w-full",
+              "px-8 sm:px-12 lg:px-16 xl:px-24",
+              directionConfig.mobile === "mediaTop" ? "pt-16" : "pt-32",
+              "pb-16 md:pb-24 md:pt-24"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+              (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
+                    brandTextClassName
+                  ),
+                  children: [
+                    brandText,
+                    brandText && brandHighlight && " ",
+                    brandHighlight && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+                          brandHighlightClassName
+                        ),
+                        children: brandHighlight
+                      }
+                    )
+                  ]
+                }
               ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          ctaContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: ctaContent })
-        ] }) })
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base leading-relaxed opacity-90 sm:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              ctaContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: ctaContent })
+            ] })
+          }
+        )
       ]
     }
   );

package/dist/about-split-hero.d.cts

@@ -1,7 +1,7 @@
-export { A as AboutSplitHero, l as AboutSplitHeroProps, D as DirectionConfig } from './community-initiatives-r_NhxVet.cjs';
+export { A as AboutSplitHero, l as AboutSplitHeroProps, D as DirectionConfig } from './community-initiatives-BFOWojwp.cjs';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-tmd_MRJv.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';

package/dist/about-split-hero.d.ts

@@ -1,7 +1,7 @@
-export { A as AboutSplitHero, l as AboutSplitHeroProps, D as DirectionConfig } from './community-initiatives-DmVsuoHE.js';
+export { A as AboutSplitHero, l as AboutSplitHeroProps, D as DirectionConfig } from './community-initiatives-CUqiRX_E.js';
 import 'react';
 import 'react/jsx-runtime';
-import './blocks-XLPGq8A5.js';
+import './blocks-DRE-f6cS.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';

package/dist/about-split-hero.js

@@ -780,7 +780,10 @@ function AboutSplitHero({
       case "dark":
         return "bg-foreground text-background";
       case "gray":
-        return cn(getNestedCardBg(background), getNestedCardTextColor(background));
+        return cn(
+          getNestedCardBg(background),
+          getNestedCardTextColor(background)
+        );
       case "white":
         return "bg-background";
       default:
@@ -799,52 +802,63 @@ function AboutSplitHero({
       ),
       children: [
         pattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
-        /* @__PURE__ */ jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
-                brandTextClassName
-              ),
-              children: [
-                brandText,
-                brandText && brandHighlight && " ",
-                brandHighlight && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
-                      brandHighlightClassName
-                    ),
-                    children: brandHighlight
-                  }
-                )
-              ]
-            }
-          ),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "text-base leading-relaxed opacity-90 sm:text-lg",
-                descriptionClassName
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 w-full",
+              "px-8 sm:px-12 lg:px-16 xl:px-24",
+              directionConfig.mobile === "mediaTop" ? "pt-16" : "pt-32",
+              "pb-16 md:pb-24 md:pt-24"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+              (brandText || brandHighlight) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold uppercase tracking-wider sm:text-2xl",
+                    brandTextClassName
+                  ),
+                  children: [
+                    brandText,
+                    brandText && brandHighlight && " ",
+                    brandHighlight && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent",
+                          brandHighlightClassName
+                        ),
+                        children: brandHighlight
+                      }
+                    )
+                  ]
+                }
               ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          ctaContent && /* @__PURE__ */ jsx("div", { className: "pt-4", children: ctaContent })
-        ] }) })
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl xl:text-6xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-base leading-relaxed opacity-90 sm:text-lg",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              ctaContent && /* @__PURE__ */ jsx("div", { className: "pt-4", children: ctaContent })
+            ] })
+          }
+        )
       ]
     }
   );

package/dist/about-startup-team.cjs

@@ -893,7 +893,6 @@ Section.displayName = "Section";
 var ALL_TAB_VALUE = "__all__";
 function AboutStartupTeam({
   className,
-  containerClassName,
   title,
   titleClassName,
   description,
@@ -908,7 +907,8 @@ function AboutStartupTeam({
   teamMembersClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   defaultActiveTab,
@@ -960,10 +960,7 @@ function AboutStartupTeam({
         onClick: () => handleTabChange(link.value),
         className: cn(
           "block w-full text-left rounded-lg px-4 py-2 text-sm font-medium transition-colors",
-          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(
-            getTextColor(background, "muted"),
-            "hover:bg-muted"
-          )
+          activeTab === link.value ? "bg-primary text-primary-foreground" : cn(getTextColor(background, "muted"), "hover:bg-muted")
         ),
         children: link.label
       },
@@ -996,18 +993,24 @@ function AboutStartupTeam({
               className: "mx-auto h-24 w-24 rounded-full object-cover",
               optixFlowConfig
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicIcon,
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              name: "lucide/user",
-              size: 40,
-              className: cn(getTextColor(background, "muted"))
+              className: cn(
+                "mx-auto flex h-24 w-24 items-center justify-center rounded-full",
+                getNestedCardBg(background),
+                getNestedCardTextColor(background)
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/user",
+                  size: 40,
+                  className: cn(getTextColor(background, "muted"))
+                }
+              )
             }
-          ) }),
+          ),
           member.name && (typeof member.name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-4 font-semibold", children: member.name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: member.name })),
           member.role && (typeof member.role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: member.role }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: member.role })),
           member.socialLinks && member.socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center gap-3", children: member.socialLinks.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1061,8 +1064,9 @@ function AboutStartupTeam({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {