@opensite/ui 2.3.7 → 2.3.9

package/dist/index.js

@@ -2016,7 +2016,7 @@ function AboutMissionPrinciples({
   className,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "xl",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
@@ -2058,7 +2058,9 @@ function AboutMissionPrinciples({
         children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn("relative rounded-lg border p-6 transition-colors"),
+            className: cn(
+              "relative rounded-lg border p-6 bg-card text-card-foreground"
+            ),
             children: [
               principle.number && /* @__PURE__ */ jsx(
                 "div",
@@ -2071,7 +2073,7 @@ function AboutMissionPrinciples({
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-                principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
+                principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold pr-10 text-pretty", children: principle.title }) : principle.title),
                 principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-pretty text-lg", children: principle.description }) : principle.description)
               ] })
             ]
@@ -2140,11 +2142,11 @@ function AboutMissionPrinciples({
           {
             className: cn(
               "mt-6 md:mt-24 p-6 lg:p-12",
-              "bg-muted text-muted-foreground",
-              "rounded-xl shadow-lg border",
+              "bg-accent text-accent-foreground",
+              "rounded-xl shadow-xl border",
               visionClassName
             ),
-            children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
+            children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-8 lg:grid-cols-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
                 visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsx(
                   "h3",
@@ -2502,28 +2504,6 @@ function CommunityInitiatives({
     },
     []
   );
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
-        children: actions.map((action, idx) => /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            href: action.href,
-            onClick: action.onClick,
-            variant: action.variant || "default",
-            size: action.size || "lg",
-            asButton: true,
-            children: action.label
-          },
-          idx
-        ))
-      }
-    );
-  }, [actionsSlot, actions, actionsClassName]);
   const categoriesContent = useMemo(() => {
     if (categoriesSlot) return categoriesSlot;
     if (!categories || categories.length === 0) return null;
@@ -2545,22 +2525,27 @@ function CommunityInitiatives({
                 children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
               }
             ) }),
-            /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid", children: categories.map((category) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
               TabsTrigger,
               {
                 value: category.id,
-                className: "px-3 py-2.5 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                className: cn(
+                  "px-3 py-2.5 cursor-pointer",
+                  "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+                  "hover:bg-muted hover:text-muted-foreground",
+                  "transition-all duration-500"
+                ),
                 children: category.title
               },
               category.id
             )) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted")), children: currentCategory?.description }) }),
+          /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
           categories.map((category) => /* @__PURE__ */ jsx(
             TabsContent,
             {
               value: category.id,
-              className: "space-y-12",
+              className: "space-y-12 md:space-y-24",
               children: category.initiatives.map((initiative, index) => {
                 const isEven = index % 2 === 0;
                 return /* @__PURE__ */ jsxs(
@@ -2577,47 +2562,13 @@ function CommunityInitiatives({
                           ),
                           children: [
                             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                              /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: cn(
-                                    "rounded-md p-2",
-                                    getNestedCardBg(background, "muted")
-                                  ),
-                                  children: /* @__PURE__ */ jsx(
-                                    DynamicIcon,
-                                    {
-                                      name: initiative.icon,
-                                      size: 24,
-                                      className: cn(getAccentColor(background))
-                                    }
-                                  )
-                                }
-                              ),
+                              /* @__PURE__ */ jsx("div", { className: cn("rounded-md p-2"), children: /* @__PURE__ */ jsx(DynamicIcon, { name: initiative.icon, size: 24 }) }),
                               /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
                             ] }),
-                            /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
+                            /* @__PURE__ */ jsx("p", { className: "relative", children: initiative.description }),
                             initiative.metrics && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                              /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: cn(
-                                    "text-2xl font-bold",
-                                    getAccentColor(background)
-                                  ),
-                                  children: metric.value
-                                }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: cn(
-                                    "mt-1 text-xs",
-                                    getTextColor(background, "muted")
-                                  ),
-                                  children: metric.label
-                                }
-                              )
+                              /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-bold"), children: metric.value }),
+                              /* @__PURE__ */ jsx("div", { className: cn("mt-1 text-xs"), children: metric.label })
                             ] }, i)) })
                           ]
                         }
@@ -2629,7 +2580,7 @@ function CommunityInitiatives({
                             "md:col-span-5",
                             isEven ? "md:order-2" : "md:order-1"
                           ),
-                          children: /* @__PURE__ */ jsx("div", { className: "relative aspect-4/3 overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
+                          children: /* @__PURE__ */ jsx("div", { className: "relative aspect-video overflow-hidden rounded-xl shadow-xl", children: /* @__PURE__ */ jsx(
                             Img,
                             {
                               src: initiative.image,
@@ -2650,28 +2601,21 @@ function CommunityInitiatives({
                             Card,
                             {
                               className: cn(
-                                "flex h-full min-h-[280px] w-full items-center justify-center",
-                                getNestedCardBg(background, "subtle")
+                                "flex h-full min-h-[280px] w-full items-center justify-center"
                               ),
-                              children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 text-center", children: [
+                              children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 text-center flex flex-col items-center gap-4", children: [
                                 /* @__PURE__ */ jsx(
                                   DynamicIcon,
                                   {
                                     name: initiative.icon,
                                     size: 64,
                                     className: cn(
-                                      "mx-auto mb-4",
-                                      getTextColor(background, "muted"),
+                                      "mx-auto text-card-foreground",
                                       "opacity-50"
                                     )
                                   }
                                 ),
-                                /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
-                                  "Learn more about our",
-                                  " ",
-                                  initiative.title.toLowerCase(),
-                                  " initiative"
-                                ] })
+                                /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
                               ] })
                             }
                           )
@@ -2712,7 +2656,7 @@ function CommunityInitiatives({
           "div",
           {
             className: cn(
-              "mx-auto mb-8 md:mb-16 max-w-3xl space-y-4 text-center",
+              "mx-auto mb-8 md:mb-16 max-w-3xl space-y-4 flex flex-col items-center",
               headerClassName
             ),
             children: [
@@ -2721,41 +2665,65 @@ function CommunityInitiatives({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-bold tracking-tight md:text-4xl",
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance text-center",
                     headingClassName
                   ),
                   children: heading
                 }
               ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(descriptionClassName), children: description }) : description)
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-lg text-balance text-center",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description)
             ]
           }
         ),
         categoriesContent,
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
-          ctaBadgeText && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "mb-8 inline-flex items-center justify-center rounded-full p-1"
-              ),
-              children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
-            }
-          ),
-          ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
-          ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mx-auto mb-8 max-w-2xl",
-                getTextColor(background, "muted"),
-                ctaDescriptionClassName
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-10 md:mt-24 p-6 md:p-16",
+              "text-center flex flex-col items-center",
+              "bg-muted text-muted-foreground",
+              "rounded-2xl shadow-lg",
+              ctaClassName
+            ),
+            children: [
+              ctaBadgeText && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-8 inline-flex items-center justify-center rounded-full p-1"
+                  ),
+                  children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
+                }
               ),
-              children: ctaDescription
-            }
-          ) : ctaDescription),
-          actionsContent
-        ] })
+              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
+              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
+                  children: ctaDescription
+                }
+              ) : ctaDescription),
+              /* @__PURE__ */ jsx(
+                BlockActions,
+                {
+                  actions,
+                  actionsSlot,
+                  actionsClassName
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );