@opensite/ui 1.4.0 → 1.4.1

package/dist/feature-bento-image-grid.js

@@ -11,32 +11,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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";
-    }
-  }
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -954,87 +928,203 @@ function FeatureBentoImageGrid({
   patternOpacity,
   patternClassName
 }) {
-  const renderItemIcon = React.useCallback((item) => {
-    if (item.icon) return item.icon;
-    if (item.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 24 });
-    return null;
-  }, []);
-  const renderItemImage = React.useCallback((item, imageClassName) => {
-    if (item.imageSlot) return item.imageSlot;
-    if (item.imageSrc) {
-      return /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: item.imageSrc,
-          alt: item.imageAlt || (typeof item.title === "string" ? item.title : "Feature image"),
-          className: cn(imageClassName, item.imageClassName),
-          loading: "lazy",
-          optixFlowConfig
-        }
-      );
-    }
-    return null;
-  }, [optixFlowConfig]);
-  const renderLargeCard = React.useCallback((item) => {
-    const iconContent = renderItemIcon(item);
-    const hasIconBadgeContent = iconContent || item.iconBadge;
-    const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-      renderItemImage(item, "h-full max-h-[580px] w-full rounded-xl object-cover object-center"),
-      /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
-      /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        hasIconBadgeContent && /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          iconContent,
-          item.iconBadge
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-          item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", item.titleClassName), children: item.title })),
-          item.linkText && /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 font-medium", item.linkTextClassName), children: [
-            item.linkText,
-            /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+  const renderItemIcon = React.useCallback(
+    (item) => {
+      if (item.icon) return item.icon;
+      if (item.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 24 });
+      return null;
+    },
+    []
+  );
+  const renderItemImage = React.useCallback(
+    (item, imageClassName) => {
+      if (item.imageSlot) return item.imageSlot;
+      if (item.imageSrc) {
+        return /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: item.imageSrc,
+            alt: item.imageAlt || (typeof item.title === "string" ? item.title : "Feature image"),
+            className: cn(imageClassName, item.imageClassName),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        );
+      }
+      return null;
+    },
+    [optixFlowConfig]
+  );
+  const renderLargeCard = React.useCallback(
+    (item) => {
+      const iconContent = renderItemIcon(item);
+      const hasIconBadgeContent = iconContent || item.iconBadge;
+      const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderItemImage(
+          item,
+          "h-full max-h-[580px] w-full rounded-xl object-cover object-center"
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between px-5 md:px-8 py-6 md:py-6", children: [
+          hasIconBadgeContent && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "ml-auto flex w-fit items-center gap-2 p-0 text-sm font-semibold text-white",
+                item.iconBadgeClassName
+              ),
+              children: [
+                iconContent,
+                item.iconBadge
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:gap-5 text-white", children: [
+            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(
+              "h4",
+              {
+                className: cn(
+                  "text-2xl font-medium lg:text-3xl",
+                  item.titleClassName
+                ),
+                children: item.title
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-2xl font-medium lg:text-3xl",
+                  item.titleClassName
+                ),
+                children: item.title
+              }
+            )),
+            item.linkText && /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: cn(
+                  "flex items-center gap-1 font-bold text-sm uppercase",
+                  item.linkTextClassName
+                ),
+                children: [
+                  item.linkText,
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                ]
+              }
+            )
           ] })
         ] })
-      ] })
-    ] });
-    if (item.link) {
+      ] });
+      if (item.link) {
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: item.link,
+            className: cn(
+              "group relative col-span-2 row-span-3 overflow-hidden rounded-xl",
+              largeCardClassName,
+              item.className
+            ),
+            children: cardContent
+          }
+        );
+      }
       return /* @__PURE__ */ jsx(
-        Pressable,
+        "div",
         {
-          href: item.link,
-          className: cn("group relative col-span-2 row-span-3 overflow-hidden rounded-xl", largeCardClassName, item.className),
+          className: cn(
+            "group relative col-span-2 row-span-3 overflow-hidden rounded-xl",
+            largeCardClassName,
+            item.className
+          ),
           children: cardContent
         }
       );
-    }
-    return /* @__PURE__ */ jsx("div", { className: cn("group relative col-span-2 row-span-3 overflow-hidden rounded-xl", largeCardClassName, item.className), children: cardContent });
-  }, [largeCardClassName, renderItemImage, renderItemIcon]);
-  const renderSmallCard = React.useCallback((item, index) => {
-    const iconContent = renderItemIcon(item);
-    const hasIconBadgeContent = iconContent || item.iconBadge;
-    const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-      renderItemImage(item, cn(
-        "h-full w-full rounded-xl object-cover object-center",
-        index === 0 ? "max-h-44" : "max-h-96"
-      )),
-      /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-primary to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
-      /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-        hasIconBadgeContent && /* @__PURE__ */ jsxs("span", { className: cn("ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background", item.iconBadgeClassName), children: [
-          iconContent,
-          item.iconBadge
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 text-background", children: [
-          item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", item.titleClassName), children: item.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", item.titleClassName), children: item.title })),
-          item.linkText && /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 font-medium", item.linkTextClassName), children: [
-            item.linkText,
-            /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+    },
+    [largeCardClassName, renderItemImage, renderItemIcon]
+  );
+  const renderSmallCard = React.useCallback(
+    (item, index) => {
+      const iconContent = renderItemIcon(item);
+      const hasIconBadgeContent = iconContent || item.iconBadge;
+      const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderItemImage(
+          item,
+          cn(
+            "h-full w-full rounded-xl object-cover object-center",
+            index === 0 ? "max-h-44" : "max-h-96"
+          )
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 rounded-xl bg-linear-to-t from-black to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
+          hasIconBadgeContent && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "ml-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold ",
+                item.iconBadgeClassName
+              ),
+              children: [
+                iconContent,
+                item.iconBadge
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 ", children: [
+            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx(
+              "h4",
+              {
+                className: cn(
+                  "text-2xl font-semibold lg:text-3xl",
+                  item.titleClassName
+                ),
+                children: item.title
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "text-2xl font-semibold lg:text-3xl",
+                  item.titleClassName
+                ),
+                children: item.title
+              }
+            )),
+            item.linkText && /* @__PURE__ */ jsxs(
+              "p",
+              {
+                className: cn(
+                  "flex items-center gap-1 font-medium",
+                  item.linkTextClassName
+                ),
+                children: [
+                  item.linkText,
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                ]
+              }
+            )
           ] })
         ] })
-      ] })
-    ] });
-    if (item.link) {
+      ] });
+      if (item.link) {
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: item.link,
+            className: cn(
+              "group relative overflow-hidden rounded-xl",
+              index === 1 && "row-span-2",
+              smallCardClassName,
+              item.className
+            ),
+            children: cardContent
+          },
+          index
+        );
+      }
       return /* @__PURE__ */ jsx(
-        Pressable,
+        "div",
         {
-          href: item.link,
           className: cn(
             "group relative overflow-hidden rounded-xl",
             index === 1 && "row-span-2",
@@ -1045,21 +1135,9 @@ function FeatureBentoImageGrid({
         },
         index
       );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "group relative overflow-hidden rounded-xl",
-          index === 1 && "row-span-2",
-          smallCardClassName,
-          item.className
-        ),
-        children: cardContent
-      },
-      index
-    );
-  }, [smallCardClassName, renderItemImage, renderItemIcon]);
+    },
+    [smallCardClassName, renderItemImage, renderItemIcon]
+  );
   const itemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -1081,9 +1159,36 @@ function FeatureBentoImageGrid({
       className,
       containerClassName,
       children: [
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
-        /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0", gridClassName), children: itemsContent })
+        title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: cn(
+              "mb-4 text-center text-4xl font-semibold text-balance",
+              titleClassName
+            ),
+            children: title
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mb-4 text-center text-4xl font-semibold text-balance",
+              titleClassName
+            ),
+            children: title
+          }
+        )),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center text-balance", descriptionClassName), children: description })),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0",
+              gridClassName
+            ),
+            children: itemsContent
+          }
+        )
       ]
     }
   );

package/dist/feature-icon-grid-bordered.cjs

@@ -969,7 +969,7 @@ function FeatureIconGridBordered({
             "div",
             {
               className: cn(
-                "flex size-10 shrink-0 items-center justify-center rounded-lg md:size-12 text-accent-foreground bg-primary shadow-xl",
+                "flex size-10 shrink-0 items-center justify-center rounded-lg md:size-12 text-primary-foreground bg-primary shadow-xl",
                 feature.iconClassName
               ),
               children: renderIcon(feature)

package/dist/feature-icon-grid-bordered.js

@@ -948,7 +948,7 @@ function FeatureIconGridBordered({
             "div",
             {
               className: cn(
-                "flex size-10 shrink-0 items-center justify-center rounded-lg md:size-12 text-accent-foreground bg-primary shadow-xl",
+                "flex size-10 shrink-0 items-center justify-center rounded-lg md:size-12 text-primary-foreground bg-primary shadow-xl",
                 feature.iconClassName
               ),
               children: renderIcon(feature)

package/dist/footer-accordion-social.cjs

@@ -1816,7 +1816,7 @@ function FooterAccordionSocial({
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: newsletterDescription })
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: newsletterDescription })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               forms.Form,
@@ -1833,7 +1833,7 @@ function FooterAccordionSocial({
                       type: "email",
                       placeholder: "Email Address",
                       error: meta.touched && !!meta.error,
-                      className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                      className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                       "aria-label": "Email Address"
                     }
                   ) }),
@@ -1854,18 +1854,18 @@ function FooterAccordionSocial({
           ] }),
           footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-16 gap-y-8 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-bold", children: section.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2 text-sm opacity-80", children: section.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
               Pressable,
               {
                 href: item.href,
-                className: "hover:text-primary",
+                className: "hover:opacity-100",
                 children: item.text
               }
             ) }, idx)) })
           ] }, section.id)) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-6 border-t pt-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-sm text-muted-foreground md:flex-row md:items-center md:gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 text-sm opacity-80 md:flex-row md:items-center md:gap-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
             /* @__PURE__ */ jsxRuntime.jsx(
               BrandAttribution,
@@ -1873,7 +1873,7 @@ function FooterAccordionSocial({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 1,
                 variant: "span",
-                linkClassName: "hover:text-primary"
+                linkClassName: "hover:opacity-100"
               }
             )
           ] }),

package/dist/footer-accordion-social.js

@@ -1795,7 +1795,7 @@ function FooterAccordionSocial({
             ),
             /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
               /* @__PURE__ */ jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
-              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: newsletterDescription })
+              /* @__PURE__ */ jsx("p", { className: "opacity-80", children: newsletterDescription })
             ] }),
             /* @__PURE__ */ jsxs(
               Form,
@@ -1812,7 +1812,7 @@ function FooterAccordionSocial({
                       type: "email",
                       placeholder: "Email Address",
                       error: meta.touched && !!meta.error,
-                      className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                      className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                       "aria-label": "Email Address"
                     }
                   ) }),
@@ -1833,18 +1833,18 @@ function FooterAccordionSocial({
           ] }),
           footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-16 gap-y-8 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-bold", children: section.title }),
-            /* @__PURE__ */ jsx("ul", { className: "space-y-2 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("ul", { className: "space-y-2 text-sm opacity-80", children: section.items.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
               Pressable,
               {
                 href: item.href,
-                className: "hover:text-primary",
+                className: "hover:opacity-100",
                 children: item.text
               }
             ) }, idx)) })
           ] }, section.id)) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-6 border-t pt-8", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-sm text-muted-foreground md:flex-row md:items-center md:gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-sm opacity-80 md:flex-row md:items-center md:gap-4", children: [
             /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
             /* @__PURE__ */ jsx(
               BrandAttribution,
@@ -1852,7 +1852,7 @@ function FooterAccordionSocial({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 1,
                 variant: "span",
-                linkClassName: "hover:text-primary"
+                linkClassName: "hover:opacity-100"
               }
             )
           ] }),

package/dist/footer-animated-social.cjs

