@opensite/ui 0.5.8 → 0.6.0

package/dist/about-minimal-story.cjs

@@ -437,14 +437,35 @@ function AboutMinimalStory({
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
         (authorSlot || author) && authorContent,
-        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-        content && (typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line", bodyClassName), children: content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8", bodyClassName), children: content })),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "text-4xl font-bold tracking-tight md:text-5xl",
+              titleClassName
+            ),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+        content && (typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line",
+              bodyClassName
+            ),
+            children: content
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8", bodyClassName), children: content })),
         featuredImage && /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: featuredImage.src,
             alt: featuredImage.alt,
-            className: cn("mt-12 w-full rounded-2xl object-cover", imageClassName),
+            className: cn(
+              "mt-6 md:mt-12 w-full rounded-2xl object-cover",
+              imageClassName
+            ),
             optixFlowConfig
           }
         )

package/dist/about-minimal-story.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-minimal-story.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-minimal-story.js

@@ -431,14 +431,35 @@ function AboutMinimalStory({
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl", contentClassName), children: [
         (authorSlot || author) && authorContent,
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-        content && (typeof content === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line", bodyClassName), children: content }) : /* @__PURE__ */ jsx("div", { className: cn("mt-8", bodyClassName), children: content })),
+        title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "text-4xl font-bold tracking-tight md:text-5xl",
+              titleClassName
+            ),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+        content && (typeof content === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-8 text-lg leading-relaxed text-muted-foreground whitespace-pre-line",
+              bodyClassName
+            ),
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: cn("mt-8", bodyClassName), children: content })),
         featuredImage && /* @__PURE__ */ jsx(
           Img,
           {
             src: featuredImage.src,
             alt: featuredImage.alt,
-            className: cn("mt-12 w-full rounded-2xl object-cover", imageClassName),
+            className: cn(
+              "mt-6 md:mt-12 w-full rounded-2xl object-cover",
+              imageClassName
+            ),
             optixFlowConfig
           }
         )

package/dist/about-mission-dual-image.cjs

@@ -890,13 +890,13 @@ function AboutMissionDualImage({
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
           primaryImage && /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: primaryImage.src,
               alt: primaryImage.alt,
-              className: cn("h-full rounded-2xl object-cover", primaryImageClassName),
+              className: cn("w-full h-auto rounded-2xl object-cover sm:h-full", primaryImageClassName),
               optixFlowConfig
             }
           ),
