@opensite/ui 0.5.4 → 0.5.6

package/dist/about-vision-gallery.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-FG_f_Y4z.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-interface VisionGalleryImageItem {
+interface GalleryImageItem {
     src: string;
     alt: string;
 }
@@ -36,7 +39,7 @@ interface AboutVisionGalleryProps {
     /**
      * Array of gallery images
      */
-    images?: VisionGalleryImageItem[];
+    images?: GalleryImageItem[];
     /**
      * Custom slot for rendering images (overrides images array)
      */
@@ -46,47 +49,47 @@ interface AboutVisionGalleryProps {
      */
     imagesClassName?: string;
     /**
-     * Vision section title
+     * Primary content section title
      */
-    visionTitle?: React.ReactNode;
+    primarySectionTitle?: React.ReactNode;
     /**
-     * Additional CSS classes for the vision title
+     * Additional CSS classes for the primary section title
      */
-    visionTitleClassName?: string;
+    primarySectionTitleClassName?: string;
     /**
-     * Vision section content
+     * Primary content section body
      */
-    visionContent?: React.ReactNode;
+    primarySectionContent?: React.ReactNode;
     /**
-     * Additional CSS classes for the vision content
+     * Additional CSS classes for the primary section content
      */
-    visionContentClassName?: string;
+    primarySectionContentClassName?: string;
     /**
-     * Creators section title
+     * Secondary content section title
      */
-    creatorsTitle?: React.ReactNode;
+    secondarySectionTitle?: React.ReactNode;
     /**
-     * Additional CSS classes for the creators title
+     * Additional CSS classes for the secondary section title
      */
-    creatorsTitleClassName?: string;
+    secondarySectionTitleClassName?: string;
     /**
-     * Creators section content
+     * Secondary content section body
      */
-    creatorsContent?: React.ReactNode;
+    secondarySectionContent?: React.ReactNode;
     /**
-     * Additional CSS classes for the creators content
+     * Additional CSS classes for the secondary section content
      */
-    creatorsContentClassName?: string;
+    secondarySectionContentClassName?: string;
     /**
-     * Creators link text
+     * Secondary section link text
      */
-    creatorsLinkText?: React.ReactNode;
+    secondarySectionLinkText?: React.ReactNode;
     /**
-     * Creators link URL
+     * Secondary section link URL
      */
-    creatorsLinkUrl?: string;
+    secondarySectionLinkUrl?: string;
     /**
-     * CTA section title
+     * Call-to-action section title
      */
     ctaTitle?: React.ReactNode;
     /**
@@ -109,7 +112,43 @@ interface AboutVisionGalleryProps {
      * Optional Optix Flow configuration for image optimization
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Section background variant
+     */
+    background?: SectionBackground;
+    /**
+     * Section spacing variant
+     */
+    spacing?: SectionSpacing;
+    /**
+     * Pattern background key or URL
+     */
+    pattern?: PatternName | undefined;
+    /**
+     * Pattern opacity (0-1)
+     */
+    patternOpacity?: number;
 }
-declare function AboutVisionGallery({ className, containerClassName, title, titleClassName, subtitle, subtitleClassName, images, imagesSlot, imagesClassName, visionTitle, visionTitleClassName, visionContent, visionContentClassName, creatorsTitle, creatorsTitleClassName, creatorsContent, creatorsContentClassName, creatorsLinkText, creatorsLinkUrl, ctaTitle, ctaTitleClassName, ctaAction, ctaSlot, ctaClassName, optixFlowConfig, }: AboutVisionGalleryProps): React.JSX.Element;
+/**
+ * AboutVisionGallery - A two-column about section with image gallery, dual content areas,
+ * and a call-to-action banner. Features a hero area with title/subtitle, responsive image
+ * grid, two side-by-side content sections, and a prominent CTA section.
+ *
+ * @example
+ * ```tsx
+ * <AboutVisionGallery
+ *   title="About Our Company"
+ *   subtitle="Learn more about what we do"
+ *   images={[{ src: "/image1.jpg", alt: "Team photo" }]}
+ *   primarySectionTitle="Our Mission"
+ *   primarySectionContent="We are dedicated to excellence..."
+ *   secondarySectionTitle="Our Story"
+ *   secondarySectionContent="Founded in 2020..."
+ *   ctaTitle="Join Our Team"
+ *   ctaAction={{ label: "View Careers", href: "/careers" }}
+ * />
+ * ```
+ */
+declare function AboutVisionGallery({ className, containerClassName, title, titleClassName, subtitle, subtitleClassName, images, imagesSlot, imagesClassName, primarySectionTitle, primarySectionTitleClassName, primarySectionContent, primarySectionContentClassName, secondarySectionTitle, secondarySectionTitleClassName, secondarySectionContent, secondarySectionContentClassName, secondarySectionLinkText, secondarySectionLinkUrl, ctaTitle, ctaTitleClassName, ctaAction, ctaSlot, ctaClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: AboutVisionGalleryProps): React.JSX.Element;
 
 export { AboutVisionGallery, type AboutVisionGalleryProps };

package/dist/about-vision-gallery.js

@@ -1,12 +1,13 @@
 "use client";
+import * as React from 'react';
+import React__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/about/about-vision-gallery.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -428,6 +429,379 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+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__default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ 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 = {
+  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
+  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
+  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
+  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
+  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
+  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
+  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
+  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
+  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
+  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
+  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
+  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
+};
+var maskTop = "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)";
+var maskBottom = "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)";
+var maskCenter = "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)";
+var maskTopLeft = "radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%)";
+var maskTopRight = "radial-gradient(ellipse 80% 80% at 100% 0%, #000 50%, transparent 90%)";
+var maskBottomLeft = "radial-gradient(ellipse 80% 80% at 0% 100%, #000 50%, transparent 90%)";
+var maskBottomRight = "radial-gradient(ellipse 80% 80% at 100% 100%, #000 50%, transparent 90%)";
+var circuitBoardPattern = (id, mask) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "h-full w-full",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: mask ? {
+      maskImage: mask,
+      WebkitMaskImage: mask
+    } : void 0,
+    children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "pattern",
+        {
+          id,
+          x: "0",
+          y: "0",
+          width: "100",
+          height: "100",
+          patternUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M0 50h40M60 50h40M50 0v40M50 60v40",
+                stroke: "hsl(var(--muted))",
+                strokeWidth: "1",
+                fill: "none"
+              }
+            ),
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "3", fill: "hsl(var(--muted))" }),
+            /* @__PURE__ */ jsx("circle", { cx: "0", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
+            /* @__PURE__ */ jsx("circle", { cx: "100", cy: "50", r: "2", fill: "hsl(var(--muted))" }),
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "0", r: "2", fill: "hsl(var(--muted))" }),
+            /* @__PURE__ */ jsx("circle", { cx: "50", cy: "100", r: "2", fill: "hsl(var(--muted))" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
+    ]
+  }
+);
+var gridDotsPattern = (id, mask) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "h-full w-full",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: mask ? {
+      maskImage: mask,
+      WebkitMaskImage: mask
+    } : void 0,
+    children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "pattern",
+        {
+          id,
+          x: "0",
+          y: "0",
+          width: "40",
+          height: "40",
+          patternUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M0 20h40M20 0v40",
+                stroke: "hsl(var(--muted))",
+                strokeWidth: "0.5",
+                fill: "none"
+              }
+            ),
+            /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "2", fill: "hsl(var(--muted))" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
+    ]
+  }
+);
+var gridPattern = (size, mask) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "h-full w-full bg-[linear-gradient(to_right,_hsl(var(--muted))_1px,_transparent_1px),linear-gradient(to_bottom,_hsl(var(--muted))_1px,_transparent_1px)]",
+    style: {
+      backgroundSize: `${size}px ${size}px`,
+      ...mask ? {
+        maskImage: mask,
+        WebkitMaskImage: mask
+      } : {}
+    }
+  }
+);
+var diagonalCrossPattern = (mask) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "h-full w-full",
+    style: {
+      backgroundImage: "repeating-linear-gradient(45deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px), repeating-linear-gradient(135deg, transparent, transparent 32px, hsl(var(--muted)) 32px, hsl(var(--muted)) 33px)",
+      ...mask ? {
+        maskImage: mask,
+        WebkitMaskImage: mask
+      } : {}
+    }
+  }
+);
+var dashedGridMaskBase = "repeating-linear-gradient(to right, black 0px, black 3px, transparent 3px, transparent 8px), repeating-linear-gradient(to bottom, black 0px, black 3px, transparent 3px, transparent 8px)";
+var dashedGridPattern = (fadeMask) => {
+  const mask = fadeMask ? `${dashedGridMaskBase}, ${fadeMask}` : dashedGridMaskBase;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-full w-full",
+      style: {
+        backgroundImage: "linear-gradient(to right, hsl(var(--muted)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--muted)) 1px, transparent 1px)",
+        backgroundSize: "20px 20px",
+        backgroundPosition: "0 0, 0 0",
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        maskComposite: "intersect",
+        WebkitMaskComposite: "source-in"
+      }
+    }
+  );
+};
+var gradientGlow = (position) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "pointer-events-none absolute left-1/2 z-0 aspect-square w-3/4 -translate-x-1/2 rounded-full opacity-50 blur-3xl",
+      position === "top" ? "-top-1/4" : "-bottom-1/4"
+    ),
+    style: {
+      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
+    }
+  }
+);
+var spotlight = (position) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "pointer-events-none absolute top-1/2 z-0 aspect-square w-3/4 -translate-y-1/2 rounded-full opacity-40 blur-3xl",
+      position === "left" ? "-left-1/4" : "-right-1/4"
+    ),
+    style: {
+      background: "radial-gradient(circle, hsl(var(--primary)) 0%, transparent 70%)"
+    }
+  }
+);
+var patternOverlays = {
+  circuitBoardBasic: () => circuitBoardPattern("circuit-board-basic"),
+  circuitBoardFadeTop: () => circuitBoardPattern("circuit-board-fade-top", maskTop),
+  circuitBoardFadeBottom: () => circuitBoardPattern("circuit-board-fade-bottom", maskBottom),
+  circuitBoardFadeCenter: () => circuitBoardPattern("circuit-board-fade-center", maskCenter),
+  circuitBoardFadeTopLeft: () => circuitBoardPattern("circuit-board-fade-top-left", maskTopLeft),
+  circuitBoardFadeTopRight: () => circuitBoardPattern("circuit-board-fade-top-right", maskTopRight),
+  circuitBoardFadeBottomLeft: () => circuitBoardPattern("circuit-board-fade-bottom-left", maskBottomLeft),
+  circuitBoardFadeBottomRight: () => circuitBoardPattern("circuit-board-fade-bottom-right", maskBottomRight),
+  dashedGridBasic: () => dashedGridPattern(),
+  dashedGridFadeTop: () => dashedGridPattern(maskTop),
+  dashedGridFadeBottom: () => dashedGridPattern(maskBottom),
+  dashedGridFadeCenter: () => dashedGridPattern(maskCenter),
+  dashedGridFadeTopLeft: () => dashedGridPattern(maskTopLeft),
+  dashedGridFadeTopRight: () => dashedGridPattern(maskTopRight),
+  dashedGridFadeBottomLeft: () => dashedGridPattern(maskBottomLeft),
+  dashedGridFadeBottomRight: () => dashedGridPattern(maskBottomRight),
+  diagonalCrossBasic: () => diagonalCrossPattern(),
+  diagonalCrossFadeTop: () => diagonalCrossPattern(maskTop),
+  diagonalCrossFadeBottom: () => diagonalCrossPattern(maskBottom),
+  diagonalCrossFadeCenter: () => diagonalCrossPattern(maskCenter),
+  diagonalCrossFadeTopLeft: () => diagonalCrossPattern(maskTopLeft),
+  diagonalCrossFadeTopRight: () => diagonalCrossPattern(maskTopRight),
+  diagonalCrossFadeBottomLeft: () => diagonalCrossPattern(maskBottomLeft),
+  diagonalCrossFadeBottomRight: () => diagonalCrossPattern(maskBottomRight),
+  gridBasic: () => gridPattern(40),
+  gridFadeTop: () => gridPattern(32, maskTop),
+  gridFadeBottom: () => gridPattern(32, maskBottom),
+  gridFadeCenter: () => gridPattern(40, maskCenter),
+  gridFadeTopLeft: () => gridPattern(32, maskTopLeft),
+  gridFadeTopRight: () => gridPattern(32, maskTopRight),
+  gridFadeBottomLeft: () => gridPattern(32, maskBottomLeft),
+  gridFadeBottomRight: () => gridPattern(32, maskBottomRight),
+  gridDotsBasic: () => gridDotsPattern("grid-dots-basic"),
+  gridDotsFadeCenter: () => gridDotsPattern("grid-dots-fade-center", maskCenter),
+  gradientGlowTop: () => gradientGlow("top"),
+  gradientGlowBottom: () => gradientGlow("bottom"),
+  spotlightLeft: () => spotlight("left"),
+  spotlightRight: () => spotlight("right")
+};
+var inlinePatternStyles = {
+  radialGradientTop: {
+    background: "radial-gradient(125% 125% at 50% 10%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
+  },
+  radialGradientBottom: {
+    background: "radial-gradient(125% 125% at 50% 90%, hsl(var(--background)) 40%, hsl(var(--primary)) 100%)"
+  }
+};
+function PatternBackground({
+  pattern,
+  opacity = 0.08,
+  className,
+  style
+}) {
+  if (!pattern) {
+    return null;
+  }
+  if (pattern in inlinePatternStyles) {
+    const inlineStyle = inlinePatternStyles[pattern];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("pointer-events-none absolute inset-0 z-0", className),
+        style: { ...inlineStyle, opacity, ...style },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (pattern in patternOverlays) {
+    const Overlay = patternOverlays[pattern];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("pointer-events-none absolute inset-0 z-0", className),
+        style: { opacity, ...style },
+        "aria-hidden": "true",
+        children: Overlay()
+      }
+    );
+  }
+  const patternUrl = pattern in patternSvgs ? patternSvgs[pattern] : pattern;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0 z-0", className),
+      style: {
+        backgroundImage: `url(${patternUrl})`,
+        backgroundRepeat: "repeat",
+        backgroundSize: "auto",
+        opacity,
+        ...style
+      },
+      "aria-hidden": "true"
+    }
+  );
+}
+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__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__ */ jsxs(
+      "section",
+      {
+        ref,
+        id,
+        className: cn(
+          "relative",
+          pattern ? "overflow-hidden" : null,
+          backgroundStyles[background],
+          spacingStyles[spacing],
+          className
+        ),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            PatternBackground,
+            {
+              pattern,
+              opacity: effectivePatternOpacity,
+              className: patternClassName
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 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 })
+                ] }),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Section.displayName = "Section";
 function AboutVisionGallery({
   className,
   containerClassName,
@@ -438,34 +812,28 @@ function AboutVisionGallery({
   images,
   imagesSlot,
   imagesClassName,
-  visionTitle = "Our Vision",
-  visionTitleClassName,
-  visionContent = `For years, the process of building custom software has remained challenging. Today, visual builders exist, but tailored solutions still require technical expertise and a lot of time. This is a problem for businesses and individuals alike.
-
-What if you could create custom software without writing a single line of code? What if you could build your own tools.
-
-With our platform, you can! Our tools let you design layouts and create functionality\u2014all without needing to code.
-
-We believe that everyone should be able to build their own solutions, regardless of their technical background.`,
-  visionContentClassName,
-  creatorsTitle = "Our Creators",
-  creatorsTitleClassName,
-  creatorsContent = `has been building web tools for over a decade, focusing on efficiency and user control in every project. We know that the best solutions are the ones that you can create yourself.
-
-We initially developed these solutions for our own team, and now everyone can benefit from them too. We are proud to offer a platform that is accessible to all, regardless of technical expertise.
-
-Our team is made up of talented individuals who are passionate about creating tools that empower users to build their own solutions with ease. We are dedicated to helping you achieve your goals, and we can't wait to see what you create!`,
-  creatorsContentClassName,
-  creatorsLinkText = "Our Company",
-  creatorsLinkUrl = "#",
-  ctaTitle = "Part of Our Global Team",
+  primarySectionTitle,
+  primarySectionTitleClassName,
+  primarySectionContent,
+  primarySectionContentClassName,
+  secondarySectionTitle,
+  secondarySectionTitleClassName,
+  secondarySectionContent,
+  secondarySectionContentClassName,
+  secondarySectionLinkText,
+  secondarySectionLinkUrl,
+  ctaTitle,
   ctaTitleClassName,
   ctaAction,
   ctaSlot,
   ctaClassName,
-  optixFlowConfig
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
 }) {
-  const renderImages = () => {
+  const imagesContent = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("grid gap-3 md:grid-cols-2 lg:grid-cols-3", imagesClassName), children: images.map((image, idx) => /* @__PURE__ */ jsx(
@@ -478,8 +846,8 @@ Our team is made up of talented individuals who are passionate about creating to
       },
       idx
     )) });
-  };
-  const renderCta = () => {
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  const ctaContent = useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
     return /* @__PURE__ */ jsx(
@@ -493,31 +861,45 @@ Our team is made up of talented individuals who are passionate about creating to
         children: ctaAction.label
       }
     );
-  };
-  return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-8 pb-28 text-center", children: [
-      title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold md:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-      subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl font-medium text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle }))
-    ] }),
-    renderImages(),
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-5xl gap-28 py-28 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        visionTitle && (typeof visionTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-5 text-4xl font-semibold", visionTitleClassName), children: visionTitle }) : /* @__PURE__ */ jsx("div", { className: cn("mb-5", visionTitleClassName), children: visionTitle })),
-        visionContent && (typeof visionContent === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground whitespace-pre-line", visionContentClassName), children: visionContent }) : /* @__PURE__ */ jsx("div", { className: visionContentClassName, children: visionContent }))
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        creatorsTitle && (typeof creatorsTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-5 text-4xl font-semibold", creatorsTitleClassName), children: creatorsTitle }) : /* @__PURE__ */ jsx("div", { className: cn("mb-5", creatorsTitleClassName), children: creatorsTitle })),
-        /* @__PURE__ */ jsxs("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground", creatorsContentClassName), children: [
-          creatorsLinkText && creatorsLinkUrl && /* @__PURE__ */ jsx(Pressable, { href: creatorsLinkUrl, className: "mr-1 underline", children: creatorsLinkText }),
-          creatorsContent
+  }, [ctaSlot, ctaAction]);
+  const hasPrimarySection = primarySectionTitle || primarySectionContent;
+  const hasSecondarySection = secondarySectionTitle || secondarySectionContent || secondarySectionLinkText;
+  const hasCtaSection = ctaTitle || ctaSlot || ctaAction;
+  return /* @__PURE__ */ jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      containerClassName,
+      children: [
+        (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-8 pb-28 text-center", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-semibold md:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl font-medium text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle }))
+        ] }),
+        imagesContent,
+        (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-5xl gap-28 py-28 md:grid-cols-2", children: [
+          hasPrimarySection && /* @__PURE__ */ jsxs("div", { children: [
+            primarySectionTitle && (typeof primarySectionTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-5 text-4xl font-semibold", primarySectionTitleClassName), children: primarySectionTitle }) : /* @__PURE__ */ jsx("div", { className: cn("mb-5", primarySectionTitleClassName), children: primarySectionTitle })),
+            primarySectionContent && (typeof primarySectionContent === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground whitespace-pre-line", primarySectionContentClassName), children: primarySectionContent }) : /* @__PURE__ */ jsx("div", { className: primarySectionContentClassName, children: primarySectionContent }))
+          ] }),
+          hasSecondarySection && /* @__PURE__ */ jsxs("div", { children: [
+            secondarySectionTitle && (typeof secondarySectionTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-5 text-4xl font-semibold", secondarySectionTitleClassName), children: secondarySectionTitle }) : /* @__PURE__ */ jsx("div", { className: cn("mb-5", secondarySectionTitleClassName), children: secondarySectionTitle })),
+            (secondarySectionContent || secondarySectionLinkText) && /* @__PURE__ */ jsxs("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground", secondarySectionContentClassName), children: [
+              secondarySectionLinkText && secondarySectionLinkUrl && /* @__PURE__ */ jsx(Pressable, { href: secondarySectionLinkUrl, className: "mr-1 underline", children: secondarySectionLinkText }),
+              secondarySectionContent
+            ] })
+          ] })
+        ] }),
+        hasCtaSection && /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl bg-muted/50 p-14 text-center md:flex-row md:text-left", ctaClassName), children: [
+          ctaTitle && (typeof ctaTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-semibold whitespace-pre-line", ctaTitleClassName), children: ctaTitle }) : /* @__PURE__ */ jsx("div", { className: ctaTitleClassName, children: ctaTitle })),
+          ctaContent
         ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl bg-muted/50 p-14 text-center md:flex-row md:text-left", ctaClassName), children: [
-      ctaTitle && (typeof ctaTitle === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-3xl font-semibold whitespace-pre-line", ctaTitleClassName), children: ctaTitle }) : /* @__PURE__ */ jsx("div", { className: ctaTitleClassName, children: ctaTitle })),
-      renderCta()
-    ] })
-  ] }) });
+      ]
+    }
+  );
 }
 
 export { AboutVisionGallery };