@opensite/ui 2.3.0 → 2.3.1

package/dist/registry.js

@@ -5,10 +5,10 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { cva } from 'class-variance-authority';
-import { Icon } from '@page-speed/icon';
 import { motion as motion$1, AnimatePresence as AnimatePresence$1 } from 'motion/react';
 import { Slot } from '@radix-ui/react-slot';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Icon } from '@page-speed/icon';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { Form, useForm, Field } from '@page-speed/forms';
@@ -1788,458 +1788,6 @@ function AboutVisionGallery({
     }
   );
 }
-var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
-function AboutDeveloperStory({
-  className,
-  containerClassName,
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  actions,
-  actionsSlot,
-  actionsClassName,
-  logos,
-  logosSlot,
-  logosClassName,
-  stats,
-  statsSlot,
-  statsClassName,
-  storyTitle,
-  storyTitleClassName,
-  storyContent,
-  storyContentClassName,
-  storyImage,
-  storyImageClassName,
-  optixFlowConfig,
-  background,
-  spacing,
-  pattern,
-  patternOpacity
-}) {
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
-        children: actions.map((action, idx) => /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            size: action.size || "lg",
-            variant: action.variant || "default",
-            asButton: true,
-            children: [
-              action.label,
-              idx === 1 && /* @__PURE__ */ jsx(
-                DynamicIcon,
-                {
-                  name: "lucide/arrow-right",
-                  size: 16,
-                  className: "ml-2"
-                }
-              )
-            ]
-          },
-          idx
-        ))
-      }
-    );
-  }, [actionsSlot, actions, actionsClassName]);
-  const logosContent = useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "mt-20 flex flex-wrap items-center justify-center gap-8 opacity-60",
-          logosClassName
-        ),
-        children: logos.map((logo, idx) => {
-          if (typeof logo.src === "string") {
-            return /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: logo.src,
-                alt: logo.alt,
-                className: "h-8 w-auto grayscale",
-                optixFlowConfig
-              },
-              idx
-            );
-          }
-          return /* @__PURE__ */ jsxs("div", { className: "h-8", children: [
-            /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: logo.src.light,
-                alt: logo.alt,
-                className: "h-42 w-auto object-contain grayscale dark:hidden",
-                optixFlowConfig
-              }
-            ),
-            logo.src.dark && /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: logo.src.dark,
-                alt: logo.alt,
-                className: "hidden h-42 w-auto object-contain grayscale dark:block",
-                optixFlowConfig
-              }
-            )
-          ] }, idx);
-        })
-      }
-    );
-  }, [logosSlot, logos, logosClassName, optixFlowConfig]);
-  const statsContent = useMemo(() => {
-    if (statsSlot) return statsSlot;
-    if (!stats || stats.length === 0) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "mt-20 grid grid-cols-1 gap-8 border-y py-12 md:grid-cols-3",
-          statsClassName
-        ),
-        children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-          stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-4xl font-bold", children: stat.value }) : stat.value),
-          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2", getTextColor(background, "muted")), children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.label }))
-        ] }, idx))
-      }
-    );
-  }, [statsSlot, stats, statsClassName]);
-  return /* @__PURE__ */ jsxs(
-    Section,
-    {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn(className),
-      containerClassName,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-6xl text-balance",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "max-w-2xl text-lg md:text-xl text-balance",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          actionsContent
-        ] }),
-        logosContent,
-        statsContent,
-        /* @__PURE__ */ jsxs("div", { className: "mt-20 grid gap-12 md:grid-cols-2 md:items-center", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            storyTitle && (typeof storyTitle === "string" ? /* @__PURE__ */ jsx(
-              "h2",
-              {
-                className: cn(
-                  "text-3xl font-bold md:text-4xl",
-                  storyTitleClassName
-                ),
-                children: storyTitle
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: storyTitleClassName, children: storyTitle })),
-            storyContent && (typeof storyContent === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "mt-6 text-lg whitespace-pre-line",
-                  getTextColor(background, "muted"),
-                  storyContentClassName
-                ),
-                children: storyContent
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", storyContentClassName), children: storyContent }))
-          ] }),
-          storyImage && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: storyImage.src,
-              alt: storyImage.alt,
-              className: cn(
-                "rounded-2xl object-cover w-full h-auto",
-                storyImageClassName
-              ),
-              optixFlowConfig
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function AboutStoryGallery({
-  className,
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  images,
-  imagesSlot,
-  imagesClassName,
-  optixFlowConfig,
-  background,
-  spacing = "py-8 md:py-32",
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  pattern,
-  patternOpacity
-}) {
-  const imagesContent = useMemo(() => {
-    if (imagesSlot) return imagesSlot;
-    if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "mt-7 md:mt-16 grid gap-4 md:grid-cols-3",
-          imagesClassName
-        ),
-        children: images.map((image, idx) => /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: image.src,
-            alt: image.alt,
-            className: cn(
-              "h-64 w-full rounded-xl object-cover",
-              image.className
-            ),
-            optixFlowConfig
-          },
-          idx
-        ))
-      }
-    );
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
-    Section,
-    {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className,
-      containerClassName,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center", children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl text-balance",
-                titleClassName
-              ),
-              children: title
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mt-6 text-lg whitespace-pre-line text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
-        ] }),
-        imagesContent
-      ]
-    }
-  );
-}
-function AboutStreamlineTeam({
-  className,
-  containerClassName,
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  primaryImage,
-  primaryImageClassName,
-  secondaryImage,
-  secondaryImageClassName,
-  teamTitle,
-  teamTitleClassName,
-  teamDescription,
-  teamDescriptionClassName,
-  actions,
-  actionsSlot,
-  actionsClassName,
-  features,
-  featuresSlot,
-  featuresClassName,
-  teamSectionClassName,
-  optixFlowConfig,
-  background,
-  spacing,
-  pattern,
-  patternOpacity
-}) {
-  const featuresContent = useMemo(() => {
-    if (featuresSlot) return featuresSlot;
-    if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-10 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
-            feature.iconBgClass
-          ),
-          children: feature.icon
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { children: [
-        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
-        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description }) : feature.description)
-      ] })
-    ] }, idx)) });
-  }, [featuresSlot, features, featuresClassName, background]);
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-8", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        size: action.size || "lg",
-        variant: action.variant || "default",
-        asButton: true,
-        children: [
-          action.label,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
-        ]
-      },
-      idx
-    )) });
-  }, [actionsSlot, actions, actionsClassName]);
-  return /* @__PURE__ */ jsxs(
-    Section,
-    {
-      background,
-      spacing,
-      pattern,
-      patternOpacity,
-      className: cn(className),
-      containerClassName,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-2 lg:items-center", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-            primaryImage && /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: primaryImage.src,
-                alt: primaryImage.alt,
-                className: cn(
-                  "rounded-2xl object-cover w-auto h-full",
-                  primaryImageClassName
-                ),
-                optixFlowConfig
-              }
-            ),
-            secondaryImage && /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: secondaryImage.src,
-                alt: secondaryImage.alt,
-                className: cn(
-                  "absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg",
-                  secondaryImageClassName
-                ),
-                optixFlowConfig
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            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 })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "mt-6 text-lg",
-                  getTextColor(background, "muted"),
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
-            featuresContent
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "mt-6 md:mt-32 rounded-2xl p-8 md:p-16",
-              getNestedCardBg(background),
-              getNestedCardTextColor(background),
-              teamSectionClassName
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
-              teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-3xl font-bold md:text-4xl",
-                    teamTitleClassName
-                  ),
-                  children: teamTitle
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: teamTitleClassName, children: teamTitle })),
-              teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "mt-4 text-lg",
-                    getTextColor(background, "muted"),
-                    teamDescriptionClassName
-                  ),
-                  children: teamDescription
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
-              actionsContent
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
 var slideVariants = {
   initial: {
     scale: 0.98,
@@ -2551,6 +2099,10 @@ function PopoverContent({
     }
   ) });
 }
+var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
+function DynamicIcon({ apiKey, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+}
 var BUTTON_SIZES = {
   sm: { buttonSize: "size-8", iconSize: 16 },
   md: { buttonSize: "size-10", iconSize: 20 },
@@ -3071,7 +2623,7 @@ function AboutExpandableValues({
   actions,
   actionsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -3082,7 +2634,7 @@ function AboutExpandableValues({
   ctaDescriptionClassName,
   actionsClassName,
   background,
-  spacing,
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
@@ -3090,7 +2642,7 @@ function AboutExpandableValues({
   const toggleExpand = useCallback((id) => {
     setExpandedValue((prev) => prev === id ? null : id);
   }, []);
-  const actionsContent = useMemo(() => {
+  useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actions.map((action, idx) => /* @__PURE__ */ jsx(
@@ -3113,10 +2665,8 @@ function AboutExpandableValues({
       "div",
       {
         className: cn(
-          "group overflow-hidden rounded-xl border transition-all duration-300",
-          getNestedCardBg(background, "card"),
-          getNestedCardTextColor(background),
-          expandedValue === value.id ? "col-span-1 shadow-lg md:col-span-2 lg:col-span-3" : ""
+          "group overflow-hidden rounded-xl border transition-all duration-300 col-span-1",
+          expandedValue === value.id ? "shadow-xl" : "shadow-md"
         ),
         children: [
           /* @__PURE__ */ jsxs(
@@ -3127,10 +2677,10 @@ function AboutExpandableValues({
               type: "button",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
-                  /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-primary/10 p-3", children: value.icon }),
+                  /* @__PURE__ */ jsx("div", { className: "shrink-0 size-12 flex items-center justify-center rounded-md bg-primary text-primary-foreground shadow-lg", children: value.icon }),
                   /* @__PURE__ */ jsxs("div", { children: [
                     value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: value.title }) : value.title),
-                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: value.shortDescription }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: value.shortDescription }))
+                    value.shortDescription && (typeof value.shortDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm"), children: value.shortDescription }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: value.shortDescription }))
                   ] })
                 ] }),
                 /* @__PURE__ */ jsx(
@@ -3140,7 +2690,6 @@ function AboutExpandableValues({
                     size: 20,
                     className: cn(
                       "mt-1 shrink-0 transition-transform duration-300",
-                      getTextColor(background, "muted"),
                       expandedValue === value.id ? "rotate-180" : ""
                     )
                   }
@@ -3149,21 +2698,28 @@ function AboutExpandableValues({
             }
           ),
           expandedValue === value.id && /* @__PURE__ */ jsxs("div", { className: "space-y-6 px-6 pb-6", children: [
-            value.longDescription && /* @__PURE__ */ jsx("div", { className: cn(
-              "rounded-lg p-4",
-              getNestedCardBg(background, "subtle")
-            ), children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsx("p", { className: getTextColor(background, "muted"), children: value.longDescription }) : value.longDescription }),
+            value.longDescription && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "rounded-lg p-4 shadow-md",
+                  "bg-muted text-muted-foreground"
+                ),
+                children: typeof value.longDescription === "string" ? /* @__PURE__ */ jsx("p", { className: "relative", children: value.longDescription }) : value.longDescription
+              }
+            ),
             value.examples && value.examples.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h4", { className: cn("mb-2 text-sm font-semibold", getTextColor(background, "muted")), children: "How we put this into practice:" }),
+              /* @__PURE__ */ jsx("h4", { className: cn("mb-2 text-sm font-semibold"), children: "How we put this into practice:" }),
               /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: value.examples.map((example, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
-                /* @__PURE__ */ jsx("div", { className: cn("mt-1 flex size-5 shrink-0 items-center justify-center rounded-full", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
-                  DynamicIcon,
+                /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    name: "lucide/check",
-                    size: 12,
-                    className: getAccentColor(background)
+                    className: cn(
+                      "mt-1 flex size-5 shrink-0 items-center justify-center rounded-full"
+                    ),
+                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 12 })
                   }
-                ) }),
+                ),
                 typeof example === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm pt-2", children: example }) : example
               ] }, index)) })
             ] })
@@ -3180,7 +2736,7 @@ function AboutExpandableValues({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs(
@@ -3191,18 +2747,7 @@ function AboutExpandableValues({
               headerClassName
             ),
             children: [
-              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "inline-block rounded-lg px-3 py-1 text-sm",
-                    getNestedCardBg(background, "muted"),
-                    getAccentColor(background),
-                    badgeClassName
-                  ),
-                  children: badgeText
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badgeText })),
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("px-3", badgeClassName), children: badgeText }) : badgeText),
               heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
                 "h2",
                 {
@@ -3212,18 +2757,8 @@ function AboutExpandableValues({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-balance",
-                    getTextColor(background, "muted"),
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
             ]
           }
         ),