@@ -905,7 +905,7 @@ function AboutMissionDualImage({
             {
               src: secondaryImage.src,
               alt: secondaryImage.alt,
-              className: cn("h-full rounded-2xl object-cover sm:mt-12", secondaryImageClassName),
+              className: cn("w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12", secondaryImageClassName),
               optixFlowConfig
             }
           )

package/dist/about-mission-dual-image.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-mission-dual-image.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-mission-dual-image.js

@@ -869,13 +869,13 @@ function AboutMissionDualImage({
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-4", actionsClassName), children: actionsContent })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-4 sm:grid sm:grid-cols-2", children: [
           primaryImage && /* @__PURE__ */ jsx(
             Img,
             {
               src: primaryImage.src,
               alt: primaryImage.alt,
-              className: cn("h-full rounded-2xl object-cover", primaryImageClassName),
+              className: cn("w-full h-auto rounded-2xl object-cover sm:h-full", primaryImageClassName),
               optixFlowConfig
             }
           ),
@@ -884,7 +884,7 @@ function AboutMissionDualImage({
             {
               src: secondaryImage.src,
               alt: secondaryImage.alt,
-              className: cn("h-full rounded-2xl object-cover sm:mt-12", secondaryImageClassName),
+              className: cn("w-full h-auto rounded-2xl object-cover sm:h-full sm:mt-12", secondaryImageClassName),
               optixFlowConfig
             }
           )

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { F as FeatureItem, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { F as FeatureItem, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-mission-principles.cjs

@@ -985,7 +985,7 @@ function AboutMissionPrinciples({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", principlesClassName), children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "relative rounded-lg border p-6 transition-colors hover:bg-accent/50",
+        className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
         children: [
           principle.number && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
@@ -1042,10 +1042,10 @@ function AboutMissionPrinciples({
           ] }),
           principlesContent
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-24 rounded-lg bg-accent p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-24 rounded-lg bg-muted p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
             visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", visionHeadingClassName), children: visionHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
-            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-muted-foreground", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
+            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-foreground/80", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
         ] }) })

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

@@ -1,4 +1,4 @@
-export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-CNw1QkRd.cjs';
+export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-CoT4WfJd.cjs';
 import 'react';
 import './pattern-background-a7gKHzHy.cjs';
 import 'react/jsx-runtime';

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

@@ -1,4 +1,4 @@
-export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-ClLtyUd-.js';
+export { a as AboutMissionPrinciples, m as AboutMissionPrinciplesProps } from './community-initiatives-DTKUzkJp.js';
 import 'react';
 import './pattern-background-a7gKHzHy.js';
 import 'react/jsx-runtime';

package/dist/about-mission-principles.js

@@ -964,7 +964,7 @@ function AboutMissionPrinciples({
     return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-6 sm:grid-cols-2", principlesClassName), children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "relative rounded-lg border p-6 transition-colors hover:bg-accent/50",
+        className: "relative rounded-lg border p-6 transition-colors hover:bg-muted",
         children: [
           principle.number && /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-4 text-3xl font-bold text-primary/20", children: principle.number }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -1021,10 +1021,10 @@ function AboutMissionPrinciples({
           ] }),
           principlesContent
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-24 rounded-lg bg-accent p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("mt-24 rounded-lg bg-muted p-8 lg:p-12", visionClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
             visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", visionHeadingClassName), children: visionHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionHeadingClassName), children: visionHeading })),
-            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-muted-foreground", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
+            visionDescription && (typeof visionDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-foreground/80", visionDescriptionClassName), children: visionDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", visionDescriptionClassName), children: visionDescription }))
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex justify-center lg:col-span-1 lg:justify-end", children: visionActionContent })
         ] }) })

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CNw1QkRd.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CoT4WfJd.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-B53JjGZ5.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-ClLtyUd-.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-DTKUzkJp.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CyUmnmEM.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';

package/dist/about-split-hero.cjs

