@opensite/ui 1.4.0 → 1.4.2

package/dist/components.js

@@ -1681,6 +1681,7 @@ var SocialLinkIcon = React4.forwardRef(
       Pressable,
       {
         ref,
+        href,
         "aria-label": accessibleLabel,
         className: cn(
           "inline-flex items-center justify-center transition-colors",
@@ -3520,7 +3521,7 @@ function FooterLinksGrid({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 0,
                 variant: "span",
-                linkClassName: "hover:text-primary"
+                linkClassName: "hover:opacity-100"
               }
             )
           ] }),
@@ -3700,7 +3701,7 @@ function FooterSocialNewsletter({
               "div",
               {
                 className: cn(
-                  "flex flex-col gap-2 text-muted-foreground md:flex-row md:items-center md:gap-4",
+                  "flex flex-col gap-2 opacity-80 md:flex-row md:items-center md:gap-4",
                   copyrightClassName
                 ),
                 children: [
@@ -3711,7 +3712,7 @@ function FooterSocialNewsletter({
                       internalBrandSlug: "open_site_ai",
                       optionIndex: 7,
                       variant: "span",
-                      linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+                      linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
                     }
                   )
                 ]
@@ -3733,14 +3734,15 @@ function FooterSocialApps({
   appLabel,
   copyright,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
 }) {
   const sectionsContent = useMemo(() => {
     if (!sections || sections.length === 0) return null;
-    return sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { children: [
+    return sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: "mt-8 md:mt-0", children: [
       /* @__PURE__ */ jsx("h3", { className: "mb-4 font-bold", children: section.title }),
       /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: "font-medium ", children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name }) }, linkIdx)) })
     ] }, sectionIdx));