@@ -1603,7 +1603,7 @@ function FooterAnimatedSocial({
             label: link.label,
             iconNameOverride: link.iconNameOverride,
             iconSize: 24,
-            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName)
+            className: cn("group flex items-center gap-2 py-2 transition-colors hover:opacity-70", socialLinkClassName)
           }
         )
       },
@@ -1631,13 +1631,13 @@ function FooterAnimatedSocial({
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8", leftColumnClassName), children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { variants: itemVariants, className: "space-y-6", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl leading-tight font-bold lg:text-5xl", headingClassName), children: heading }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-md text-lg leading-relaxed text-muted-foreground", descriptionClassName), children: description })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-md text-lg leading-relaxed opacity-80", descriptionClassName), children: description })
                 ] }),
                 ctaUrl && ctaText && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx(
                   Pressable,
                   {
                     href: ctaUrl,
-                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8", ctaClassName),
+                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border h-11 px-8 hover:opacity-80", ctaClassName),
                     children: ctaText
                   }
                 ) })
@@ -1655,21 +1655,21 @@ function FooterAnimatedSocial({
             viewport: { once: true },
             className: cn("mt-16", bottomClassName),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 h-px w-full bg-border", separatorClassName) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 h-px w-full opacity-20", separatorClassName), style: { backgroundColor: "currentColor" } }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 framerMotion.motion.div,
                 {
                   variants: itemVariants,
                   className: cn("flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center", copyrightClassName),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright, className: "text-sm text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright, className: "text-sm opacity-70" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 text-sm opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(
                       BrandAttribution,
                       {
                         internalBrandSlug: "open_site_ai",
                         optionIndex: 2,
                         variant: "span",
-                        linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
                       }
                     ) })
                   ]

package/dist/footer-animated-social.js

@@ -1582,7 +1582,7 @@ function FooterAnimatedSocial({
             label: link.label,
             iconNameOverride: link.iconNameOverride,
             iconSize: 24,
-            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName)
+            className: cn("group flex items-center gap-2 py-2 transition-colors hover:opacity-70", socialLinkClassName)
           }
         )
       },
@@ -1610,13 +1610,13 @@ function FooterAnimatedSocial({
               /* @__PURE__ */ jsxs("div", { className: cn("space-y-8", leftColumnClassName), children: [
                 /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "space-y-6", children: [
                   /* @__PURE__ */ jsx("h2", { className: cn("text-4xl leading-tight font-bold lg:text-5xl", headingClassName), children: heading }),
-                  /* @__PURE__ */ jsx("p", { className: cn("max-w-md text-lg leading-relaxed text-muted-foreground", descriptionClassName), children: description })
+                  /* @__PURE__ */ jsx("p", { className: cn("max-w-md text-lg leading-relaxed opacity-80", descriptionClassName), children: description })
                 ] }),
                 ctaUrl && ctaText && /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     href: ctaUrl,
-                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8", ctaClassName),
+                    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border h-11 px-8 hover:opacity-80", ctaClassName),
                     children: ctaText
                   }
                 ) })
@@ -1634,21 +1634,21 @@ function FooterAnimatedSocial({
             viewport: { once: true },
             className: cn("mt-16", bottomClassName),
             children: [
-              /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx("div", { className: cn("mb-8 h-px w-full bg-border", separatorClassName) }) }),
+              /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx("div", { className: cn("mb-8 h-px w-full opacity-20", separatorClassName), style: { backgroundColor: "currentColor" } }) }),
               /* @__PURE__ */ jsxs(
                 motion.div,
                 {
                   variants: itemVariants,
                   className: cn("flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center", copyrightClassName),
                   children: [
-                    /* @__PURE__ */ jsx(FooterCopyright, { copyright, className: "text-sm text-muted-foreground" }),
-                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6 text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(FooterCopyright, { copyright, className: "text-sm opacity-70" }),
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6 text-sm opacity-70", children: /* @__PURE__ */ jsx(
                       BrandAttribution,
                       {
                         internalBrandSlug: "open_site_ai",
                         optionIndex: 2,
                         variant: "span",
-                        linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
                       }
                     ) })
                   ]