@opensite/ui 2.2.9 → 2.3.1

package/dist/link-page-bento-layout.cjs

@@ -33,62 +33,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -511,10 +455,6 @@ var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar5: "https://cdn.ing/assets/i/r/286243/alziyfoo570m3vade3usufzlzj6x/avatar-5.webp"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -894,7 +834,7 @@ function LinkPageBentoLayout({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar5,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -905,7 +845,6 @@ function LinkPageBentoLayout({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -928,14 +867,14 @@ function LinkPageBentoLayout({
   regularLinkIconClassName,
   regularLinkLabelClassName,
   footerClassName,
-  background = "white",
-  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"
@@ -964,7 +903,6 @@ function LinkPageBentoLayout({
           className: cn(
             "rounded-full p-2 transition-all duration-200",
             "hover:scale-110 active:scale-95",
-            getTextColor(resolvedBackground, "muted"),
             "hover:opacity-80",
             socialLinkClassName,
             social.className
@@ -979,7 +917,6 @@ function LinkPageBentoLayout({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
   const renderFeaturedLinks = React.useMemo(() => {
@@ -1012,9 +949,7 @@ function LinkPageBentoLayout({
           Pressable,
           {
             className: cn(
-              "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              "border border-border bg-muted",
+              "group relative aspect-4/3 overflow-hidden rounded-xl",
               featuredLinkClassName,
               linkClassName
             ),
@@ -1028,9 +963,7 @@ function LinkPageBentoLayout({
         Pressable,
         {
           className: cn(
-            "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-muted",
+            "group relative aspect-4/3 overflow-hidden rounded-xl",
             featuredLinkClassName,
             linkClassName
           ),
@@ -1042,7 +975,7 @@ function LinkPageBentoLayout({
                 src: imageSource,
                 alt: imageAlt,
                 className: cn(
-                  "absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                  "absolute inset-0 h-full w-full object-cover",
                   featuredLinkImageClassName
                 ),
                 optixFlowConfig
@@ -1053,7 +986,7 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "absolute inset-0 transition-opacity",
-                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent" : "bg-linear-to-t from-neutral-200/50 to-transparent",
+                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent text-white" : "bg-primary text-primary-foreground",
                   featuredLinkOverlayClassName
                 )
               }
@@ -1066,7 +999,6 @@ function LinkPageBentoLayout({
                   {
                     className: cn(
                       "text-sm font-semibold",
-                      imageSource && "text-background",
                       featuredLinkLabelClassName
                     ),
                     children: label
@@ -1078,12 +1010,11 @@ function LinkPageBentoLayout({
                 {
                   className: cn(
                     "mt-0.5 text-xs",
-                    imageSource ? "text-background/70" : getTextColor(resolvedBackground, "muted"),
                     featuredLinkDescriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: featuredLinkDescriptionClassName, children: description }))
+              ) : description)
             ] })
           ]
         },
@@ -1093,7 +1024,6 @@ function LinkPageBentoLayout({
   }, [
     featuredLinksSlot,
     featuredLinks,
-    resolvedBackground,
     featuredLinkClassName,
     featuredLinkImageClassName,
     optixFlowConfig,
@@ -1127,9 +1057,7 @@ function LinkPageBentoLayout({
           Pressable,
           {
             className: cn(
-              "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              "border border-border bg-muted/50 hover:opacity-80",
+              "group flex items-center gap-3 rounded-xl p-3",
               regularLinkClassName,
               linkClassName
             ),
@@ -1143,9 +1071,8 @@ function LinkPageBentoLayout({
         Pressable,
         {
           className: cn(
-            "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-muted/50 hover:opacity-80",
+            "group flex items-center gap-3 rounded-xl p-3",
+            "bg-card text-card-foreground",
             regularLinkClassName,
             linkClassName
           ),
@@ -1156,8 +1083,6 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg",
-                  getNestedCardBg(resolvedBackground, "card"),
-                  getNestedCardTextColor(resolvedBackground),
                   regularLinkIconWrapperClassName
                 ),
                 children: iconElement
@@ -1181,7 +1106,6 @@ function LinkPageBentoLayout({
   }, [
     regularLinksSlot,
     regularLinks,
-    resolvedBackground,
     regularLinkClassName,
     regularLinkIconWrapperClassName,
     regularLinkIconClassName,
@@ -1193,8 +1117,8 @@ function LinkPageBentoLayout({
     const hasFeatured = Boolean(featuredLinksSlot) || featuredLinks.length > 0;
     const hasRegular = Boolean(regularLinksSlot) || regularLinks.length > 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-3", linksClassName), children: [
-      hasFeatured && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
-      hasRegular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-2 gap-3", regularLinksClassName), children: renderRegularLinks })
+      hasFeatured && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
+      hasRegular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid grid-cols-1 gap-3", regularLinksClassName), children: renderRegularLinks })
     ] });
   }, [
     linksSlot,
@@ -1238,18 +1162,8 @@ function LinkPageBentoLayout({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "max-w-xs text-sm",
-                  getTextColor(resolvedBackground, "muted"),
-                  bioClassName
-                ),
-                children: bio
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }))
+            name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : name),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xs text-sm", bioClassName), children: bio }) : bio)
           ] }),
           renderSocialLinks
         ]
@@ -1258,7 +1172,6 @@ function LinkPageBentoLayout({
   }, [
     profileSlot,
     resolvedAvatar,
-    resolvedBackground,
     avatarClassName,
     optixFlowConfig,
     name,
@@ -1286,7 +1199,6 @@ function LinkPageBentoLayout({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
           "opacity-50",
           footerClassName,
           actionClassName
@@ -1299,30 +1211,22 @@ function LinkPageBentoLayout({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
       patternOpacity,
       patternClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "flex min-h-screen w-full items-start justify-center py-12",
-            containerClassName
-          ),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-lg space-y-6", contentClassName), children: [
-            renderProfile,
-            renderLinks,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
-          ] })
-        }
-      )
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full space-y-6", contentClassName), children: [
+        renderProfile,
+        renderLinks,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
+      ] }) })
     }
   );
 }

package/dist/link-page-bento-layout.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -234,6 +234,6 @@ interface LinkPageBentoLayoutProps {
  * />
  * ```
  */
-declare function LinkPageBentoLayout({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, featuredLinksSlot, regularLinksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, linksClassName, featuredLinksClassName, featuredLinkClassName, featuredLinkOverlayClassName, featuredLinkImageClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName, regularLinksClassName, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageBentoLayoutProps): React.JSX.Element;
+declare function LinkPageBentoLayout({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, featuredLinksSlot, regularLinksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, linksClassName, featuredLinksClassName, featuredLinkClassName, featuredLinkOverlayClassName, featuredLinkImageClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName, regularLinksClassName, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageBentoLayoutProps): React.JSX.Element;
 
 export { type BentoLink, type BentoSocialLink, LinkPageBentoLayout, type LinkPageBentoLayoutProps };

package/dist/link-page-bento-layout.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { I as ImageItem, A as ActionConfig, a as SocialLinkItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**
@@ -234,6 +234,6 @@ interface LinkPageBentoLayoutProps {
  * />
  * ```
  */
-declare function LinkPageBentoLayout({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, featuredLinksSlot, regularLinksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, containerClassName, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, linksClassName, featuredLinksClassName, featuredLinkClassName, featuredLinkOverlayClassName, featuredLinkImageClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName, regularLinksClassName, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName, footerClassName, background, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageBentoLayoutProps): React.JSX.Element;
+declare function LinkPageBentoLayout({ name, bio, avatar, avatarUrl, profileSlot, links, linksSlot, featuredLinksSlot, regularLinksSlot, socialLinks, socialLinksSlot, footerAction, footerSlot, className, contentClassName, headerClassName, avatarClassName, nameClassName, bioClassName, socialLinksClassName, socialLinkClassName, socialIconClassName, linksClassName, featuredLinksClassName, featuredLinkClassName, featuredLinkOverlayClassName, featuredLinkImageClassName, featuredLinkIconClassName, featuredLinkLabelClassName, featuredLinkDescriptionClassName, regularLinksClassName, regularLinkClassName, regularLinkIconWrapperClassName, regularLinkIconClassName, regularLinkLabelClassName, footerClassName, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, optixFlowConfig, }: LinkPageBentoLayoutProps): React.JSX.Element;
 
 export { type BentoLink, type BentoSocialLink, LinkPageBentoLayout, type LinkPageBentoLayoutProps };

package/dist/link-page-bento-layout.js

@@ -12,62 +12,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -490,10 +434,6 @@ var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 }
-
-// lib/blockBrandedIconsAndPlaceholders.ts
-var blockBrandedIconsAndPlaceholders = {
-  avatar5: "https://cdn.ing/assets/i/r/286243/alziyfoo570m3vade3usufzlzj6x/avatar-5.webp"};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -873,7 +813,7 @@ function LinkPageBentoLayout({
   name,
   bio,
   avatar,
-  avatarUrl = blockBrandedIconsAndPlaceholders.avatar5,
+  avatarUrl,
   profileSlot,
   links,
   linksSlot,
@@ -884,7 +824,6 @@ function LinkPageBentoLayout({
   footerAction,
   footerSlot,
   className,
-  containerClassName,
   contentClassName,
   headerClassName,
   avatarClassName,
@@ -907,14 +846,14 @@ function LinkPageBentoLayout({
   regularLinkIconClassName,
   regularLinkLabelClassName,
   footerClassName,
-  background = "white",
-  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"
@@ -943,7 +882,6 @@ function LinkPageBentoLayout({
           className: cn(
             "rounded-full p-2 transition-all duration-200",
             "hover:scale-110 active:scale-95",
-            getTextColor(resolvedBackground, "muted"),
             "hover:opacity-80",
             socialLinkClassName,
             social.className
@@ -958,7 +896,6 @@ function LinkPageBentoLayout({
     socialLinks,
     socialLinksClassName,
     socialIconClassName,
-    resolvedBackground,
     socialLinkClassName
   ]);
   const renderFeaturedLinks = useMemo(() => {
@@ -991,9 +928,7 @@ function LinkPageBentoLayout({
           Pressable,
           {
             className: cn(
-              "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              "border border-border bg-muted",
+              "group relative aspect-4/3 overflow-hidden rounded-xl",
               featuredLinkClassName,
               linkClassName
             ),
@@ -1007,9 +942,7 @@ function LinkPageBentoLayout({
         Pressable,
         {
           className: cn(
-            "group relative aspect-4/3 overflow-hidden rounded-2xl transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-muted",
+            "group relative aspect-4/3 overflow-hidden rounded-xl",
             featuredLinkClassName,
             linkClassName
           ),
@@ -1021,7 +954,7 @@ function LinkPageBentoLayout({
                 src: imageSource,
                 alt: imageAlt,
                 className: cn(
-                  "absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                  "absolute inset-0 h-full w-full object-cover",
                   featuredLinkImageClassName
                 ),
                 optixFlowConfig
@@ -1032,7 +965,7 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "absolute inset-0 transition-opacity",
-                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent" : "bg-linear-to-t from-neutral-200/50 to-transparent",
+                  imageSource ? "bg-linear-to-t from-black/80 via-black/40 to-transparent text-white" : "bg-primary text-primary-foreground",
                   featuredLinkOverlayClassName
                 )
               }
@@ -1045,7 +978,6 @@ function LinkPageBentoLayout({
                   {
                     className: cn(
                       "text-sm font-semibold",
-                      imageSource && "text-background",
                       featuredLinkLabelClassName
                     ),
                     children: label
@@ -1057,12 +989,11 @@ function LinkPageBentoLayout({
                 {
                   className: cn(
                     "mt-0.5 text-xs",
-                    imageSource ? "text-background/70" : getTextColor(resolvedBackground, "muted"),
                     featuredLinkDescriptionClassName
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: featuredLinkDescriptionClassName, children: description }))
+              ) : description)
             ] })
           ]
         },
@@ -1072,7 +1003,6 @@ function LinkPageBentoLayout({
   }, [
     featuredLinksSlot,
     featuredLinks,
-    resolvedBackground,
     featuredLinkClassName,
     featuredLinkImageClassName,
     optixFlowConfig,
@@ -1106,9 +1036,7 @@ function LinkPageBentoLayout({
           Pressable,
           {
             className: cn(
-              "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
-              "hover:scale-[1.02] active:scale-[0.98]",
-              "border border-border bg-muted/50 hover:opacity-80",
+              "group flex items-center gap-3 rounded-xl p-3",
               regularLinkClassName,
               linkClassName
             ),
@@ -1122,9 +1050,8 @@ function LinkPageBentoLayout({
         Pressable,
         {
           className: cn(
-            "group flex items-center gap-3 rounded-xl p-3 transition-all duration-200",
-            "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-muted/50 hover:opacity-80",
+            "group flex items-center gap-3 rounded-xl p-3",
+            "bg-card text-card-foreground",
             regularLinkClassName,
             linkClassName
           ),
@@ -1135,8 +1062,6 @@ function LinkPageBentoLayout({
               {
                 className: cn(
                   "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg",
-                  getNestedCardBg(resolvedBackground, "card"),
-                  getNestedCardTextColor(resolvedBackground),
                   regularLinkIconWrapperClassName
                 ),
                 children: iconElement
@@ -1160,7 +1085,6 @@ function LinkPageBentoLayout({
   }, [
     regularLinksSlot,
     regularLinks,
-    resolvedBackground,
     regularLinkClassName,
     regularLinkIconWrapperClassName,
     regularLinkIconClassName,
@@ -1172,8 +1096,8 @@ function LinkPageBentoLayout({
     const hasFeatured = Boolean(featuredLinksSlot) || featuredLinks.length > 0;
     const hasRegular = Boolean(regularLinksSlot) || regularLinks.length > 0;
     return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", linksClassName), children: [
-      hasFeatured && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
-      hasRegular && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-2 gap-3", regularLinksClassName), children: renderRegularLinks })
+      hasFeatured && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-3", featuredLinksClassName), children: renderFeaturedLinks }),
+      hasRegular && /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-3", regularLinksClassName), children: renderRegularLinks })
     ] });
   }, [
     linksSlot,
@@ -1217,18 +1141,8 @@ function LinkPageBentoLayout({
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
-            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "max-w-xs 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-xl font-bold", nameClassName), children: name }) : name),
+            bio && (typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xs text-sm", bioClassName), children: bio }) : bio)
           ] }),
           renderSocialLinks
         ]
@@ -1237,7 +1151,6 @@ function LinkPageBentoLayout({
   }, [
     profileSlot,
     resolvedAvatar,
-    resolvedBackground,
     avatarClassName,
     optixFlowConfig,
     name,
@@ -1265,7 +1178,6 @@ function LinkPageBentoLayout({
       {
         className: cn(
           "flex items-center justify-center gap-1.5 text-xs transition-opacity hover:opacity-80",
-          getTextColor(resolvedBackground, "muted"),
           "opacity-50",
           footerClassName,
           actionClassName
@@ -1278,30 +1190,22 @@ function LinkPageBentoLayout({
         ] })
       }
     );
-  }, [footerSlot, footerAction, resolvedBackground, footerClassName]);
+  }, [footerSlot, footerAction, footerClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      background: resolvedBackground,
+      background,
       spacing,
       className,
       pattern,
       patternOpacity,
       patternClassName,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "flex min-h-screen w-full items-start justify-center py-12",
-            containerClassName
-          ),
-          children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-lg space-y-6", contentClassName), children: [
-            renderProfile,
-            renderLinks,
-            /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })
-          ] })
-        }
-      )
+      containerClassName,
+      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 })
+      ] }) })
     }
   );
 }