@@ -3780,6 +3782,7 @@ function FooterSocialApps({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("footer", { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-10 lg:flex-row lg:gap-20", children: [
           logo && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ jsx(
@@ -3787,12 +3790,12 @@ function FooterSocialApps({
             {
               logo,
               logoClassName: "flex items-center gap-2",
-              logoImageClassName: "h-10",
+              logoImageClassName: "w-auto object-contain h-8 md:h-10",
               optixFlowConfig
             }
           ) }),
-          sections && sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid flex-1 gap-8 sm:grid-cols-2 md:grid-cols-3", children: sectionsContent }),
-          (socialLinks && socialLinks.length > 0 || appLinks && appLinks.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+          sections && sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid flex-1 gap-4 md:gap-12 grid-cols-2 md:grid-cols-3", children: sectionsContent }),
+          (socialLinks && socialLinks.length > 0 || appLinks && appLinks.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:gap-12", children: [
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
               socialLabel && /* @__PURE__ */ jsx("p", { className: "mb-3 font-bold", children: socialLabel }),
               /* @__PURE__ */ jsx("ul", { className: "flex items-center gap-2", children: socialLinksContent })
@@ -3803,7 +3806,7 @@ function FooterSocialApps({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-24 border-t pt-8", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-between gap-4 text-center text-sm font-medium text-muted-foreground md:flex-row md:text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "mt-24 border-t pt-8", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-between gap-4 text-center text-sm font-medium opacity-80 md:flex-row md:text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
           /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
           /* @__PURE__ */ jsx(
             BrandAttribution,
@@ -3811,7 +3814,7 @@ function FooterSocialApps({
               internalBrandSlug: "open_site_ai",
               optionIndex: 6,
               variant: "span",
-              linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+              linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
             }
           )
         ] }) }) })
@@ -3857,7 +3860,7 @@ function FooterSimpleCentered({
         {
           href: link.href,
           className: cn(
-            "text-sm text-muted-foreground transition-colors hover:text-primary",
+            "text-sm opacity-80 transition-colors hover:opacity-100",
             sitemapLinkClassName
           ),
           children: link.label
@@ -3874,13 +3877,13 @@ function FooterSimpleCentered({
   const bottomLinksContent = useMemo(() => {
     if (!bottomLinks || bottomLinks.length === 0) return null;
     return bottomLinks.map((link, idx) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
-      idx > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2022" }),
+      idx > 0 && /* @__PURE__ */ jsx("span", { className: "opacity-70", children: "\u2022" }),
       /* @__PURE__ */ jsx(
         Pressable,
         {
           href: link.href,
           className: cn(
-            "text-sm text-muted-foreground transition-colors hover:text-primary",
+            "text-sm opacity-80 transition-colors hover:opacity-100",
             bottomLinkClassName
           ),
           children: link.text
@@ -3943,7 +3946,7 @@ function FooterSimpleCentered({
           "div",
           {
             className: cn(
-              "flex flex-col items-baseline justify-between gap-8 border-t border-border pt-8 md:flex-row md:gap-16",
+              "flex flex-col items-baseline justify-between gap-8 border-t pt-8 md:flex-row md:gap-16",
               bottomBarClassName
             ),
             children: [
@@ -3951,7 +3954,7 @@ function FooterSimpleCentered({
                 "div",
                 {
                   className: cn(
-                    "flex flex-col gap-2 text-xs text-muted-foreground sm:flex-row sm:items-center sm:gap-4 sm:text-sm",
+                    "flex flex-col gap-2 text-xs opacity-80 sm:flex-row sm:items-center sm:gap-4 sm:text-sm",
                     copyrightClassName
                   ),
                   children: [
@@ -3962,7 +3965,7 @@ function FooterSimpleCentered({
                         internalBrandSlug: "open_site_ai",
                         optionIndex: 5,
                         variant: "span",
-                        linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
                       }
                     )
                   ]
@@ -4011,10 +4014,11 @@ function FooterBrandDescription({
   legalLinksClassName,
   legalLinkClassName,
   background,
-  spacing,
   pattern,
   patternOpacity,
-  optixFlowConfig
+  optixFlowConfig,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32"
 }) {
   return /* @__PURE__ */ jsx(
     Section,
@@ -4024,6 +4028,7 @@ function FooterBrandDescription({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn(contentClassName), children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -4062,7 +4067,7 @@ function FooterBrandDescription({
                       "p",
                       {
                         className: cn(
-                          "max-w-[70%] text-sm text-muted-foreground",
+                          "max-w-full md:max-w-[70%] text-sm opacity-80",
                           descriptionClassName
                         ),
                         children: description
@@ -4072,7 +4077,7 @@ function FooterBrandDescription({
                       "ul",
                       {
                         className: cn(
-                          "flex items-center space-x-6 text-muted-foreground",
+                          "flex items-center space-x-6 opacity-80",
                           socialLinksClassName
                         ),
                         children: socialLinks.map((social, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -4082,7 +4087,7 @@ function FooterBrandDescription({
                             label: social.label,
                             iconNameOverride: social.iconNameOverride,
                             className: cn(
-                              "font-medium hover:text-primary",
+                              "font-medium hover:opacity-100",
                               socialLinkClassName
                             )
                           }
@@ -4096,7 +4101,7 @@ function FooterBrandDescription({
                 "div",
                 {
                   className: cn(
-                    "grid w-full gap-6 md:grid-cols-3 lg:gap-20",
+                    "grid w-full gap-6 grid-cols-2 md:grid-cols-3 lg:gap-20",
                     navGridClassName
                   ),
                   children: sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
@@ -4105,14 +4110,14 @@ function FooterBrandDescription({
                       "ul",
                       {
                         className: cn(
-                          "space-y-3 text-sm text-muted-foreground",
+                          "space-y-3 text-sm opacity-80",
                           navLinksClassName
                         ),
                         children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
                           "li",
                           {
                             className: cn(
-                              "font-medium hover:text-primary",
+                              "font-medium hover:opacity-100",
                               navLinkClassName
                             ),
                             children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
@@ -4131,7 +4136,7 @@ function FooterBrandDescription({
           "div",
           {
             className: cn(
-              "mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium text-muted-foreground md:flex-row md:items-center md:text-left",
+              "mt-8 flex flex-col justify-between gap-4 border-t py-8 text-xs font-medium opacity-70 md:flex-row md:items-center md:text-left",
               bottomClassName
             ),
             children: [
@@ -4150,7 +4155,7 @@ function FooterBrandDescription({
                         internalBrandSlug: "open_site_ai",
                         optionIndex: 4,
                         variant: "span",
-                        linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+                        linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
                       }
                     )
                   ]
@@ -4166,7 +4171,7 @@ function FooterBrandDescription({
                   children: legalLinks.map((link, idx) => /* @__PURE__ */ jsx(
                     "li",
                     {
-                      className: cn("hover:text-primary", legalLinkClassName),
+                      className: cn("hover:opacity-100", legalLinkClassName),
                       children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
                     },
                     idx
@@ -4203,10 +4208,10 @@ function FooterNewsletterGrid({
     if (!sections || sections.length === 0) return null;
     return sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: "col-span-2 md:col-span-1", children: [
       /* @__PURE__ */ jsx("h3", { className: "mb-5 font-medium", children: section.title }),
-      /* @__PURE__ */ jsx("ul", { className: "space-y-4 text-sm text-muted-foreground", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("ul", { className: "space-y-4 text-sm opacity-80", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx(
         "li",
         {
-          className: "font-medium hover:text-primary",
+          className: "font-medium hover:opacity-100",
           children: /* @__PURE__ */ jsx(Pressable, { href: link.href, children: link.name })
         },
         linkIdx
@@ -4222,7 +4227,7 @@ function FooterNewsletterGrid({
         label: social.label,
         iconNameOverride: social.iconNameOverride,
         iconSize: 24,
-        className: "font-medium duration-200 hover:scale-110 hover:text-muted-foreground"
+        className: "font-medium duration-200 hover:scale-110 hover:opacity-70"
       }
     ) }, idx));
   }, [socialLinks]);
@@ -4245,7 +4250,7 @@ function FooterNewsletterGrid({
                 optixFlowConfig
               }
             ) }),
-            description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description }),
+            description && /* @__PURE__ */ jsx("p", { className: "opacity-80", children: description }),
             socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex items-center space-x-6", children: socialLinksContent })
           ] }),
           sectionsContent,
@@ -4257,7 +4262,7 @@ function FooterNewsletterGrid({
                 {
                   type: "email",
                   placeholder: newsletterPlaceholder,
-                  className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                 }
               ),
               newsletterButtonText && /* @__PURE__ */ jsx(
@@ -4269,20 +4274,20 @@ function FooterNewsletterGrid({
                 }
               )
             ] }) }),
-            (privacyText || privacyLinkText) && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs font-medium text-muted-foreground", children: [
+            (privacyText || privacyLinkText) && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs font-medium opacity-80", children: [
               privacyText,
               privacyLinkText && privacyLinkUrl && /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   href: privacyLinkUrl,
-                  className: "ml-1 text-primary hover:underline",
+                  className: "ml-1 hover:underline hover:opacity-100",
                   children: privacyLinkText
                 }
               )
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium text-muted-foreground lg:flex-row lg:items-center lg:text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "mt-20 flex flex-col justify-between gap-4 border-t pt-8 text-sm font-medium opacity-80 lg:flex-row lg:items-center lg:text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
           /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
           /* @__PURE__ */ jsx(
             BrandAttribution,
@@ -4290,7 +4295,7 @@ function FooterNewsletterGrid({
               internalBrandSlug: "open_site_ai",
               optionIndex: 3,
               variant: "span",
-              linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+              linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
             }
           )
         ] }) })
@@ -4349,14 +4354,14 @@ function FooterCtaBanner({
       patternOpacity,
       className: cn("dark", className),
       children: /* @__PURE__ */ jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxs("footer", { children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mb-16 rounded-lg bg-primary/10 p-8 text-center md:p-12", ctaBannerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mb-16 rounded-lg border p-8 text-center md:p-12", ctaBannerClassName), children: [
           /* @__PURE__ */ jsx("h2", { className: cn("mb-4 text-3xl font-bold md:text-4xl", ctaHeadingClassName), children: ctaHeading }),
-          /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-muted-foreground", ctaDescriptionClassName), children: ctaDescription }),
+          /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-6 max-w-2xl opacity-80", ctaDescriptionClassName), children: ctaDescription }),
           /* @__PURE__ */ jsx(
             Pressable,
             {
               href: ctaButtonUrl,
-              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", ctaButtonClassName),
+              className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md border 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 hover:opacity-80 h-11 px-8", ctaButtonClassName),
               children: ctaButtonText
             }
           )
@@ -4380,7 +4385,7 @@ function FooterCtaBanner({
                   {
                     type: "email",
                     placeholder: newsletterPlaceholder,
-                    className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", newsletterInputClassName)
+                    className: cn("flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", newsletterInputClassName)
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -4399,23 +4404,23 @@ function FooterCtaBanner({
                 href: social.href,
                 label: social.label,
                 iconNameOverride: social.iconNameOverride,
-                className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName)
+                className: cn("opacity-80 transition-colors hover:opacity-100", socialLinkClassName)
               }
             ) }, idx)) })
           ] }),
           sections?.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
             /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-semibold", navTitleClassName), children: section.title }),
-            /* @__PURE__ */ jsx("ul", { className: cn("space-y-3 text-sm text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("ul", { className: cn("space-y-3 text-sm opacity-80", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
               Pressable,
               {
                 href: link.href,
-                className: cn("hover:text-primary", navLinkClassName),
+                className: cn("hover:opacity-100", navLinkClassName),
                 children: link.name
               }
             ) }, linkIdx)) })
           ] }, sectionIdx))
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t border-border pt-8 text-sm text-muted-foreground md:flex-row md:items-center", bottomClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center", bottomClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
             /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
             /* @__PURE__ */ jsx(
@@ -4424,11 +4429,11 @@ function FooterCtaBanner({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 8,
                 variant: "span",
-                linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+                linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Pressable, { href: link.href, className: cn("hover:text-primary", legalLinkClassName), children: link.name }) }, idx)) })
+          /* @__PURE__ */ jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Pressable, { href: link.href, className: cn("hover:opacity-100", legalLinkClassName), children: link.name }) }, idx)) })
         ] })
       ] }) })
     }
@@ -4491,12 +4496,12 @@ function FooterContactCard({
               }
             ),
             heading && /* @__PURE__ */ jsx("h2", { className: cn("mb-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }),
-            (email || phone || address) && /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 text-muted-foreground", contactClassName), children: [
+            (email || phone || address) && /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 opacity-80", contactClassName), children: [
               email && /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   href: `mailto:${email}`,
-                  className: "hover:text-primary",
+                  className: "hover:opacity-100",
                   children: email
                 }
               ) }),
@@ -4504,7 +4509,7 @@ function FooterContactCard({
                 Pressable,
                 {
                   href: `tel:${phone}`,
-                  className: "hover:text-primary",
+                  className: "hover:opacity-100",
                   children: phone
                 }
               ) }),
@@ -4521,9 +4526,7 @@ function FooterContactCard({
                   label: social.label,
                   iconNameOverride: social.iconNameOverride,
                   className: cn(
-                    "flex size-12 items-center justify-center rounded-full transition-colors hover:bg-primary hover:text-primary-foreground",
-                    getNestedCardBg(background),
-                    getNestedCardTextColor(background),
+                    "flex size-12 items-center justify-center rounded-full border transition-colors hover:opacity-80",
                     socialLinkClassName
                   )
                 }
@@ -4533,13 +4536,13 @@ function FooterContactCard({
               Pressable,
               {
                 href: link.href,
-                className: cn("text-muted-foreground hover:text-primary", navLinkClassName),
+                className: cn("opacity-80 hover:opacity-100", navLinkClassName),
                 children: link.name
               }
             ) }, idx)) }) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm text-muted-foreground md:flex-row md:items-center", bottomClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center", bottomClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
             /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
             /* @__PURE__ */ jsx(
@@ -4548,7 +4551,7 @@ function FooterContactCard({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 7,
                 variant: "span",
-                linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+                linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
               }
             )
           ] }),