@@ -3232,21 +2767,20 @@ function AboutExpandableValues({
           "div",
           {
             className: cn(
-              "relative mt-8 rounded-lg p-8",
-              getNestedCardBg(background, "accent"),
-              getNestedCardTextColor(background),
+              "relative mt-8 rounded-lg p-8 bg-muted text-muted-foreground",
               ctaClassName
             ),
-            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center", children: [
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsx("div", { className: ctaHeadingClassName, children: ctaHeading })),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
-                "p",
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl space-y-6 text-center flex flex-col items-center gap-6", children: [
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn(ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
+              /* @__PURE__ */ jsx(
+                BlockActions,
                 {
-                  className: cn(getTextColor(background, "muted"), ctaDescriptionClassName),
-                  children: ctaDescription
+                  actions,
+                  actionsSlot,
+                  actionsClassName
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: ctaDescriptionClassName, children: ctaDescription })),
-              actionsContent
+              )
             ] })
           }
         )
@@ -7920,6 +7454,442 @@ function ActionComponent({ action }) {
     }
   );
 }
+function AboutDeveloperStory({
+  className,
+  title,
+  titleClassName,
+  description,
+  descriptionClassName,
+  actions,
+  actionsSlot,
+  actionsClassName,
+  logos,
+  logosSlot,
+  logosClassName,
+  stats,
+  statsSlot,
+  statsClassName,
+  storyTitle,
+  storyTitleClassName,
+  storyContent,
+  storyContentClassName,
+  storyImage,
+  storyImageClassName,
+  optixFlowConfig,
+  background,
+  spacing = "xl",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  pattern,
+  patternOpacity
+}) {
+  const logosContent = useMemo(() => {
+    if (logosSlot) return logosSlot;
+    if (!logos || logos.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-20 flex flex-wrap items-center justify-center gap-8 opacity-60",
+          logosClassName
+        ),
+        children: logos.map((logo, idx) => {
+          if (typeof logo.src === "string") {
+            return /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: logo.src,
+                alt: logo.alt,
+                className: "h-8 w-auto grayscale",
+                optixFlowConfig
+              },
+              idx
+            );
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "h-8", children: [
+            /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: logo.src.light,
+                alt: logo.alt,
+                className: "h-42 w-auto object-contain grayscale dark:hidden",
+                optixFlowConfig
+              }
+            ),
+            logo.src.dark && /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: logo.src.dark,
+                alt: logo.alt,
+                className: "hidden h-42 w-auto object-contain grayscale dark:block",
+                optixFlowConfig
+              }
+            )
+          ] }, idx);
+        })
+      }
+    );
+  }, [logosSlot, logos, logosClassName, optixFlowConfig]);
+  const statsContent = useMemo(() => {
+    if (statsSlot) return statsSlot;
+    if (!stats || stats.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-20 grid grid-cols-1 gap-8 border-y py-12 md:grid-cols-3",
+          statsClassName
+        ),
+        children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+          stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-4xl font-bold", children: stat.value }) : stat.value),
+          stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2", children: stat.label }) : stat.label)
+        ] }, idx))
+      }
+    );
+  }, [statsSlot, stats, statsClassName]);
+  const contentItems = useMemo(() => {
+    const items = [];
+    if (title) {
+      if (typeof title === "string") {
+        items.push({
+          _type: "text",
+          as: "h1",
+          className: cn(
+            "text-4xl font-bold tracking-tight md:text-6xl text-balance",
+            title
+          ),
+          children: title
+        });
+      } else {
+        items.push(title);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "max-w-2xl text-lg md:text-xl text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [title, titleClassName, description, descriptionClassName]);
+  return /* @__PURE__ */ jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
+          /* @__PURE__ */ jsx(ContentGroup, { items: contentItems }),
+          /* @__PURE__ */ jsx(
+            BlockActions,
+            {
+              actions,
+              actionsSlot,
+              actionsClassName
+            }
+          )
+        ] }),
+        logosContent,
+        statsContent,
+        /* @__PURE__ */ jsxs("div", { className: "mt-20 grid gap-12 md:grid-cols-2 md:items-center", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            storyTitle && (typeof storyTitle === "string" ? /* @__PURE__ */ jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-3xl font-bold md:text-4xl",
+                  storyTitleClassName
+                ),
+                children: storyTitle
+              }
+            ) : storyTitle),
+            storyContent && (typeof storyContent === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-6 text-lg whitespace-pre-line",
+                  storyContentClassName
+                ),
+                children: storyContent
+              }
+            ) : storyContent)
+          ] }),
+          storyImage && /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: storyImage.src,
+              alt: storyImage.alt,
+              className: cn(
+                "rounded-2xl object-cover w-full h-auto",
+                storyImageClassName
+              ),
+              optixFlowConfig
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function AboutStoryGallery({
+  className,
+  title,
+  titleClassName,
+  description,
+  descriptionClassName,
+  images,
+  imagesSlot,
+  imagesClassName,
+  optixFlowConfig,
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  pattern,
+  patternOpacity
+}) {
+  const imagesContent = useMemo(() => {
+    if (imagesSlot) return imagesSlot;
+    if (!images || images.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-7 md:mt-16 grid gap-4 md:grid-cols-3",
+          imagesClassName
+        ),
+        children: images.map((image, idx) => /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: cn(
+              "h-64 w-full rounded-xl object-cover",
+              image.className
+            ),
+            optixFlowConfig
+          },
+          idx
+        ))
+      }
+    );
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+  return /* @__PURE__ */ jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl text-center", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "text-4xl font-bold tracking-tight md:text-5xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-6 text-lg whitespace-pre-line text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
+        ] }),
+        imagesContent
+      ]
+    }
+  );
+}
+function AboutStreamlineTeam({
+  className,
+  containerClassName,
+  title,
+  titleClassName,
+  description,
+  descriptionClassName,
+  primaryImage,
+  primaryImageClassName,
+  secondaryImage,
+  secondaryImageClassName,
+  teamTitle,
+  teamTitleClassName,
+  teamDescription,
+  teamDescriptionClassName,
+  actions,
+  actionsSlot,
+  actionsClassName,
+  features,
+  featuresSlot,
+  featuresClassName,
+  teamSectionClassName,
+  optixFlowConfig,
+  background,
+  spacing,
+  pattern,
+  patternOpacity
+}) {
+  const featuresContent = useMemo(() => {
+    if (featuresSlot) return featuresSlot;
+    if (!features || features.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: cn("mt-10 space-y-6", featuresClassName), children: features.map((feature, idx) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
+            feature.iconBgClass
+          ),
+          children: feature.icon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
+        feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: feature.description }) : feature.description)
+      ] })
+    ] }, idx)) });
+  }, [featuresSlot, features, featuresClassName, background]);
+  const actionsContent = useMemo(() => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: cn("mt-8", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        href: action.href,
+        onClick: action.onClick,
+        size: action.size || "lg",
+        variant: action.variant || "default",
+        asButton: true,
+        children: [
+          action.label,
+          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
+        ]
+      },
+      idx
+    )) });
+  }, [actionsSlot, actions, actionsClassName]);
+  return /* @__PURE__ */ jsxs(
+    Section,
+    {
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn(className),
+      containerClassName,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-12 lg:grid-cols-2 lg:items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            primaryImage && /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: primaryImage.src,
+                alt: primaryImage.alt,
+                className: cn(
+                  "rounded-2xl object-cover w-auto h-full",
+                  primaryImageClassName
+                ),
+                optixFlowConfig
+              }
+            ),
+            secondaryImage && /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: secondaryImage.src,
+                alt: secondaryImage.alt,
+                className: cn(
+                  "absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg",
+                  secondaryImageClassName
+                ),
+                optixFlowConfig
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            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 })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-6 text-lg",
+                  getTextColor(background, "muted"),
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+            featuresContent
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-6 md:mt-32 rounded-2xl p-8 md:p-16",
+              getNestedCardBg(background),
+              getNestedCardTextColor(background),
+              teamSectionClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
+              teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold md:text-4xl",
+                    teamTitleClassName
+                  ),
+                  children: teamTitle
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: teamTitleClassName, children: teamTitle })),
+              teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg",
+                    getTextColor(background, "muted"),
+                    teamDescriptionClassName
+                  ),
+                  children: teamDescription
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
+              actionsContent
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
 function AboutDeveloperProfile({
   name,
   role,
@@ -8535,7 +8505,6 @@ function AboutInteractiveTabs({
   tabs,
   tabsSlot,
   className,
-  containerClassName,
   headerClassName,
   titleClassName,
   subtitleClassName,
@@ -8548,7 +8517,8 @@ function AboutInteractiveTabs({
   tabContentImageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -8575,15 +8545,15 @@ function AboutInteractiveTabs({
             {
               onClick: () => handleTabChange(tab.id),
               className: cn(
-                "flex-shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
+                "shrink-0 whitespace-nowrap px-6 py-3 text-sm font-medium transition-colors",
                 activeTab === tab.id ? cn(
-                  "border-b-2",
-                  getBorderColor(background, "accent"),
-                  getAccentColor(background),
+                  "border-b-2 border-primary",
+                  "bg-primary text-primary-foreground",
                   activeTabClassName
                 ) : cn(
-                  getTextColor(background, "muted"),
-                  `hover:${getAccentColor(background)}`
+                  "border-b-2 border-muted",
+                  "bg-muted text-muted-foreground",
+                  "hover:bg-primary hover:text-primary-foreground hover:border-primary"
                 ),
                 tabButtonClassName
               ),
@@ -8612,11 +8582,7 @@ function AboutInteractiveTabs({
               typeof activeContent.description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
-                  className: cn(
-                    "mt-4 text-lg",
-                    getTextColor(background, "muted"),
-                    tabContentDescriptionClassName
-                  ),
+                  className: cn("mt-4 text-lg", tabContentDescriptionClassName),
                   children: activeContent.description
                 }
               ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", tabContentDescriptionClassName), children: activeContent.description })
@@ -8659,7 +8625,7 @@ function AboutInteractiveTabs({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
@@ -8672,18 +8638,8 @@ function AboutInteractiveTabs({
               ),
               children: title
             }
-          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mt-4 text-lg text-balance",
-                getTextColor(background, "muted"),
-                subtitleClassName
-              ),
-              children: subtitle
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
+          ) : title),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-balance", subtitleClassName), children: subtitle }) : subtitle)
         ] }),
         (tabsSlot || tabs && tabs.length > 0) && tabsContent
       ]
@@ -18908,7 +18864,7 @@ function ContactHelpCenter({
   patternOpacity,
   className,
   contactItemsSlot,
-  spacing = "py-16 md:py-322",
+  spacing = "py-16 md:py-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   leftColumnClassName,
@@ -51947,34 +51903,6 @@ function HeroPresentationPlatformVideo({
     }
     return items;
   }, [subtitle, heading, headingClassName, description, descriptionClassName]);
-  useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 font-medium md:flex-row", children: actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
-  }, [actionsSlot, actions]);
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
     return /* @__PURE__ */ jsx(
@@ -98332,8 +98260,8 @@ function LinkTreeBlock({
           {
             className: cn(
               "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "border border-border bg-card text-card-foreground hover:bg-accent",
+              "border border-border",
+              isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground",
               linkClassName,
               isFeatured ? featuredLinkClassName : null,
               linkItemClassName
@@ -98349,8 +98277,8 @@ function LinkTreeBlock({
         {
           className: cn(
             "group relative flex w-full items-center gap-3 rounded-xl px-4 py-3.5 transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "border border-border bg-card text-card-foreground hover:bg-accent",
+            "border border-border",
+            isFeatured ? "bg-primary text-primary-foreground shadow-lg hover:bg-primary/90" : "bg-card text-card-foreground hover:bg-primary hover:text-primary-foreground",
             linkClassName,
             isFeatured ? featuredLinkClassName : null,
             linkItemClassName
@@ -98368,18 +98296,17 @@ function LinkTreeBlock({
                   ),
                   children: label
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: linkLabelClassName, children: label })),
+              ) : label),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn(
                     "mt-0.5 block truncate text-xs",
-                    isFeatured ? "text-primary-foreground" : "",
                     linkDescriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: linkDescriptionClassName, children: description }))
+              ) : description)
             ] }),
             link.badge && /* @__PURE__ */ jsx(
               Badge,
@@ -98432,7 +98359,7 @@ function LinkTreeBlock({
           ),
           children: mediaGalleryTitle
         }
-      ) : /* @__PURE__ */ jsx("div", { className: mediaGalleryTitleClassName, children: mediaGalleryTitle })),
+      ) : mediaGalleryTitle),
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -98442,7 +98369,6 @@ function LinkTreeBlock({
             {
               className: cn(
                 "group relative aspect-square overflow-hidden rounded-lg cursor-pointer",
-                "transition-all duration-200 hover:scale-[1.02]",
                 "ring-1",
                 mediaGalleryItemClassName,
                 item.className
@@ -98483,7 +98409,7 @@ function LinkTreeBlock({
                     src: item.src,
                     alt: item.alt || "",
                     className: cn(
-                      "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                      "h-full w-full object-cover transition-transform duration-300",
                       mediaGalleryMediaClassName,
                       item.mediaClassName
                     ),
@@ -98494,7 +98420,7 @@ function LinkTreeBlock({
                   "div",
                   {
                     className: cn(
-                      "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-200 group-hover:bg-black/20",
+                      "absolute inset-0 flex items-center justify-center bg-black/0 transition-colors duration-200",
                       mediaGalleryOverlayClassName
                     ),
                     children: item.type === "video" && /* @__PURE__ */ jsx(
@@ -98560,7 +98486,6 @@ function LinkTreeBlock({
               "aria-label": ariaLabel,
               className: cn(
                 "flex h-12 w-12 items-center justify-center rounded-full p-2.5 transition-all duration-200",
-                "hover:scale-110 active:scale-95",
                 socialLinkClassName,
                 social.className
               ),
@@ -98761,8 +98686,9 @@ function LinkPageMinimalProfile({
           Pressable,
           {
             className: cn(
-              "flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-colors",
-              "hover:opacity-80",
+              "flex w-full items-center gap-3 rounded-lg px-4 py-3",
+              "bg-card text-card-foreground border shadow-lg",
+              "transition-all duration-500 hover:opacity-80",
               linkClassName,
               linkItemClassName
             ),
@@ -98908,7 +98834,7 @@ function LinkPageMinimalProfile({
   );
 }
 var DEFAULT_STYLE_RULES43 = {
-  formContainer: "w-full flex flex-col gap-3",
+  formContainer: "w-full flex flex-col gap-3 justify-center items-center",
   fieldsContainer: "",
   fieldClassName: "",
   formClassName: ""
@@ -99267,15 +99193,11 @@ function LinkPageNewsletterSocial({
     }
   );
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar4: "https://cdn.ing/assets/i/r/286242/y0zkazxawxrl3twwkw63twf04pdt/avatar-4.webp"};
 function LinkPageGridCards({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar4,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -99285,7 +99207,6 @@ function LinkPageGridCards({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -99301,20 +99222,20 @@ function LinkPageGridCards({
   cardLabelClassName,
   cardDescriptionClassName,
   footerClassName,
-  background = "gray",
-  spacing,
+  background,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   optixFlowConfig
 }) {
-  const resolvedBackground = background;
-  const resolvedAvatar = avatar || (avatarUrl ? {
-    src: avatarUrl,
-    alt: typeof name === "string" ? name : "Profile avatar"
-  } : void 0);
   const renderProfile = useMemo(() => {
     if (profileSlot) return profileSlot;
+    const resolvedAvatar = avatar || (avatarUrl ? {
+      src: avatarUrl,
+      alt: typeof name === "string" ? name : "Profile avatar"
+    } : void 0);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -99327,7 +99248,7 @@ function LinkPageGridCards({
             "div",
             {
               className: cn(
-                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-200",
+                "h-20 w-20 overflow-hidden rounded-2xl shadow-lg ring-2 ring-primary",
                 avatarClassName
               ),
               children: /* @__PURE__ */ jsx(
@@ -99342,32 +99263,24 @@ function LinkPageGridCards({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsx(
-              "h1",
-              {
-                className: cn(
-                  "text-2xl font-bold",
-                  nameClassName
-                ),
-                children: name
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }))
+            name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-2xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm", bioClassName), children: bio }) : bio)
           ] })
         ]
       }
     );
-  }, [profileSlot, resolvedAvatar, resolvedBackground, avatarClassName, optixFlowConfig, name, nameClassName, bio, bioClassName, headerClassName]);
+  }, [
+    profileSlot,
+    avatar,
+    avatarUrl,
+    avatarClassName,
+    optixFlowConfig,
+    name,
+    nameClassName,
+    bio,
+    bioClassName,
+    headerClassName
+  ]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
@@ -99396,9 +99309,8 @@ function LinkPageGridCards({
               "aria-label": ariaLabel,
               className: cn(
                 "rounded-lg p-2 transition-all duration-200",
-                "hover:scale-110 active:scale-95",
-                "bg-card hover:opacity-80",
-                getTextColor(resolvedBackground, "muted"),
+                "bg-card text-card-foreground hover:opacity-80",
+                "size-12 flex items-center justify-center",
                 socialLinkClassName,
                 social.className
               ),
@@ -99409,7 +99321,13 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [socialLinksSlot, socialLinks, socialLinksClassName, socialIconClassName, resolvedBackground, socialLinkClassName]);
+  }, [
+    socialLinksSlot,
+    socialLinks,
+    socialLinksClassName,
+    socialIconClassName,
+    socialLinkClassName
+  ]);
   const renderLinks = useMemo(() => {
     if (linksSlot) return linksSlot;
     if (!links || links.length === 0) return null;
@@ -99444,9 +99362,10 @@ function LinkPageGridCards({
               Pressable,
               {
                 className: cn(
-                  "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
-                  "hover:scale-[1.03] active:scale-[0.97]",
-                  "border border-border bg-card shadow-sm hover:shadow-md",
+                  "group flex flex-col items-center gap-2 rounded-xl p-4",
+                  "transition-all duration-200 shadow-md",
+                  "border border-border hover:shadow-xl",
+                  "text-card-foreground bg-card",
                   cardClassName,
                   linkClassName
                 ),
@@ -99460,8 +99379,9 @@ function LinkPageGridCards({
             Pressable,
             {
               className: cn(
-                "group flex flex-col items-center gap-2 rounded-xl p-4 transition-all duration-200",
+                "group flex flex-col items-center gap-2 rounded-xl",
                 "hover:scale-[1.03] active:scale-[0.97]",
+                "transition-all duration-200 p-4",
                 "border border-border bg-card shadow-sm hover:shadow-md",
                 cardClassName,
                 linkClassName
@@ -99472,9 +99392,8 @@ function LinkPageGridCards({
                   "div",
                   {
                     className: cn(
-                      "flex h-12 w-12 items-center justify-center rounded-xl transition-colors",
-                      getNestedCardBg(resolvedBackground),
-                      getNestedCardTextColor(resolvedBackground),
+                      "flex size-12 items-center justify-center",
+                      "rounded-xl transition-colors",
                       "group-hover:opacity-80",
                       cardIconWrapperClassName
                     ),
@@ -99491,18 +99410,14 @@ function LinkPageGridCards({
                       ),
                       children: label
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cardLabelClassName, children: label })),
+                  ) : label),
                   description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: cn(
-                        "block text-xs",
-                        getTextColor(resolvedBackground, "muted"),
-                        cardDescriptionClassName
-                      ),
+                      className: cn("block text-sm", cardDescriptionClassName),
                       children: description
                     }
-                  ) : /* @__PURE__ */ jsx("div", { className: cardDescriptionClassName, children: description }))
+                  ) : description)
                 ] })
               ]
             },
@@ -99511,7 +99426,17 @@ function LinkPageGridCards({
         })
       }
     );
-  }, [linksSlot, links, columns, gridClassName, cardIconClassName, resolvedBackground, cardClassName, cardIconWrapperClassName, cardLabelClassName, cardDescriptionClassName]);
+  }, [
+    linksSlot,
+    links,
+    columns,
+    gridClassName,
+    cardIconClassName,
+    cardClassName,
+    cardIconWrapperClassName,
+    cardLabelClassName,
+    cardDescriptionClassName
+  ]);
   const renderFooter = useMemo(() => {
     if (footerSlot) return footerSlot;
     if (!footerAction) return null;
@@ -99529,9 +99454,9 @@ function LinkPageGridCards({
       Pressable,
       {
         className: cn(
-          "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
-          "opacity-50",
+          "flex items-center justify-center",
+          "text-xs transition-opacity hover:opacity-80",
+          "opacity-50 gap-1.5",
           footerClassName,
           actionClassName
         ),
@@ -99543,11 +99468,11 @@ function LinkPageGridCards({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
@@ -99963,7 +99888,7 @@ function LinkPageBentoLayout({
       patternOpacity,
       patternClassName,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-lg space-y-6", contentClassName), children: [
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-6", contentClassName), children: [
         renderProfile,
         renderLinks,
         /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })