@opensite/ui 0.5.3 → 0.5.5

package/dist/about-vision-gallery.cjs

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/about/about-vision-gallery.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -460,34 +460,24 @@ 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
 }) {
-  const renderImages = () => {
+  const imagesContent = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-3 md:grid-cols-2 lg:grid-cols-3", imagesClassName), children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -500,8 +490,8 @@ Our team is made up of talented individuals who are passionate about creating to
       },
       idx
     )) });
-  };
-  const renderCta = () => {
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  const ctaContent = React.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaAction) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -515,29 +505,32 @@ Our team is made up of talented individuals who are passionate about creating to
         children: ctaAction.label
       }
     );
-  };
+  }, [ctaSlot, ctaAction]);
+  const hasPrimarySection = primarySectionTitle || primarySectionContent;
+  const hasSecondarySection = secondarySectionTitle || secondarySectionContent || secondarySectionLinkText;
+  const hasCtaSection = ctaTitle || ctaSlot || ctaAction;
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-8 pb-28 text-center", children: [
+    (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-3xl flex-col gap-8 pb-28 text-center", children: [
       title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-semibold md:text-7xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
       subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl font-medium text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle }))
     ] }),
-    renderImages(),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-5xl gap-28 py-28 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        visionTitle && (typeof visionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-5 text-4xl font-semibold", visionTitleClassName), children: visionTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", visionTitleClassName), children: visionTitle })),
-        visionContent && (typeof visionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground whitespace-pre-line", visionContentClassName), children: visionContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: visionContentClassName, children: visionContent }))
+    imagesContent,
+    (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-5xl gap-28 py-28 md:grid-cols-2", children: [
+      hasPrimarySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        primarySectionTitle && (typeof primarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-5 text-4xl font-semibold", primarySectionTitleClassName), children: primarySectionTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", primarySectionTitleClassName), children: primarySectionTitle })),
+        primarySectionContent && (typeof primarySectionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground whitespace-pre-line", primarySectionContentClassName), children: primarySectionContent }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: primarySectionContentClassName, children: primarySectionContent }))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        creatorsTitle && (typeof creatorsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-5 text-4xl font-semibold", creatorsTitleClassName), children: creatorsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", creatorsTitleClassName), children: creatorsTitle })),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground", creatorsContentClassName), children: [
-          creatorsLinkText && creatorsLinkUrl && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: creatorsLinkUrl, className: "mr-1 underline", children: creatorsLinkText }),
-          creatorsContent
+      hasSecondarySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        secondarySectionTitle && (typeof secondarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-5 text-4xl font-semibold", secondarySectionTitleClassName), children: secondarySectionTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", secondarySectionTitleClassName), children: secondarySectionTitle })),
+        (secondarySectionContent || secondarySectionLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("text-xl leading-8 font-medium text-muted-foreground", secondarySectionContentClassName), children: [
+          secondarySectionLinkText && secondarySectionLinkUrl && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: secondarySectionLinkUrl, className: "mr-1 underline", children: secondarySectionLinkText }),
+          secondarySectionContent
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.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: [
+    hasCtaSection && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: cn("text-3xl font-semibold whitespace-pre-line", ctaTitleClassName), children: ctaTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaTitleClassName, children: ctaTitle })),
-      renderCta()
+      ctaContent
     ] })
   ] }) });
 }

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

@@ -4,7 +4,7 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
-interface VisionGalleryImageItem {
+interface GalleryImageItem {
     src: string;
     alt: string;
 }
@@ -36,7 +36,7 @@ interface AboutVisionGalleryProps {
     /**
      * Array of gallery images
      */
-    images?: VisionGalleryImageItem[];
+    images?: GalleryImageItem[];
     /**
      * Custom slot for rendering images (overrides images array)
      */
@@ -46,47 +46,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;
     /**
@@ -110,6 +110,26 @@ interface AboutVisionGalleryProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-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, }: AboutVisionGalleryProps): React.JSX.Element;
 
 export { AboutVisionGallery, type AboutVisionGalleryProps };

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

@@ -4,7 +4,7 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-interface VisionGalleryImageItem {
+interface GalleryImageItem {
     src: string;
     alt: string;
 }
@@ -36,7 +36,7 @@ interface AboutVisionGalleryProps {
     /**
      * Array of gallery images
      */
-    images?: VisionGalleryImageItem[];
+    images?: GalleryImageItem[];
     /**
      * Custom slot for rendering images (overrides images array)
      */
@@ -46,47 +46,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;
     /**
@@ -110,6 +110,26 @@ interface AboutVisionGalleryProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-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, }: 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 { 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));
 }
@@ -438,34 +439,24 @@ 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
 }) {
-  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 +469,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,29 +484,32 @@ Our team is made up of talented individuals who are passionate about creating to
         children: ctaAction.label
       }
     );
-  };
+  }, [ctaSlot, ctaAction]);
+  const hasPrimarySection = primarySectionTitle || primarySectionContent;
+  const hasSecondarySection = secondarySectionTitle || secondarySectionContent || secondarySectionLinkText;
+  const hasCtaSection = ctaTitle || ctaSlot || ctaAction;
   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 || 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 }))
     ] }),
-    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 }))
+    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 }))
       ] }),
-      /* @__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
+      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
         ] })
       ] })
     ] }),
-    /* @__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: [
+    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 })),
-      renderCta()
+      ctaContent
     ] })
   ] }) });
 }

package/dist/alternating-blocks.cjs

@@ -1,15 +1,15 @@
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// lib/utils.ts
+// components/blocks/about/alternating-blocks.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -400,7 +400,7 @@ function AlternatingBlocks({
   sectionContentClassName,
   sectionMediaClassName
 }) {
-  const renderSections = () => {
+  const sectionsContent = React.useMemo(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-12", sectionsClassName), children: sections.map((section, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -424,7 +424,7 @@ function AlternatingBlocks({
       },
       index
     )) });
-  };
+  }, [sectionsSlot, sections, sectionsClassName, sectionItemClassName, sectionContentClassName, sectionMediaClassName]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -438,7 +438,7 @@ function AlternatingBlocks({
           subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
           title && typeof title !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: renderSections() })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
       ]
     }
   );

package/dist/alternating-blocks.js

@@ -1,9 +1,9 @@
+import React, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/about/alternating-blocks.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -394,7 +394,7 @@ function AlternatingBlocks({
   sectionContentClassName,
   sectionMediaClassName
 }) {
-  const renderSections = () => {
+  const sectionsContent = useMemo(() => {
     if (sectionsSlot) return sectionsSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("space-y-12", sectionsClassName), children: sections.map((section, index) => /* @__PURE__ */ jsxs(
@@ -418,7 +418,7 @@ function AlternatingBlocks({
       },
       index
     )) });
-  };
+  }, [sectionsSlot, sections, sectionsClassName, sectionItemClassName, sectionContentClassName, sectionMediaClassName]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -432,7 +432,7 @@ function AlternatingBlocks({
           subtitle && typeof subtitle !== "string" && /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
           title && typeof title !== "string" && /* @__PURE__ */ jsx("div", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
         ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: renderSections() })
+        /* @__PURE__ */ jsx("div", { className: cn("mx-auto w-full max-w-[900px]", contentClassName), children: sectionsContent })
       ]
     }
   );