@opensite/ui 1.4.0 → 1.4.2

package/dist/footer-animated-social.cjs

@@ -1145,6 +1145,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
       Pressable,
       {
         ref,
+        href,
         "aria-label": accessibleLabel,
         className: cn(
           "inline-flex items-center justify-center transition-colors",
@@ -1603,7 +1604,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 +1632,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 +1656,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.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import { F as FooterSocialLink } from './types-Cs1jk79n.cjs';
 import 'react/jsx-runtime';
-import './blocks-DP3Vofl4.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/footer-animated-social.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import { F as FooterSocialLink } from './types-Cs1jk79n.js';
 import 'react/jsx-runtime';
-import './blocks-XLPGq8A5.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/footer-animated-social.js

@@ -1124,6 +1124,7 @@ var SocialLinkIcon = React.forwardRef(
       Pressable,
       {
         ref,
+        href,
         "aria-label": accessibleLabel,
         className: cn(
           "inline-flex items-center justify-center transition-colors",
@@ -1582,7 +1583,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 +1611,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 +1635,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"
                       }
                     ) })
                   ]

package/dist/footer-background-card.cjs

@@ -1406,7 +1406,7 @@ function FooterBackgroundCard({
       patternOpacity,
       className: cn("bg-cover bg-center bg-no-repeat", className),
       style: sectionStyle,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-7xl rounded-lg bg-background p-8 shadow-lg md:p-12", cardClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-7xl rounded-lg p-8 shadow-lg md:p-12", cardClassName), children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("lg:col-span-1", profileSectionClassName), children: [
             (profileImage || tagline) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-4", children: [
@@ -1421,33 +1421,33 @@ function FooterBackgroundCard({
               ),
               tagline && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("text-2xl font-medium", taglineClassName), children: tagline })
             ] }),
-            personalMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 text-sm leading-relaxed text-muted-foreground", messageClassName), children: personalMessage }),
+            personalMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 text-sm leading-relaxed opacity-80", messageClassName), children: personalMessage }),
             ctaText && /* @__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-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__ */ jsxRuntime.jsxs("div", { className: cn(menuSectionClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-sm font-medium tracking-wider text-primary uppercase", menuTitleClassName), children: menu.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-sm font-medium tracking-wider uppercase", menuTitleClassName), children: menu.title }),
             /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3", children: menu.links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn(contactSectionClassName), children: [
-            contactTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-sm font-medium tracking-wider text-primary uppercase", contactTitleClassName), children: contactTitle }),
+            contactTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-sm font-medium tracking-wider uppercase", contactTitleClassName), children: contactTitle }),
             contact && /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-3", children: [
-              contact.phone && /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("text-muted-foreground", contactItemClassName), children: contact.phone }),
-              contact.email && /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("text-muted-foreground", contactItemClassName), children: contact.email }),
-              (contact.location || contact.timezone) && /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("text-muted-foreground", contactItemClassName), children: [
+              contact.phone && /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("opacity-80", contactItemClassName), children: contact.phone }),
+              contact.email && /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("opacity-80", contactItemClassName), children: contact.email }),
+              (contact.location || contact.timezone) && /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("opacity-80", contactItemClassName), children: [
                 contact.location,
                 contact.location && contact.timezone && " \u2022 ",
                 contact.timezone
@@ -1455,8 +1455,8 @@ function FooterBackgroundCard({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
             /* @__PURE__ */ jsxRuntime.jsx(
               BrandAttribution,
@@ -1464,7 +1464,7 @@ function FooterBackgroundCard({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 3,
                 variant: "span",
-                linkClassName: "hover:text-primary"
+                linkClassName: "hover:opacity-100"
               }
             )
           ] }),
@@ -1472,7 +1472,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

package/dist/footer-background-card.d.cts

@@ -1,9 +1,9 @@
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/footer-background-card.d.ts

@@ -1,9 +1,9 @@
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/footer-background-card.js

@@ -1385,7 +1385,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: [
@@ -1400,33 +1400,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
@@ -1434,8 +1434,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,
@@ -1443,7 +1443,7 @@ function FooterBackgroundCard({
                 internalBrandSlug: "open_site_ai",
                 optionIndex: 3,
                 variant: "span",
-                linkClassName: "hover:text-primary"
+                linkClassName: "hover:opacity-100"
               }
             )
           ] }),
@@ -1451,7 +1451,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

package/dist/footer-brand-description.cjs

@@ -1591,6 +1591,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
       Pressable,
       {
         ref,
+        href,
         "aria-label": accessibleLabel,
         className: cn(
           "inline-flex items-center justify-center transition-colors",
@@ -1638,10 +1639,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__ */ jsxRuntime.jsx(
     Section,
@@ -1651,6 +1653,7 @@ function FooterBrandDescription({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(contentClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1689,7 +1692,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
@@ -1699,7 +1702,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__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1709,7 +1712,7 @@ function FooterBrandDescription({
                             label: social.label,
                             iconNameOverride: social.iconNameOverride,
                             className: cn(
-                              "font-medium hover:text-primary",
+                              "font-medium hover:opacity-100",
                               socialLinkClassName
                             )
                           }
@@ -1723,7 +1726,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__ */ jsxRuntime.jsxs("div", { className: cn(navSectionClassName), children: [
@@ -1732,14 +1735,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__ */ jsxRuntime.jsx(
                           "li",
                           {
                             className: cn(
-                              "font-medium hover:text-primary",
+                              "font-medium hover:opacity-100",
                               navLinkClassName
                             ),
                             children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
@@ -1758,7 +1761,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: [
@@ -1777,7 +1780,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"
                       }
                     )
                   ]
@@ -1793,7 +1796,7 @@ function FooterBrandDescription({
                   children: legalLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                     "li",
                     {
-                      className: cn("hover:text-primary", legalLinkClassName),
+                      className: cn("hover:opacity-100", legalLinkClassName),
                       children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, children: link.name })
                     },
                     idx

package/dist/footer-brand-description.d.cts

@@ -1,10 +1,10 @@
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import { F as FooterSocialLink } from './types-Cs1jk79n.cjs';
 import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
@@ -98,6 +98,10 @@ interface FooterBrandDescriptionProps {
     pattern?: PatternName;
     /** Pattern opacity (0-1) */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /** Optional Optix Flow configuration for @page-speed/img */
     optixFlowConfig?: OptixFlowConfig;
 }
@@ -108,6 +112,6 @@ interface FooterBrandDescriptionProps {
  * with multi-column navigation on the right. Ideal for brand-focused websites, startups,
  * and businesses that want to emphasize their identity and social presence in the footer.
  */
-declare function FooterBrandDescription({ logo, sections, description, socialLinks, copyright, legalLinks, className, contentClassName, layoutClassName, brandColumnClassName, logoWrapperClassName, logoClassName, descriptionClassName, socialLinksClassName, socialLinkClassName, navGridClassName, navSectionClassName, navTitleClassName, navLinksClassName, navLinkClassName, bottomClassName, copyrightClassName, legalLinksClassName, legalLinkClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterBrandDescriptionProps): React.JSX.Element;
+declare function FooterBrandDescription({ logo, sections, description, socialLinks, copyright, legalLinks, className, contentClassName, layoutClassName, brandColumnClassName, logoWrapperClassName, logoClassName, descriptionClassName, socialLinksClassName, socialLinkClassName, navGridClassName, navSectionClassName, navTitleClassName, navLinksClassName, navLinkClassName, bottomClassName, copyrightClassName, legalLinksClassName, legalLinkClassName, background, pattern, patternOpacity, optixFlowConfig, containerClassName, spacing, }: FooterBrandDescriptionProps): React.JSX.Element;
 
 export { FooterBrandDescription, type FooterBrandDescriptionLink, type FooterBrandDescriptionProps, type FooterBrandDescriptionSection };

package/dist/footer-brand-description.d.ts

@@ -1,10 +1,10 @@
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import { F as FooterSocialLink } from './types-Cs1jk79n.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
@@ -98,6 +98,10 @@ interface FooterBrandDescriptionProps {
     pattern?: PatternName;
     /** Pattern opacity (0-1) */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /** Optional Optix Flow configuration for @page-speed/img */
     optixFlowConfig?: OptixFlowConfig;
 }
@@ -108,6 +112,6 @@ interface FooterBrandDescriptionProps {
  * with multi-column navigation on the right. Ideal for brand-focused websites, startups,
  * and businesses that want to emphasize their identity and social presence in the footer.
  */
-declare function FooterBrandDescription({ logo, sections, description, socialLinks, copyright, legalLinks, className, contentClassName, layoutClassName, brandColumnClassName, logoWrapperClassName, logoClassName, descriptionClassName, socialLinksClassName, socialLinkClassName, navGridClassName, navSectionClassName, navTitleClassName, navLinksClassName, navLinkClassName, bottomClassName, copyrightClassName, legalLinksClassName, legalLinkClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: FooterBrandDescriptionProps): React.JSX.Element;
+declare function FooterBrandDescription({ logo, sections, description, socialLinks, copyright, legalLinks, className, contentClassName, layoutClassName, brandColumnClassName, logoWrapperClassName, logoClassName, descriptionClassName, socialLinksClassName, socialLinkClassName, navGridClassName, navSectionClassName, navTitleClassName, navLinksClassName, navLinkClassName, bottomClassName, copyrightClassName, legalLinksClassName, legalLinkClassName, background, pattern, patternOpacity, optixFlowConfig, containerClassName, spacing, }: FooterBrandDescriptionProps): React.JSX.Element;
 
 export { FooterBrandDescription, type FooterBrandDescriptionLink, type FooterBrandDescriptionProps, type FooterBrandDescriptionSection };

package/dist/footer-brand-description.js

@@ -1570,6 +1570,7 @@ var SocialLinkIcon = React.forwardRef(
       Pressable,
       {
         ref,
+        href,
         "aria-label": accessibleLabel,
         className: cn(
           "inline-flex items-center justify-center transition-colors",
@@ -1617,10 +1618,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,
@@ -1630,6 +1632,7 @@ function FooterBrandDescription({
       pattern,
       patternOpacity,
       className: cn(className),
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: cn(contentClassName), children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -1668,7 +1671,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
@@ -1678,7 +1681,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(
@@ -1688,7 +1691,7 @@ function FooterBrandDescription({
                             label: social.label,
                             iconNameOverride: social.iconNameOverride,
                             className: cn(
-                              "font-medium hover:text-primary",
+                              "font-medium hover:opacity-100",
                               socialLinkClassName
                             )
                           }
@@ -1702,7 +1705,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: [
@@ -1711,14 +1714,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 })
@@ -1737,7 +1740,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: [
@@ -1756,7 +1759,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"
                       }
                     )
                   ]
@@ -1772,7 +1775,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