@opensite/ui 1.5.4 → 1.5.6

package/dist/registry.cjs

@@ -4020,7 +4020,7 @@ function AboutLocationInfoHero({
         "div",
         {
           className: cn(
-            "flex flex-col gap-6 lg:flex-row lg:items-center lg:gap-12",
+            "flex flex-col gap-12 lg:flex-row lg:items-center",
             contentPosition === "right" && "lg:flex-row-reverse",
             mobileStackOrder === "images-first" && "flex-col-reverse"
           ),
@@ -24495,7 +24495,7 @@ function FooterNewsletterMinimal({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 flex flex-col justify-between gap-15 lg:flex-row", newsletterSectionClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
+          formConfig?.token && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
             newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { children: newsletterLabel }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               forms.Form,
@@ -27465,66 +27465,39 @@ function FeatureIntegrationCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderIntegrationIcon = React52.useCallback((integration) => {
-    if (integration.iconSlot) return integration.iconSlot;
-    if (!integration.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: integration.icon,
-        alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
-        className: cn("h-auto w-7", integration.iconClassName),
-        loading: "lazy",
-        optixFlowConfig
-      }
-    );
-  }, [optixFlowConfig]);
-  const renderLinkLabel = React52.useCallback((integration) => {
-    if (integration.linkLabelSlot) return integration.linkLabelSlot;
-    if (!integration.linkLabel) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        className: cn(
-          "flex items-center gap-1.5 rounded-full border px-3 py-2 text-sm font-medium transition-colors",
-          getBorderColor(background),
-          getAccentColor(background),
-          integration.linkLabelClassName
-        ),
-        children: [
-          integration.linkLabel,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14 })
-        ]
-      }
-    );
-  }, [background]);
+  const renderIntegrationIcon = React52.useCallback(
+    (integration) => {
+      if (integration.iconSlot) return integration.iconSlot;
+      if (!integration.icon) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-40 max-w-full shrink-0 items-center justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: integration.icon,
+          alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
+          className: cn(
+            "h-full w-full object-contain",
+            integration.iconClassName
+          ),
+          loading: "lazy",
+          optixFlowConfig
+        }
+      ) });
+    },
+    [optixFlowConfig]
+  );
   const integrationsContent = React52.useMemo(() => {
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
     return integrations.map((integration, index) => {
       const iconContent = renderIntegrationIcon(integration);
-      const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          iconContent && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "grid size-12 shrink-0 place-content-center rounded-lg border bg-background/50",
-                getBorderColor(background)
-              ),
-              children: iconContent
-            }
-          ),
-          linkLabelContent
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start gap-2 justify-between", children: iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex"), children: iconContent }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
           integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h3",
             {
               className: cn(
                 "font-semibold md:text-lg",
-                getTextColor(background),
                 integration.titleClassName
               ),
               children: integration.title
@@ -27534,7 +27507,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "font-semibold md:text-lg",
-                getTextColor(background),
                 integration.titleClassName
               ),
               children: integration.title
@@ -27545,7 +27517,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "text-sm leading-relaxed md:text-base",
-                getTextColor(background, "muted"),
                 integration.descriptionClassName
               ),
               children: integration.description
@@ -27555,7 +27526,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "text-sm leading-relaxed md:text-base",
-                getTextColor(background, "muted"),
                 integration.descriptionClassName
               ),
               children: integration.description
@@ -27564,8 +27534,7 @@ function FeatureIntegrationCards({
         ] })
       ] });
       const cardClasses = cn(
-        "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300",
-        getBorderColor(background),
+        "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300 bg-card card-text-foreground",
         "hover:shadow-lg",
         cardClassName,
         integration.className
@@ -27583,7 +27552,7 @@ function FeatureIntegrationCards({
       }
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClasses, children: cardContent }, index);
     });
-  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel, background]);
+  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -27595,11 +27564,47 @@ function FeatureIntegrationCards({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-12 flex max-w-3xl flex-col items-center gap-4 text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", gridClassName), children: integrationsContent })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-12 flex max-w-3xl flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 sm:grid-cols-2 lg:grid-cols-4",
+              gridClassName
+            ),
+            children: integrationsContent
+          }
+        )
       ]
     }
   );
@@ -44099,7 +44104,7 @@ function FooterNewsletterContact({
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-x-16 gap-y-8 md:grid-cols-2 xl:grid-cols-4", children: [
-          (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          formConfig?.token && (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
             newsletterTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-3xl font-medium font-serif leading-none", children: newsletterTitle }),
             newsletterDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-light leading-normal", children: newsletterDescription }),
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -44538,43 +44543,45 @@ function FooterAccordionSocial({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: newsletterDescription })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              forms.Form,
-              {
-                form,
-                action: formConfig?.endpoint,
-                method: formMethod,
-                className: "flex gap-2",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: "Email Address",
-                      error: meta.touched && !!meta.error,
-                      className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                      "aria-label": "Email Address"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-                      asButton: false,
-                      disabled: form.isSubmitting,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-                    }
-                  )
-                ]
-              }
-            )
+            formConfig?.token && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: newsletterDescription })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                forms.Form,
+                {
+                  form,
+                  action: formConfig?.endpoint,
+                  method: formMethod,
+                  className: "flex gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
+                      TextInput,
+                      {
+                        ...field,
+                        type: "email",
+                        placeholder: "Email Address",
+                        error: meta.touched && !!meta.error,
+                        className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        "aria-label": "Email Address"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Pressable,
+                      {
+                        componentType: "button",
+                        type: "submit",
+                        className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+                        asButton: false,
+                        disabled: form.isSubmitting,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
           ] }),
           footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-16 gap-y-8 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-bold", children: section.title }),
@@ -44677,31 +44684,40 @@ function FooterInfoCardsAccordion({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-10", contentClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-12 lg:space-y-14", contentClassName), children: [
         footerDetails?.image?.src && (newsletterTitle || newsletterDescription || subscribeText) && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "grid items-center gap-x-20 gap-y-5 lg:grid-cols-2",
+              "grid gap-6 rounded-3xl border bg-card/40 p-4 sm:p-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:items-center lg:gap-10 lg:p-8",
               newsletterGridClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(newsletterImageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 2, className: "overflow-hidden rounded-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  src: footerDetails.image.src,
-                  alt: footerDetails.image.alt || "",
-                  className: "block h-full w-full object-cover object-center",
-                  optixFlowConfig
+                  className: cn(
+                    "overflow-hidden rounded-2xl bg-muted/30",
+                    newsletterImageClassName
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 3 / 2, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: footerDetails.image.src,
+                      alt: footerDetails.image.alt || "",
+                      className: "block h-full w-full object-cover object-center",
+                      optixFlowConfig
+                    }
+                  ) })
                 }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-5", newsletterContentClassName), children: [
-                (newsletterTitle || newsletterDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-6", newsletterContentClassName), children: [
+                (newsletterTitle || newsletterDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 text-pretty", children: [
                   newsletterTitle && /* @__PURE__ */ jsxRuntime.jsx(
                     "h3",
                     {
                       className: cn(
-                        "text-4xl font-semibold leading-snug",
+                        "text-2xl font-semibold leading-tight tracking-tight sm:text-3xl lg:text-4xl",
                         newsletterTitleClassName
                       ),
                       children: newsletterTitle
@@ -44711,7 +44727,7 @@ function FooterInfoCardsAccordion({
                     "p",
                     {
                       className: cn(
-                        "leading-normal",
+                        "text-sm leading-relaxed text-muted-foreground sm:text-base",
                         newsletterDescriptionClassName
                       ),
                       children: newsletterDescription
@@ -44722,7 +44738,7 @@ function FooterInfoCardsAccordion({
                   "form",
                   {
                     className: cn(
-                      "flex items-start gap-4",
+                      "flex flex-col gap-3 sm:flex-row sm:items-center",
                       newsletterFormClassName
                     ),
                     onSubmit: handleSubmit,
@@ -44734,7 +44750,7 @@ function FooterInfoCardsAccordion({
                           value: email,
                           onChange: (e) => setEmail(e.target.value),
                           placeholder: emailPlaceholder || "Email Address",
-                          className: "flex h-10 flex-1 rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                          className: "h-11 w-full rounded-full border border-input bg-background px-4 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:flex-1"
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -44744,20 +44760,21 @@ function FooterInfoCardsAccordion({
                           type: "submit",
                           variant: "default",
                           asButton: true,
+                          className: "h-11 w-full rounded-full px-6 text-sm font-semibold sm:w-auto",
                           children: subscribeText
                         }
                       )
                     ]
                   }
                 ),
-                (termsText || termsLinkText || privacyLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm opacity-80", children: [
+                (termsText || termsLinkText || privacyLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs leading-relaxed text-muted-foreground sm:text-sm", children: [
                   termsText,
                   " ",
                   termsLinkText && /* @__PURE__ */ jsxRuntime.jsx(
                     Pressable,
                     {
                       href: termsLinkUrl || "#",
-                      className: "underline underline-offset-2",
+                      className: "underline underline-offset-4 transition-colors hover:text-foreground",
                       children: termsLinkText
                     }
                   ),
@@ -44768,7 +44785,7 @@ function FooterInfoCardsAccordion({
                     Pressable,
                     {
                       href: privacyLinkUrl || "#",
-                      className: "underline underline-offset-2",
+                      className: "underline underline-offset-4 transition-colors hover:text-foreground",
                       children: privacyLinkText
                     }
                   ),
@@ -44782,26 +44799,29 @@ function FooterInfoCardsAccordion({
           "div",
           {
             className: cn(
-              "grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4",
+              "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
               infoCardsGridClassName
             ),
             children: infoItems.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
               Card,
               {
-                className: cn("rounded-lg px-5 py-6", infoCardClassName),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex items-start gap-3 p-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 basis-7 flex items-center justify-center mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 space-y-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm leading-relaxed", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-base font-semibold leading-relaxed", children: item.title }),
+                className: cn(
+                  "group rounded-2xl border-border/60 bg-card/40 px-5 py-5 shadow-none transition-all hover:border-border/80 hover:bg-card/60 hover:shadow-sm",
+                  infoCardClassName
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "flex items-start gap-4 p-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex size-10 items-center justify-center rounded-full border bg-background/80 text-muted-foreground transition-colors group-hover:text-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 18 }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "text-sm font-semibold", children: item.title }),
                     item.link ? /* @__PURE__ */ jsxRuntime.jsx(
                       Pressable,
                       {
                         href: item.link,
-                        className: "break-word opacity-80 underline",
+                        className: "text-sm text-muted-foreground underline underline-offset-4 transition-colors hover:text-foreground",
                         children: item.text
                       }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: item.text })
-                  ] }) })
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: item.text })
+                  ] })
                 ] })
               },
               idx
@@ -44812,7 +44832,7 @@ function FooterInfoCardsAccordion({
           "div",
           {
             className: cn(
-              "grid grid-cols-1 gap-8 lg:grid-cols-5 xl:grid-cols-2",
+              "grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,2fr)]",
               brandGridClassName
             ),
             children: [
@@ -44820,7 +44840,7 @@ function FooterInfoCardsAccordion({
                 "div",
                 {
                   className: cn(
-                    "space-y-5 lg:col-span-2 xl:col-span-1",
+                    "space-y-5",
                     brandColumnClassName
                   ),
                   children: [
@@ -44832,7 +44852,7 @@ function FooterInfoCardsAccordion({
                           url: footerDetails.logoUrl || "/"
                         },
                         logoClassName: cn(
-                          "inline-block w-full max-w-80",
+                          "inline-block w-full max-w-64",
                           logoClassName
                         ),
                         optixFlowConfig
@@ -44842,7 +44862,7 @@ function FooterInfoCardsAccordion({
                       "p",
                       {
                         className: cn(
-                          "max-w-md text-sm leading-relaxed opacity-80",
+                          "max-w-md text-sm leading-relaxed text-muted-foreground",
                           brandDescriptionClassName
                         ),
                         children: footerDetails.description
@@ -44855,16 +44875,16 @@ function FooterInfoCardsAccordion({
                 "div",
                 {
                   className: cn(
-                    "lg:col-span-3 xl:col-span-1",
+                    "space-y-6",
                     accordionColumnClassName
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-base font-bold", children: section.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3 text-sm opacity-80", children: section.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-sm font-semibold tracking-wide", children: section.title }),
+                    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5 text-sm text-muted-foreground", children: section.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
                       Pressable,
                       {
                         href: item.link,
-                        className: "hover:opacity-100",
+                        className: "transition-colors hover:text-foreground",
                         children: item.text
                       }
                     ) }, idx)) })
@@ -44878,30 +44898,31 @@ function FooterInfoCardsAccordion({
           "div",
           {
             className: cn(
-              "flex flex-wrap justify-between gap-6",
+              "flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between",
               paymentSocialRowClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-5", children: paymentPlatforms && paymentPlatforms.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: paymentPlatforms && paymentPlatforms.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                 "ul",
                 {
                   className: cn(
                     "flex flex-wrap items-center gap-3",
                     paymentMethodsClassName
                   ),
-                  children: paymentPlatforms.map((platform, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(PaymentPlatformIcon, { platform, size: 28 }) }, idx))
+                  children: paymentPlatforms.map((platform, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(PaymentPlatformIcon, { platform, size: 26 }) }, idx))
                 }
               ) }),
-              socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-wrap gap-4", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-wrap gap-3", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
                 SocialLinkIcon,
                 {
                   href: social.href,
                   label: social.label,
                   iconNameOverride: social.iconNameOverride,
-                  variant: "default",
+                  variant: "outline",
                   size: "icon",
                   asButton: true,
-                  className: "rounded-full"
+                  className: "rounded-full border shadow-sm transition-shadow hover:shadow-md",
+                  iconSize: 18
                 }
               ) }, idx)) })
             ]
@@ -44911,7 +44932,7 @@ function FooterInfoCardsAccordion({
           "div",
           {
             className: cn(
-              "flex flex-wrap justify-between gap-6 border-t pt-8",
+              "flex flex-col gap-6 border-t pt-8 md:flex-row md:items-center md:justify-between",
               bottomClassName
             ),
             children: [
@@ -44919,7 +44940,7 @@ function FooterInfoCardsAccordion({
                 "div",
                 {
                   className: cn(
-                    "flex flex-wrap items-center gap-4 text-sm opacity-80",
+                    "flex flex-wrap items-center gap-4 text-sm text-muted-foreground",
                     copyrightClassName
                   ),
                   children: [