@@ -4611,7 +4614,7 @@ function FooterBackgroundCard({
       patternOpacity,
       className: cn("bg-cover bg-center bg-no-repeat", className),
       style: sectionStyle,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-7xl rounded-lg bg-background p-8 shadow-lg md:p-12", cardClassName), children: [
+      children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-7xl rounded-lg p-8 shadow-lg md:p-12", cardClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4 lg:gap-12", gridClassName), children: [
           (profileImage || tagline || personalMessage || ctaText) && /* @__PURE__ */ jsxs("div", { className: cn("lg:col-span-1", profileSectionClassName), children: [
             (profileImage || tagline) && /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-4", children: [
@@ -4626,33 +4629,33 @@ function FooterBackgroundCard({
               ),
               tagline && /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-medium", taglineClassName), children: tagline })
             ] }),
-            personalMessage && /* @__PURE__ */ jsx("p", { className: cn("mb-6 text-sm leading-relaxed text-muted-foreground", messageClassName), children: personalMessage }),
+            personalMessage && /* @__PURE__ */ jsx("p", { className: cn("mb-6 text-sm leading-relaxed opacity-80", messageClassName), children: personalMessage }),
             ctaText && /* @__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-10 px-4 py-2", ctaClassName),
+                className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md border 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 hover:opacity-80 h-10 px-4 py-2", ctaClassName),
                 children: ctaText
               }
             )
           ] }),
           menuItems && menuItems.length > 0 && menuItems.map((menu, idx) => /* @__PURE__ */ jsxs("div", { className: cn(menuSectionClassName), children: [
-            /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-sm font-medium tracking-wider text-primary uppercase", menuTitleClassName), children: menu.title }),
+            /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-sm font-medium tracking-wider uppercase", menuTitleClassName), children: menu.title }),
             /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: menu.links.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
               Pressable,
               {
                 href: link.url,
-                className: cn("border-b border-transparent text-muted-foreground transition-all duration-300 ease-in-out hover:border-primary hover:text-primary", menuLinkClassName),
+                className: cn("border-b border-transparent opacity-80 transition-all duration-300 ease-in-out hover:opacity-100", menuLinkClassName),
                 children: link.text
               }
             ) }, index)) })
           ] }, idx)),
           (contactTitle || contact) && /* @__PURE__ */ jsxs("div", { className: cn(contactSectionClassName), children: [
-            contactTitle && /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-sm font-medium tracking-wider text-primary uppercase", contactTitleClassName), children: contactTitle }),
+            contactTitle && /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-sm font-medium tracking-wider uppercase", contactTitleClassName), children: contactTitle }),
             contact && /* @__PURE__ */ jsxs("ul", { className: "space-y-3", children: [
-              contact.phone && /* @__PURE__ */ jsx("li", { className: cn("text-muted-foreground", contactItemClassName), children: contact.phone }),
-              contact.email && /* @__PURE__ */ jsx("li", { className: cn("text-muted-foreground", contactItemClassName), children: contact.email }),
-              (contact.location || contact.timezone) && /* @__PURE__ */ jsxs("li", { className: cn("text-muted-foreground", contactItemClassName), children: [
+              contact.phone && /* @__PURE__ */ jsx("li", { className: cn("opacity-80", contactItemClassName), children: contact.phone }),
+              contact.email && /* @__PURE__ */ jsx("li", { className: cn("opacity-80", contactItemClassName), children: contact.email }),
+              (contact.location || contact.timezone) && /* @__PURE__ */ jsxs("li", { className: cn("opacity-80", contactItemClassName), children: [
                 contact.location,
                 contact.location && contact.timezone && " \u2022 ",
                 contact.timezone
@@ -4660,8 +4663,8 @@ function FooterBackgroundCard({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 md:flex-row", bottomClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 text-sm text-muted-foreground md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex flex-col items-center justify-between gap-4 border-t pt-8 md:flex-row", bottomClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 text-sm opacity-80 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
             /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
             /* @__PURE__ */ jsx(
               BrandAttribution,
@@ -4669,7 +4672,7 @@ function FooterBackgroundCard({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 3,
                 variant: "span",
-                linkClassName: "hover:text-primary"
+                linkClassName: "hover:opacity-100"
               }
             )
           ] }),
@@ -4677,7 +4680,7 @@ function FooterBackgroundCard({
             Pressable,
             {
               href: link.url,
-              className: "text-sm text-muted-foreground transition-colors hover:text-primary",
+              className: "text-sm opacity-80 transition-colors hover:opacity-100",
               children: link.text
             },
             idx
@@ -4749,7 +4752,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)
           }
         )
       },
@@ -4777,13 +4780,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
                   }
                 ) })
@@ -4801,21 +4804,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"
                       }
                     ) })
                   ]
@@ -4996,7 +4999,7 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("tracking-tight hover:text-muted-foreground", navLinkClassName),
+        className: cn("tracking-tight hover:opacity-70", navLinkClassName),
         children: item.label
       }
     ) }, idx));
@@ -5010,7 +5013,7 @@ function FooterNewsletterMinimal({
         label: item.label,
         iconNameOverride: item.iconNameOverride,
         iconSize: 14,
-        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", socialLinkClassName)
+        className: cn("group flex items-center gap-1 tracking-tight hover:opacity-70", socialLinkClassName)
       }
     ) }, idx));
   }, [socialLinks, socialLinkClassName]);
@@ -5020,7 +5023,7 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", footerLinkClassName),
+        className: cn("group flex items-center gap-1 tracking-tight hover:opacity-70", footerLinkClassName),
         children: item.label
       }
     ) }, item.label));
@@ -5114,7 +5117,7 @@ function FooterNewsletterMinimal({
                     {
                       componentType: "button",
                       type: "submit",
-                      className: cn("p-2 hover:bg-muted/20", newsletterButtonClassName),
+                      className: cn("p-2 hover:opacity-80", newsletterButtonClassName),
                       asButton: false,
                       disabled: form.isSubmitting,
                       children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
@@ -5140,7 +5143,7 @@ function FooterNewsletterMinimal({
             children: /* @__PURE__ */ jsx("span", { className: cn("text-6xl font-bold tracking-tighter md:text-8xl lg:text-9xl", brandTextClassName), children: brandText })
           }
         ) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-8 text-center text-sm text-muted-foreground", copyrightClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mt-8 text-center text-sm opacity-80", copyrightClassName), children: [
           /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
           /* @__PURE__ */ jsx(
             BrandAttribution,
@@ -5149,7 +5152,7 @@ function FooterNewsletterMinimal({
               optionIndex: 4,
               variant: "div",
               containerClassName: "mt-2",
-              linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+              linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
             }
           )
         ] })
@@ -5212,16 +5215,16 @@ function FooterCtaSocial({
       children: /* @__PURE__ */ jsx("div", { className: cn("relative z-10", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-3xl flex-col items-center gap-2 text-center", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex w-full items-center gap-4", preHeadingWrapperClassName), children: [
           /* @__PURE__ */ jsx("div", { className: cn("h-px flex-1 bg-[linear-gradient(270deg,hsl(var(--primary,0_0%_100%))_0%,hsl(var(--secondary,0_0%_0%))_100%)] opacity-50", decorativeLineClassName) }),
-          /* @__PURE__ */ jsx("p", { className: cn("text-sm text-muted-foreground italic md:text-base", preHeadingClassName), children: preHeading }),
+          /* @__PURE__ */ jsx("p", { className: cn("text-sm opacity-70 italic md:text-base", preHeadingClassName), children: preHeading }),
           /* @__PURE__ */ jsx("div", { className: cn("h-px flex-1 bg-[linear-gradient(270deg,hsl(var(--secondary,0_0%_0%))_0%,hsl(var(--primary,0_0%_100%))_100%)] opacity-50", decorativeLineClassName) })
         ] }),
         /* @__PURE__ */ jsx("h2", { className: cn("py-6 text-5xl font-bold md:text-6xl", headingClassName), children: heading }),
-        /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl text-base text-muted-foreground md:text-lg", descriptionClassName), children: description }),
+        /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl text-base opacity-80 md:text-lg", descriptionClassName), children: description }),
         /* @__PURE__ */ jsxs(
           Pressable,
           {
             href: buttonUrl,
-            className: cn("group relative mt-4 inline-flex items-center gap-2 rounded-lg border bg-background px-8 py-4 text-base font-medium transition-all hover:bg-muted", buttonClassName),
+            className: cn("group relative mt-4 inline-flex items-center gap-2 rounded-lg border px-8 py-4 text-base font-medium transition-all hover:opacity-80", buttonClassName),
             children: [
               /* @__PURE__ */ jsx("span", { children: buttonText }),
               /* @__PURE__ */ jsx(
@@ -5236,15 +5239,15 @@ function FooterCtaSocial({
           }
         ),
         socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-6 pt-8", socialLinksClassName), children: socialLinksContent }),
-        email && /* @__PURE__ */ jsx("p", { className: cn("pt-2 text-sm text-muted-foreground md:text-base", emailClassName), children: /* @__PURE__ */ jsx(
+        email && /* @__PURE__ */ jsx("p", { className: cn("pt-2 text-sm opacity-80 md:text-base", emailClassName), children: /* @__PURE__ */ jsx(
           Pressable,
           {
             href: `mailto:${email}`,
-            className: "transition-colors hover:text-primary",
+            className: "transition-colors hover:opacity-100",
             children: email
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-8 border-t pt-8 text-sm text-muted-foreground", bottomClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", copyrightClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: cn("mt-8 border-t pt-8 text-sm opacity-70", bottomClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", copyrightClassName), children: [
           /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
           /* @__PURE__ */ jsx(
             BrandAttribution,
@@ -5252,7 +5255,7 @@ function FooterCtaSocial({
               internalBrandSlug: "open_site_ai",
               optionIndex: 9,
               variant: "span",
-              linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+              linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
             }
           )
         ] }) })
@@ -5305,11 +5308,11 @@ function FooterNavSocial({
     if (!sections || sections.length === 0) return null;
     return sections.map((section, sectionIdx) => /* @__PURE__ */ jsxs("div", { className: cn(navSectionClassName), children: [
       /* @__PURE__ */ jsx("h3", { className: cn("mb-4 font-semibold", navTitleClassName), children: section.title }),
-      /* @__PURE__ */ jsx("ul", { className: cn("space-y-3 text-sm text-muted-foreground", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: cn(navLinkClassName), children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("ul", { className: cn("space-y-3 text-sm opacity-80", navLinksClassName), children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { className: cn(navLinkClassName), children: /* @__PURE__ */ jsx(
         Pressable,
         {
           href: link.href,
-          className: "hover:text-primary",
+          className: "hover:opacity-100",
           children: link.name
         }
       ) }, linkIdx)) })
@@ -5323,13 +5326,13 @@ function FooterNavSocial({
         href: social.href,
         label: social.label,
         iconNameOverride: social.iconNameOverride,
-        className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName)
+        className: cn("opacity-80 transition-colors hover:opacity-100", socialLinkClassName)
       }
     ) }, idx));
   }, [socialLinks, socialLinkClassName]);
   const legalLinksContent = useMemo(() => {
     if (!legalLinks || legalLinks.length === 0) return null;
-    return legalLinks.map((link, idx) => /* @__PURE__ */ jsx("li", { className: cn(legalLinkClassName), children: /* @__PURE__ */ jsx(Pressable, { href: link.href, className: "hover:text-primary", children: link.name }) }, idx));
+    return legalLinks.map((link, idx) => /* @__PURE__ */ jsx("li", { className: cn(legalLinkClassName), children: /* @__PURE__ */ jsx(Pressable, { href: link.href, className: "hover:opacity-100", children: link.name }) }, idx));
   }, [legalLinks, legalLinkClassName]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -5356,14 +5359,14 @@ function FooterNavSocial({
           /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-between", rightColumnClassName), children: [
             (newsletterHeading || newsletterDescription) && /* @__PURE__ */ jsxs("div", { className: cn("mb-8", newsletterClassName), children: [
               newsletterHeading && /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-lg font-semibold", newsletterHeadingClassName), children: newsletterHeading }),
-              newsletterDescription && /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm text-muted-foreground", newsletterDescriptionClassName), children: newsletterDescription }),
+              newsletterDescription && /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm opacity-80", newsletterDescriptionClassName), children: newsletterDescription }),
               /* @__PURE__ */ jsxs("div", { className: cn("flex max-w-md gap-2", newsletterFormClassName), children: [
                 /* @__PURE__ */ jsx(
                   "input",
                   {
                     type: "email",
                     placeholder: newsletterPlaceholder,
-                    className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                   }
                 ),
                 newsletterButtonText && /* @__PURE__ */ jsx(
@@ -5382,7 +5385,7 @@ function FooterNavSocial({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm text-muted-foreground md:flex-row md:items-center", bottomClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center", bottomClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
             /* @__PURE__ */ jsx(FooterCopyright, { copyright }),
             /* @__PURE__ */ jsx(
@@ -5391,7 +5394,7 @@ function FooterNavSocial({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 1,
                 variant: "span",
-                linkClassName: "underline underline-offset-4 transition-colors hover:text-primary"
+                linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
               }
             )
           ] }),