@@ -555,34 +555,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var maxWidthStyles = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-[1536px]",
-  full: "max-w-full"
-};
-var Container = React__namespace.default.forwardRef(
-  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
-    const Component = as;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ref,
-        className: cn(
-          "mx-auto w-full px-2 sm:px-4 lg:px-8",
-          maxWidthStyles[maxWidth],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -849,85 +821,6 @@ function PatternBackground({
     }
   );
 }
-var backgroundStyles = {
-  default: "bg-background text-foreground",
-  white: "bg-white text-dark",
-  gray: "bg-muted/30 text-foreground",
-  dark: "bg-foreground text-background",
-  transparent: "bg-transparent text-foreground",
-  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  muted: "bg-muted text-muted-foreground"
-};
-var spacingStyles = {
-  none: "py-0 md:py-0",
-  sm: "py-12 md:py-16",
-  md: "py-16 md:py-24",
-  lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
-};
-var Section = React__namespace.default.forwardRef(
-  ({
-    id,
-    title,
-    subtitle,
-    children,
-    className,
-    style,
-    background = "default",
-    spacing = "lg",
-    pattern,
-    patternOpacity,
-    patternClassName,
-    containerClassName,
-    containerMaxWidth = "xl",
-    ...props
-  }, ref) => {
-    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "section",
-      {
-        ref,
-        id,
-        className: cn(
-          "relative",
-          pattern ? "overflow-hidden" : null,
-          backgroundStyles[background],
-          spacingStyles[spacing],
-          className
-        ),
-        style,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            PatternBackground,
-            {
-              pattern,
-              opacity: effectivePatternOpacity,
-              className: patternClassName
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Container,
-            {
-              maxWidth: containerMaxWidth,
-              className: cn("relative z-10", containerClassName),
-              children: [
-                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 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 })
-                ] }),
-                children
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Section.displayName = "Section";
 function AboutSplitHero({
   brandText,
   brandTextClassName,
@@ -943,13 +836,13 @@ function AboutSplitHero({
   imageSrc,
   imageAlt,
   imageClassName,
+  contentClassName,
   className,
-  containerClassName,
   optixFlowConfig,
-  background,
-  spacing,
+  background = "dark",
   pattern,
-  patternOpacity
+  patternOpacity,
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) {
   const ctaContent = React.useMemo(() => {
     if (ctaSlot) return ctaSlot;
@@ -962,7 +855,10 @@ function AboutSplitHero({
         variant: ctaAction.variant || "default",
         size: ctaAction.size || "lg",
         asButton: true,
-        className: cn("mt-10 flex h-fit items-center gap-2.5 rounded-xl px-5 py-4 font-bold", ctaClassName),
+        className: cn(
+          "inline-flex items-center gap-2.5 font-semibold",
+          ctaClassName
+        ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: ctaAction.label }),
           /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
@@ -970,40 +866,92 @@ function AboutSplitHero({
       }
     );
   }, [ctaSlot, ctaAction, ctaClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Section,
+  const bgColorClass = React.useMemo(() => {
+    switch (background) {
+      case "dark":
+        return "bg-gray-900 text-white";
+      case "gray":
+        return "bg-gray-100 text-gray-900";
+      case "white":
+        return "bg-white text-gray-900";
+      default:
+        return "bg-background text-foreground";
+    }
+  }, [background]);
+  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
+  const contentArea = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn(className),
-      containerClassName,
+      className: cn(
+        "relative flex w-full items-center lg:w-1/2",
+        bgColorClass,
+        contentClassName
+      ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container my-10 flex w-[500px] flex-col gap-24", children: [
-          (brandText || brandHighlight) && /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("text-4xl text-foreground", brandTextClassName), children: [
-            brandText,
-            " ",
-            brandHighlight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("bg-gradient-to-tr from-foreground to-muted bg-clip-text text-transparent", brandHighlightClassName), children: brandHighlight })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl text-foreground lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2.5 text-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2.5", descriptionClassName), children: description })),
-            ctaContent
-          ] })
-        ] }),
-        imageSrc && /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: imageSrc,
-            alt: imageAlt || "",
-            className: cn("hidden h-screen w-1/2 object-cover lg:block", imageClassName),
-            optixFlowConfig
-          }
-        )
+        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
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          ctaContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: ctaContent })
+        ] }) })
       ]
     }
   );
+  const imageArea = imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    img.Img,
+    {
+      src: imageSrc,
+      alt: imageAlt || "",
+      className: cn("h-full w-full object-cover", imageClassName),
+      optixFlowConfig
+    }
+  ) }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-screen", mobileOrder, desktopOrder), children: [
+    contentArea,
+    imageArea
+  ] }) });
 }
 
 exports.AboutSplitHero = AboutSplitHero;

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

@@ -1,4 +1,4 @@
-export { A as AboutSplitHero, l as AboutSplitHeroProps } from './community-initiatives-CNw1QkRd.cjs';
+export { A as AboutSplitHero, l as AboutSplitHeroProps, D as DirectionConfig } from './community-initiatives-CoT4WfJd.cjs';
 import 'react';
 import './pattern-background-a7gKHzHy.cjs';
 import 'react/jsx-runtime';

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

@@ -1,4 +1,4 @@
-export { A as AboutSplitHero, l as AboutSplitHeroProps } from './community-initiatives-ClLtyUd-.js';
+export { A as AboutSplitHero, l as AboutSplitHeroProps, D as DirectionConfig } from './community-initiatives-DTKUzkJp.js';
 import 'react';
 import './pattern-background-a7gKHzHy.js';
 import 'react/jsx-runtime';