@opensite/ui 0.8.6 → 0.8.8

package/dist/feature-image-overlay-badge.cjs

@@ -1146,7 +1146,7 @@ function FeatureImageOverlayBadge({
                   "div",
                   {
                     className: cn(
-                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-black via-black/20 to-transparent",
+                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-foreground via-foreground/20 to-transparent",
                       overlayClassName
                     )
                   }
@@ -1156,7 +1156,7 @@ function FeatureImageOverlayBadge({
                     "span",
                     {
                       className: cn(
-                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
+                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-foreground/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
                         avatarBadgeClassName
                       ),
                       children: [

package/dist/feature-image-overlay-badge.js

@@ -1124,7 +1124,7 @@ function FeatureImageOverlayBadge({
                   "div",
                   {
                     className: cn(
-                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-black via-black/20 to-transparent",
+                      "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-foreground via-foreground/20 to-transparent",
                       overlayClassName
                     )
                   }
@@ -1134,7 +1134,7 @@ function FeatureImageOverlayBadge({
                     "span",
                     {
                       className: cn(
-                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-background/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
+                        "ml-auto flex w-fit items-center gap-2 rounded-full bg-foreground/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
                         avatarBadgeClassName
                       ),
                       children: [

package/dist/feature-integration-cards.cjs

@@ -992,7 +992,7 @@ function FeatureIntegrationCards({
           Pressable,
           {
             href: integration.link,
-            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60", cardClassName, integration.className),
+            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
             children: cardContent
           },
           index
@@ -1001,7 +1001,7 @@ function FeatureIntegrationCards({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60", cardClassName, integration.className),
+          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
           children: cardContent
         },
         index

package/dist/feature-integration-cards.js

@@ -971,7 +971,7 @@ function FeatureIntegrationCards({
           Pressable,
           {
             href: integration.link,
-            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60", cardClassName, integration.className),
+            className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
             children: cardContent
           },
           index
@@ -980,7 +980,7 @@ function FeatureIntegrationCards({
       return /* @__PURE__ */ jsx(
         "div",
         {
-          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300 hover:bg-muted/60", cardClassName, integration.className),
+          className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
           children: cardContent
         },
         index

package/dist/feature-numbered-cards.cjs

@@ -708,7 +708,7 @@ function FeatureNumberedCards({
         "div",
         {
           className: cn(
-            "space-y-4 md:space-y-10 rounded-lg border-none md:border md:bg-background p-0 md:p-10",
+            "space-y-4 md:space-y-10 rounded-lg border-none md:border p-0 md:p-10",
             cardsWrapperClassName
           ),
           children: featuresContent

package/dist/feature-numbered-cards.js

@@ -687,7 +687,7 @@ function FeatureNumberedCards({
         "div",
         {
           className: cn(
-            "space-y-4 md:space-y-10 rounded-lg border-none md:border md:bg-background p-0 md:p-10",
+            "space-y-4 md:space-y-10 rounded-lg border-none md:border p-0 md:p-10",
             cardsWrapperClassName
           ),
           children: featuresContent

package/dist/feature-pattern-grid-links.cjs

@@ -970,7 +970,7 @@ function FeaturePatternGridLinks({
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-10 rounded-lg border bg-background p-8", cardClassName, feature.className),
+        className: cn("flex flex-col gap-10 rounded-lg border p-8", cardClassName, feature.className),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             renderFeatureIcon(feature),

package/dist/feature-pattern-grid-links.js

@@ -949,7 +949,7 @@ function FeaturePatternGridLinks({
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn("flex flex-col gap-10 rounded-lg border bg-background p-8", cardClassName, feature.className),
+        className: cn("flex flex-col gap-10 rounded-lg border p-8", cardClassName, feature.className),
         children: [
           /* @__PURE__ */ jsxs("div", { children: [
             renderFeatureIcon(feature),

package/dist/footer-animated-social.cjs

@@ -991,7 +991,7 @@ function FooterAnimatedSocial({
           Pressable,
           {
             href: link.href,
-            className: cn("group flex items-center gap-2 py-2 text-foreground transition-colors hover:text-foreground/80", socialLinkClassName),
+            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-medium", children: link.name }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -1029,7 +1029,7 @@ function FooterAnimatedSocial({
             children: [
               /* @__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 text-foreground lg:text-5xl", headingClassName), children: heading }),
+                  /* @__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 })
                 ] }),
                 ctaUrl && ctaText && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1066,7 +1066,7 @@ function FooterAnimatedSocial({
                       framerMotion.motion.a,
                       {
                         href: attributionHref,
-                        className: "underline underline-offset-4 transition-colors hover:text-foreground",
+                        className: "underline underline-offset-4 transition-colors hover:text-primary",
                         whileHover: { scale: 1.05 },
                         transition: {
                           type: "spring",

package/dist/footer-animated-social.js

@@ -970,7 +970,7 @@ function FooterAnimatedSocial({
           Pressable,
           {
             href: link.href,
-            className: cn("group flex items-center gap-2 py-2 text-foreground transition-colors hover:text-foreground/80", socialLinkClassName),
+            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName),
             children: [
               /* @__PURE__ */ jsx("span", { className: "text-xl font-medium", children: link.name }),
               /* @__PURE__ */ jsx(
@@ -1008,7 +1008,7 @@ function FooterAnimatedSocial({
             children: [
               /* @__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 text-foreground lg:text-5xl", headingClassName), children: heading }),
+                  /* @__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 })
                 ] }),
                 ctaUrl && ctaText && /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx(
@@ -1045,7 +1045,7 @@ function FooterAnimatedSocial({
                       motion.a,
                       {
                         href: attributionHref,
-                        className: "underline underline-offset-4 transition-colors hover:text-foreground",
+                        className: "underline underline-offset-4 transition-colors hover:text-primary",
                         whileHover: { scale: 1.05 },
                         transition: {
                           type: "spring",

package/dist/footer-brand-links-contact.cjs

@@ -971,12 +971,12 @@ function FooterBrandLinksContact({
   const linkGroupsContent = React.useMemo(() => {
     if (!linkGroups || linkGroups.length === 0) return null;
     return linkGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(linkGroupClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-6 text-sm font-semibold uppercase tracking-wider text-foreground", linkGroupTitleClassName), children: group.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-6 text-sm font-semibold uppercase tracking-wider", linkGroupTitleClassName), children: group.title }),
       /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("space-y-3", linkListClassName), children: group.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
           href: link.href,
-          className: cn("text-sm text-muted-foreground transition-colors hover:text-foreground", linkItemClassName),
+          className: cn("text-sm text-muted-foreground transition-colors hover:text-primary", linkItemClassName),
           children: link.label
         }
       ) }, linkIdx)) })
@@ -990,10 +990,10 @@ function FooterBrandLinksContact({
         Pressable,
         {
           href: item.href,
-          className: "text-sm font-medium text-foreground transition-colors hover:text-muted-foreground",
+          className: "text-sm font-medium transition-colors hover:text-muted-foreground",
           children: item.label
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: item.label }) })
+      ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: item.label }) })
     ] }, idx));
   }, [contactItems, contactItemClassName]);
   const socialLinksContent = React.useMemo(() => {
@@ -1040,8 +1040,8 @@ function FooterBrandLinksContact({
                     optixFlowConfig
                   }
                 ),
-                tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-base text-white/80", taglineClassName), children: tagline }),
-                description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-white/60", descriptionClassName), children: description })
+                tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-base", taglineClassName), children: tagline }),
+                description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm text-muted-foreground", descriptionClassName), children: description })
               ] }),
               linkGroupsContent,
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(contactColumnClassName), children: [
@@ -1049,7 +1049,7 @@ function FooterBrandLinksContact({
                   "h3",
                   {
                     className: cn(
-                      "text-lg font-semibold text-white",
+                      "text-lg font-semibold",
                       linkGroupTitleClassName
                     ),
                     children: contactTitle
@@ -1059,14 +1059,14 @@ function FooterBrandLinksContact({
                   "ul",
                   {
                     className: cn(
-                      "mt-4 space-y-3 text-sm text-white/70",
+                      "mt-4 space-y-3 text-sm text-muted-foreground",
                       linkListClassName
                     ),
                     children: contactItemsContent
                   }
                 ),
                 socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8", socialSectionClassName), children: [
-                  socialTitle && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-white/60", children: socialTitle }),
+                  socialTitle && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: socialTitle }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex gap-4", children: socialLinksContent })
                 ] })
               ] })
@@ -1077,7 +1077,7 @@ function FooterBrandLinksContact({
           "div",
           {
             className: cn(
-              "mt-12 border-t border-white/10 pt-8 text-sm text-white/60",
+              "mt-12 border-t pt-8 text-sm text-muted-foreground",
               bottomBarClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-4 md:flex-row", children: [

package/dist/footer-brand-links-contact.js

@@ -950,12 +950,12 @@ function FooterBrandLinksContact({
   const linkGroupsContent = useMemo(() => {
     if (!linkGroups || linkGroups.length === 0) return null;
     return linkGroups.map((group) => /* @__PURE__ */ jsxs("div", { className: cn(linkGroupClassName), children: [
-      /* @__PURE__ */ jsx("h3", { className: cn("mb-6 text-sm font-semibold uppercase tracking-wider text-foreground", linkGroupTitleClassName), children: group.title }),
+      /* @__PURE__ */ jsx("h3", { className: cn("mb-6 text-sm font-semibold uppercase tracking-wider", linkGroupTitleClassName), children: group.title }),
       /* @__PURE__ */ jsx("ul", { className: cn("space-y-3", linkListClassName), children: group.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
         Pressable,
         {
           href: link.href,
-          className: cn("text-sm text-muted-foreground transition-colors hover:text-foreground", linkItemClassName),
+          className: cn("text-sm text-muted-foreground transition-colors hover:text-primary", linkItemClassName),
           children: link.label
         }
       ) }, linkIdx)) })
@@ -969,10 +969,10 @@ function FooterBrandLinksContact({
         Pressable,
         {
           href: item.href,
-          className: "text-sm font-medium text-foreground transition-colors hover:text-muted-foreground",
+          className: "text-sm font-medium transition-colors hover:text-muted-foreground",
           children: item.label
         }
-      ) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: item.label }) })
+      ) : /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: item.label }) })
     ] }, idx));
   }, [contactItems, contactItemClassName]);
   const socialLinksContent = useMemo(() => {
@@ -1019,8 +1019,8 @@ function FooterBrandLinksContact({
                     optixFlowConfig
                   }
                 ),
-                tagline && /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-base text-white/80", taglineClassName), children: tagline }),
-                description && /* @__PURE__ */ jsx("p", { className: cn("text-sm text-white/60", descriptionClassName), children: description })
+                tagline && /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-base", taglineClassName), children: tagline }),
+                description && /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground", descriptionClassName), children: description })
               ] }),
               linkGroupsContent,
               /* @__PURE__ */ jsxs("div", { className: cn(contactColumnClassName), children: [
@@ -1028,7 +1028,7 @@ function FooterBrandLinksContact({
                   "h3",
                   {
                     className: cn(
-                      "text-lg font-semibold text-white",
+                      "text-lg font-semibold",
                       linkGroupTitleClassName
                     ),
                     children: contactTitle
@@ -1038,14 +1038,14 @@ function FooterBrandLinksContact({
                   "ul",
                   {
                     className: cn(
-                      "mt-4 space-y-3 text-sm text-white/70",
+                      "mt-4 space-y-3 text-sm text-muted-foreground",
                       linkListClassName
                     ),
                     children: contactItemsContent
                   }
                 ),
                 socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxs("div", { className: cn("mt-8", socialSectionClassName), children: [
-                  socialTitle && /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-white/60", children: socialTitle }),
+                  socialTitle && /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: socialTitle }),
                   /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-4", children: socialLinksContent })
                 ] })
               ] })
@@ -1056,7 +1056,7 @@ function FooterBrandLinksContact({
           "div",
           {
             className: cn(
-              "mt-12 border-t border-white/10 pt-8 text-sm text-white/60",
+              "mt-12 border-t pt-8 text-sm text-muted-foreground",
               bottomBarClassName
             ),
             children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 md:flex-row", children: [

package/dist/footer-comprehensive-links.cjs

@@ -881,7 +881,7 @@ function FooterComprehensiveLinks({
     "footer",
     {
       className: cn(
-        "relative overflow-hidden bg-zinc-950 text-white",
+        "relative overflow-hidden",
         className
       ),
       children: [
@@ -900,36 +900,36 @@ function FooterComprehensiveLinks({
                     optixFlowConfig
                   }
                 ) }),
-                tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-white", children: tagline }),
-                summary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed text-white/70", children: summary })
+                tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: tagline }),
+                summary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: summary })
               ] }) }),
               linkColumns && linkColumns.length > 0 && linkColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-white", children: column.title }),
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: column.title }),
                 /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2.5", children: column.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
                   Pressable,
                   {
                     href: link.href,
-                    className: "text-sm text-white/60 transition-colors hover:text-white",
+                    className: "text-sm text-muted-foreground transition-colors hover:text-primary",
                     children: link.label
                   }
                 ) }, link.href)) })
               ] }) }, column.title)),
               contact || (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 lg:col-span-3", children: [
                 contact ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-white", children: "Contact" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: "Contact" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex flex-col gap-3", children: [
                     contact.email ? /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
                       Pressable,
                       {
                         href: contact.email,
-                        className: "group flex items-center gap-2.5 text-sm text-white/60 transition-colors hover:text-white",
+                        className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             DynamicIcon,
                             {
                               name: "lucide/mail",
                               size: 16,
-                              className: "text-white/50 transition-colors group-hover:text-white/80"
+                              className: "text-muted-foreground transition-colors group-hover:text-primary"
                             }
                           ),
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "underline underline-offset-2", children: contact.email })
@@ -940,14 +940,14 @@ function FooterComprehensiveLinks({
                       Pressable,
                       {
                         href: contact.phone,
-                        className: "group flex items-center gap-2.5 text-sm text-white/60 transition-colors hover:text-white",
+                        className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             DynamicIcon,
                             {
                               name: "lucide/phone",
                               size: 16,
-                              className: "text-white/50 transition-colors group-hover:text-white/80"
+                              className: "text-muted-foreground transition-colors group-hover:text-primary"
                             }
                           ),
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "underline underline-offset-2", children: contact.phone })
@@ -960,14 +960,14 @@ function FooterComprehensiveLinks({
                         href: `https://maps.google.com/?q=${encodeURIComponent(
                           contact.address
                         )}`,
-                        className: "group flex items-start gap-2.5 text-sm text-white/60 transition-colors hover:text-white",
+                        className: "group flex items-start gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             DynamicIcon,
                             {
                               name: "lucide/map-pin",
                               size: 16,
-                              className: "mt-0.5 text-white/50 transition-colors group-hover:text-white/80"
+                              className: "mt-0.5 text-muted-foreground transition-colors group-hover:text-primary"
                             }
                           ),
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "underline underline-offset-2", children: contact.address })
@@ -977,13 +977,13 @@ function FooterComprehensiveLinks({
                   ] })
                 ] }) : null,
                 (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-white", children: "Follow Us" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: "Follow Us" }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: socialLinks?.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
                     Pressable,
                     {
                       href: link.href,
                       "aria-label": link.label || `Follow us on ${link.platform}`,
-                      className: "flex h-9 w-9 items-center justify-center rounded-full bg-white/5 text-white/70 transition-colors hover:bg-white/10 hover:text-white",
+                      className: "flex h-9 w-9 items-center justify-center rounded-full bg-muted text-muted-foreground transition-colors hover:bg-muted/80 hover:text-primary",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         DynamicIcon,
                         {
@@ -997,26 +997,26 @@ function FooterComprehensiveLinks({
                 ] }) : null
               ] }) : null
             ] }),
-            (articleLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-white/10 pt-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-white", children: articleSectionTitle }),
+            (articleLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t pt-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: articleSectionTitle }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: articleLinks?.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
                 Pressable,
                 {
                   href: link.href,
-                  className: "truncate text-sm text-white/60 transition-colors hover:text-white",
+                  className: "truncate text-sm text-muted-foreground transition-colors hover:text-primary",
                   children: link.label
                 },
                 link.href
               )) })
             ] }) }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 border-t border-white/10 pt-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/50", children: copyrightText }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 border-t pt-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: copyrightText }),
             (bottomLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 sm:gap-6", children: bottomLinks?.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
               Pressable,
               {
                 href: link.href,
-                className: "text-sm text-white/50 underline underline-offset-2 transition-colors hover:text-white/80",
+                className: "text-sm text-muted-foreground underline underline-offset-2 transition-colors hover:text-primary",
                 children: link.label
               },
               link.href

package/dist/footer-comprehensive-links.js

@@ -860,7 +860,7 @@ function FooterComprehensiveLinks({
     "footer",
     {
       className: cn(
-        "relative overflow-hidden bg-zinc-950 text-white",
+        "relative overflow-hidden",
         className
       ),
       children: [
@@ -879,36 +879,36 @@ function FooterComprehensiveLinks({
                     optixFlowConfig
                   }
                 ) }),
-                tagline && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-white", children: tagline }),
-                summary && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-white/70", children: summary })
+                tagline && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: tagline }),
+                summary && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: summary })
               ] }) }),
               linkColumns && linkColumns.length > 0 && linkColumns.map((column) => /* @__PURE__ */ jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white", children: column.title }),
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: column.title }),
                 /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2.5", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     href: link.href,
-                    className: "text-sm text-white/60 transition-colors hover:text-white",
+                    className: "text-sm text-muted-foreground transition-colors hover:text-primary",
                     children: link.label
                   }
                 ) }, link.href)) })
               ] }) }, column.title)),
               contact || (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:col-span-3", children: [
                 contact ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white", children: "Contact" }),
+                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Contact" }),
                   /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-3", children: [
                     contact.email ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
                       Pressable,
                       {
                         href: contact.email,
-                        className: "group flex items-center gap-2.5 text-sm text-white/60 transition-colors hover:text-white",
+                        className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
                         children: [
                           /* @__PURE__ */ jsx(
                             DynamicIcon,
                             {
                               name: "lucide/mail",
                               size: 16,
-                              className: "text-white/50 transition-colors group-hover:text-white/80"
+                              className: "text-muted-foreground transition-colors group-hover:text-primary"
                             }
                           ),
                           /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.email })
@@ -919,14 +919,14 @@ function FooterComprehensiveLinks({
                       Pressable,
                       {
                         href: contact.phone,
-                        className: "group flex items-center gap-2.5 text-sm text-white/60 transition-colors hover:text-white",
+                        className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
                         children: [
                           /* @__PURE__ */ jsx(
                             DynamicIcon,
                             {
                               name: "lucide/phone",
                               size: 16,
-                              className: "text-white/50 transition-colors group-hover:text-white/80"
+                              className: "text-muted-foreground transition-colors group-hover:text-primary"
                             }
                           ),
                           /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.phone })
@@ -939,14 +939,14 @@ function FooterComprehensiveLinks({
                         href: `https://maps.google.com/?q=${encodeURIComponent(
                           contact.address
                         )}`,
-                        className: "group flex items-start gap-2.5 text-sm text-white/60 transition-colors hover:text-white",
+                        className: "group flex items-start gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
                         children: [
                           /* @__PURE__ */ jsx(
                             DynamicIcon,
                             {
                               name: "lucide/map-pin",
                               size: 16,
-                              className: "mt-0.5 text-white/50 transition-colors group-hover:text-white/80"
+                              className: "mt-0.5 text-muted-foreground transition-colors group-hover:text-primary"
                             }
                           ),
                           /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.address })
@@ -956,13 +956,13 @@ function FooterComprehensiveLinks({
                   ] })
                 ] }) : null,
                 (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white", children: "Follow Us" }),
+                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Follow Us" }),
                   /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: socialLinks?.map((link) => /* @__PURE__ */ jsx(
                     Pressable,
                     {
                       href: link.href,
                       "aria-label": link.label || `Follow us on ${link.platform}`,
-                      className: "flex h-9 w-9 items-center justify-center rounded-full bg-white/5 text-white/70 transition-colors hover:bg-white/10 hover:text-white",
+                      className: "flex h-9 w-9 items-center justify-center rounded-full bg-muted text-muted-foreground transition-colors hover:bg-muted/80 hover:text-primary",
                       children: /* @__PURE__ */ jsx(
                         DynamicIcon,
                         {
@@ -976,26 +976,26 @@ function FooterComprehensiveLinks({
                 ] }) : null
               ] }) : null
             ] }),
-            (articleLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "border-t border-white/10 pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-white", children: articleSectionTitle }),
+            (articleLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: articleSectionTitle }),
               /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: articleLinks?.map((link) => /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   href: link.href,
-                  className: "truncate text-sm text-white/60 transition-colors hover:text-white",
+                  className: "truncate text-sm text-muted-foreground transition-colors hover:text-primary",
                   children: link.label
                 },
                 link.href
               )) })
             ] }) }) : null
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-10 border-t border-white/10 pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-white/50", children: copyrightText }),
+          /* @__PURE__ */ jsx("div", { className: "mt-10 border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: copyrightText }),
             (bottomLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 sm:gap-6", children: bottomLinks?.map((link) => /* @__PURE__ */ jsx(
               Pressable,
               {
                 href: link.href,
-                className: "text-sm text-white/50 underline underline-offset-2 transition-colors hover:text-white/80",
+                className: "text-sm text-muted-foreground underline underline-offset-2 transition-colors hover:text-primary",
                 children: link.label
               },
               link.href