@opensite/ui 2.3.7 → 2.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/about-mission-dual-image.cjs +39 -32
  2. package/dist/about-mission-dual-image.js +40 -33
  3. package/dist/about-mission-principles.cjs +8 -6
  4. package/dist/about-mission-principles.js +8 -6
  5. package/dist/about-streamline-team.cjs +33 -21
  6. package/dist/about-streamline-team.js +33 -21
  7. package/dist/community-initiatives.cjs +849 -875
  8. package/dist/community-initiatives.js +848 -874
  9. package/dist/components.cjs +76 -138
  10. package/dist/components.js +76 -138
  11. package/dist/index.cjs +76 -108
  12. package/dist/index.js +76 -108
  13. package/dist/registry.cjs +1777 -1790
  14. package/dist/registry.js +563 -576
  15. package/package.json +1 -1
package/dist/components.js CHANGED
@@ -52,36 +52,6 @@ function getNestedCardTextColor(parentBg, options) {
52
52
  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
53
53
  return isDark ? "text-foreground" : "";
54
54
  }
55
- function getTextColor(parentBg, variant = "default", options) {
56
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
57
- if (isDark) {
58
- switch (variant) {
59
- case "default":
60
- return "text-foreground";
61
- case "muted":
62
- return "text-foreground/80";
63
- case "subtle":
64
- return "text-foreground/60";
65
- case "accent":
66
- return "text-accent-foreground";
67
- }
68
- } else {
69
- switch (variant) {
70
- case "default":
71
- return "text-foreground";
72
- case "muted":
73
- return "text-muted-foreground";
74
- case "subtle":
75
- return "text-muted-foreground/70";
76
- case "accent":
77
- return "text-primary";
78
- }
79
- }
80
- }
81
- function getAccentColor(parentBg, options) {
82
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
83
- return isDark ? "text-accent-foreground" : "text-primary";
84
- }
85
55
  var maxWidthStyles = {
86
56
  sm: "max-w-screen-sm",
87
57
  md: "max-w-screen-md",
@@ -1984,7 +1954,7 @@ function AboutMissionPrinciples({
1984
1954
  className,
1985
1955
  background,
1986
1956
  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
1987
- spacing = "xl",
1957
+ spacing = "lg",
1988
1958
  pattern,
1989
1959
  patternOpacity
1990
1960
  }) {
@@ -2026,7 +1996,9 @@ function AboutMissionPrinciples({
2026
1996
  children: principles.map((principle, idx) => /* @__PURE__ */ jsxs(
2027
1997
  "div",
2028
1998
  {
2029
- className: cn("relative rounded-lg border p-6 transition-colors"),
1999
+ className: cn(
2000
+ "relative rounded-lg border p-6 bg-card text-card-foreground"
2001
+ ),
2030
2002
  children: [
2031
2003
  principle.number && /* @__PURE__ */ jsx(
2032
2004
  "div",
@@ -2039,7 +2011,7 @@ function AboutMissionPrinciples({
2039
2011
  }
2040
2012
  ),
2041
2013
  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
2042
- principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
2014
+ principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold pr-10 text-pretty", children: principle.title }) : principle.title),
2043
2015
  principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-pretty text-lg", children: principle.description }) : principle.description)
2044
2016
  ] })
2045
2017
  ]
@@ -2108,11 +2080,11 @@ function AboutMissionPrinciples({
2108
2080
  {
2109
2081
  className: cn(
2110
2082
  "mt-6 md:mt-24 p-6 lg:p-12",
2111
- "bg-muted text-muted-foreground",
2112
- "rounded-xl shadow-lg border",
2083
+ "bg-accent text-accent-foreground",
2084
+ "rounded-xl shadow-xl border",
2113
2085
  visionClassName
2114
2086
  ),
2115
- children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
2087
+ children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-8 lg:grid-cols-3", children: [
2116
2088
  /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2", children: [
2117
2089
  visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsx(
2118
2090
  "h3",
@@ -2470,28 +2442,6 @@ function CommunityInitiatives({
2470
2442
  },
2471
2443
  []
2472
2444
  );
2473
- const actionsContent = useMemo(() => {
2474
- if (actionsSlot) return actionsSlot;
2475
- if (!actions || actions.length === 0) return null;
2476
- return /* @__PURE__ */ jsx(
2477
- "div",
2478
- {
2479
- className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
2480
- children: actions.map((action, idx) => /* @__PURE__ */ jsx(
2481
- Pressable,
2482
- {
2483
- href: action.href,
2484
- onClick: action.onClick,
2485
- variant: action.variant || "default",
2486
- size: action.size || "lg",
2487
- asButton: true,
2488
- children: action.label
2489
- },
2490
- idx
2491
- ))
2492
- }
2493
- );
2494
- }, [actionsSlot, actions, actionsClassName]);
2495
2445
  const categoriesContent = useMemo(() => {
2496
2446
  if (categoriesSlot) return categoriesSlot;
2497
2447
  if (!categories || categories.length === 0) return null;
@@ -2513,22 +2463,27 @@ function CommunityInitiatives({
2513
2463
  children: categories.map((category) => /* @__PURE__ */ jsx("option", { value: category.id, children: category.title }, category.id))
2514
2464
  }
2515
2465
  ) }),
2516
- /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid", children: categories.map((category) => /* @__PURE__ */ jsx(
2466
+ /* @__PURE__ */ jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsx(
2517
2467
  TabsTrigger,
2518
2468
  {
2519
2469
  value: category.id,
2520
- className: "px-3 py-2.5 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2470
+ className: cn(
2471
+ "px-3 py-2.5 cursor-pointer",
2472
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2473
+ "hover:bg-muted hover:text-muted-foreground",
2474
+ "transition-all duration-500"
2475
+ ),
2521
2476
  children: category.title
2522
2477
  },
2523
2478
  category.id
2524
2479
  )) })
2525
2480
  ] }),
2526
- /* @__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 }) }),
2481
+ /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsx("p", { className: "relative", children: currentCategory?.description }) }),
2527
2482
  categories.map((category) => /* @__PURE__ */ jsx(
2528
2483
  TabsContent,
2529
2484
  {
2530
2485
  value: category.id,
2531
- className: "space-y-12",
2486
+ className: "space-y-12 md:space-y-24",
2532
2487
  children: category.initiatives.map((initiative, index) => {
2533
2488
  const isEven = index % 2 === 0;
2534
2489
  return /* @__PURE__ */ jsxs(
@@ -2545,47 +2500,13 @@ function CommunityInitiatives({
2545
2500
  ),
2546
2501
  children: [
2547
2502
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
2548
- /* @__PURE__ */ jsx(
2549
- "div",
2550
- {
2551
- className: cn(
2552
- "rounded-md p-2",
2553
- getNestedCardBg(background, "muted")
2554
- ),
2555
- children: /* @__PURE__ */ jsx(
2556
- DynamicIcon,
2557
- {
2558
- name: initiative.icon,
2559
- size: 24,
2560
- className: cn(getAccentColor(background))
2561
- }
2562
- )
2563
- }
2564
- ),
2503
+ /* @__PURE__ */ jsx("div", { className: cn("rounded-md p-2"), children: /* @__PURE__ */ jsx(DynamicIcon, { name: initiative.icon, size: 24 }) }),
2565
2504
  /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
2566
2505
  ] }),
2567
- /* @__PURE__ */ jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
2506
+ /* @__PURE__ */ jsx("p", { className: "relative", children: initiative.description }),
2568
2507
  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: [
2569
- /* @__PURE__ */ jsx(
2570
- "div",
2571
- {
2572
- className: cn(
2573
- "text-2xl font-bold",
2574
- getAccentColor(background)
2575
- ),
2576
- children: metric.value
2577
- }
2578
- ),
2579
- /* @__PURE__ */ jsx(
2580
- "div",
2581
- {
2582
- className: cn(
2583
- "mt-1 text-xs",
2584
- getTextColor(background, "muted")
2585
- ),
2586
- children: metric.label
2587
- }
2588
- )
2508
+ /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-bold"), children: metric.value }),
2509
+ /* @__PURE__ */ jsx("div", { className: cn("mt-1 text-xs"), children: metric.label })
2589
2510
  ] }, i)) })
2590
2511
  ]
2591
2512
  }
@@ -2597,7 +2518,7 @@ function CommunityInitiatives({
2597
2518
  "md:col-span-5",
2598
2519
  isEven ? "md:order-2" : "md:order-1"
2599
2520
  ),
2600
- children: /* @__PURE__ */ jsx("div", { className: "relative aspect-4/3 overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
2521
+ children: /* @__PURE__ */ jsx("div", { className: "relative aspect-video overflow-hidden rounded-xl shadow-xl", children: /* @__PURE__ */ jsx(
2601
2522
  Img,
2602
2523
  {
2603
2524
  src: initiative.image,
@@ -2618,28 +2539,21 @@ function CommunityInitiatives({
2618
2539
  Card,
2619
2540
  {
2620
2541
  className: cn(
2621
- "flex h-full min-h-[280px] w-full items-center justify-center",
2622
- getNestedCardBg(background, "subtle")
2542
+ "flex h-full min-h-[280px] w-full items-center justify-center"
2623
2543
  ),
2624
- children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 text-center", children: [
2544
+ children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6 text-center flex flex-col items-center gap-4", children: [
2625
2545
  /* @__PURE__ */ jsx(
2626
2546
  DynamicIcon,
2627
2547
  {
2628
2548
  name: initiative.icon,
2629
2549
  size: 64,
2630
2550
  className: cn(
2631
- "mx-auto mb-4",
2632
- getTextColor(background, "muted"),
2551
+ "mx-auto text-card-foreground",
2633
2552
  "opacity-50"
2634
2553
  )
2635
2554
  }
2636
2555
  ),
2637
- /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
2638
- "Learn more about our",
2639
- " ",
2640
- initiative.title.toLowerCase(),
2641
- " initiative"
2642
- ] })
2556
+ /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
2643
2557
  ] })
2644
2558
  }
2645
2559
  )
@@ -2680,7 +2594,7 @@ function CommunityInitiatives({
2680
2594
  "div",
2681
2595
  {
2682
2596
  className: cn(
2683
- "mx-auto mb-8 md:mb-16 max-w-3xl space-y-4 text-center",
2597
+ "mx-auto mb-8 md:mb-16 max-w-3xl space-y-4 flex flex-col items-center",
2684
2598
  headerClassName
2685
2599
  ),
2686
2600
  children: [
@@ -2689,41 +2603,65 @@ function CommunityInitiatives({
2689
2603
  "h2",
2690
2604
  {
2691
2605
  className: cn(
2692
- "text-3xl font-bold tracking-tight md:text-4xl",
2606
+ "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance text-center",
2693
2607
  headingClassName
2694
2608
  ),
2695
2609
  children: heading
2696
2610
  }
2697
2611
  ) : heading),
2698
- description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn(descriptionClassName), children: description }) : description)
2612
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
2613
+ "p",
2614
+ {
2615
+ className: cn(
2616
+ "text-lg text-balance text-center",
2617
+ descriptionClassName
2618
+ ),
2619
+ children: description
2620
+ }
2621
+ ) : description)
2699
2622
  ]
2700
2623
  }
2701
2624
  ),
2702
2625
  categoriesContent,
2703
- /* @__PURE__ */ jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
2704
- ctaBadgeText && /* @__PURE__ */ jsx(
2705
- "div",
2706
- {
2707
- className: cn(
2708
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
2709
- ),
2710
- children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2711
- }
2712
- ),
2713
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2714
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
2715
- "p",
2716
- {
2717
- className: cn(
2718
- "mx-auto mb-8 max-w-2xl",
2719
- getTextColor(background, "muted"),
2720
- ctaDescriptionClassName
2626
+ /* @__PURE__ */ jsxs(
2627
+ "div",
2628
+ {
2629
+ className: cn(
2630
+ "mt-10 md:mt-24 p-6 md:p-16",
2631
+ "text-center flex flex-col items-center",
2632
+ "bg-muted text-muted-foreground",
2633
+ "rounded-2xl shadow-lg",
2634
+ ctaClassName
2635
+ ),
2636
+ children: [
2637
+ ctaBadgeText && /* @__PURE__ */ jsx(
2638
+ "div",
2639
+ {
2640
+ className: cn(
2641
+ "mb-8 inline-flex items-center justify-center rounded-full p-1"
2642
+ ),
2643
+ children: /* @__PURE__ */ jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2644
+ }
2721
2645
  ),
2722
- children: ctaDescription
2723
- }
2724
- ) : ctaDescription),
2725
- actionsContent
2726
- ] })
2646
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2647
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsx(
2648
+ "p",
2649
+ {
2650
+ className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
2651
+ children: ctaDescription
2652
+ }
2653
+ ) : ctaDescription),
2654
+ /* @__PURE__ */ jsx(
2655
+ BlockActions,
2656
+ {
2657
+ actions,
2658
+ actionsSlot,
2659
+ actionsClassName
2660
+ }
2661
+ )
2662
+ ]
2663
+ }
2664
+ )
2727
2665
  ]
2728
2666
  }
2729
2667
  );
package/dist/index.cjs CHANGED
@@ -2038,7 +2038,7 @@ function AboutMissionPrinciples({
2038
2038
  className,
2039
2039
  background,
2040
2040
  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
2041
- spacing = "xl",
2041
+ spacing = "lg",
2042
2042
  pattern,
2043
2043
  patternOpacity
2044
2044
  }) {
@@ -2080,7 +2080,9 @@ function AboutMissionPrinciples({
2080
2080
  children: principles.map((principle, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
2081
2081
  "div",
2082
2082
  {
2083
- className: cn("relative rounded-lg border p-6 transition-colors"),
2083
+ className: cn(
2084
+ "relative rounded-lg border p-6 bg-card text-card-foreground"
2085
+ ),
2084
2086
  children: [
2085
2087
  principle.number && /* @__PURE__ */ jsxRuntime.jsx(
2086
2088
  "div",
@@ -2093,7 +2095,7 @@ function AboutMissionPrinciples({
2093
2095
  }
2094
2096
  ),
2095
2097
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
2096
- principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: principle.title }) : principle.title),
2098
+ principle.title && (typeof principle.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold pr-10 text-pretty", children: principle.title }) : principle.title),
2097
2099
  principle.description && (typeof principle.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-pretty text-lg", children: principle.description }) : principle.description)
2098
2100
  ] })
2099
2101
  ]
@@ -2162,11 +2164,11 @@ function AboutMissionPrinciples({
2162
2164
  {
2163
2165
  className: cn(
2164
2166
  "mt-6 md:mt-24 p-6 lg:p-12",
2165
- "bg-muted text-muted-foreground",
2166
- "rounded-xl shadow-lg border",
2167
+ "bg-accent text-accent-foreground",
2168
+ "rounded-xl shadow-xl border",
2167
2169
  visionClassName
2168
2170
  ),
2169
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-8 lg:grid-cols-3", children: [
2171
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-4 md:gap-8 lg:grid-cols-3", children: [
2170
2172
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
2171
2173
  visionHeading && (typeof visionHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
2172
2174
  "h3",
@@ -2524,28 +2526,6 @@ function CommunityInitiatives({
2524
2526
  },
2525
2527
  []
2526
2528
  );
2527
- const actionsContent = React4.useMemo(() => {
2528
- if (actionsSlot) return actionsSlot;
2529
- if (!actions || actions.length === 0) return null;
2530
- return /* @__PURE__ */ jsxRuntime.jsx(
2531
- "div",
2532
- {
2533
- className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
2534
- children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
2535
- Pressable,
2536
- {
2537
- href: action.href,
2538
- onClick: action.onClick,
2539
- variant: action.variant || "default",
2540
- size: action.size || "lg",
2541
- asButton: true,
2542
- children: action.label
2543
- },
2544
- idx
2545
- ))
2546
- }
2547
- );
2548
- }, [actionsSlot, actions, actionsClassName]);
2549
2529
  const categoriesContent = React4.useMemo(() => {
2550
2530
  if (categoriesSlot) return categoriesSlot;
2551
2531
  if (!categories || categories.length === 0) return null;
@@ -2567,22 +2547,27 @@ function CommunityInitiatives({
2567
2547
  children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: category.id, children: category.title }, category.id))
2568
2548
  }
2569
2549
  ) }),
2570
- /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2550
+ /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "hidden h-auto grid-cols-4 p-1 md:grid ring-2 ring-primary", children: categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2571
2551
  TabsTrigger,
2572
2552
  {
2573
2553
  value: category.id,
2574
- className: "px-3 py-2.5 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2554
+ className: cn(
2555
+ "px-3 py-2.5 cursor-pointer",
2556
+ "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
2557
+ "hover:bg-muted hover:text-muted-foreground",
2558
+ "transition-all duration-500"
2559
+ ),
2575
2560
  children: category.title
2576
2561
  },
2577
2562
  category.id
2578
2563
  )) })
2579
2564
  ] }),
2580
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted")), children: currentCategory?.description }) }),
2565
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
2581
2566
  categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
2582
2567
  TabsContent,
2583
2568
  {
2584
2569
  value: category.id,
2585
- className: "space-y-12",
2570
+ className: "space-y-12 md:space-y-24",
2586
2571
  children: category.initiatives.map((initiative, index) => {
2587
2572
  const isEven = index % 2 === 0;
2588
2573
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2599,47 +2584,13 @@ function CommunityInitiatives({
2599
2584
  ),
2600
2585
  children: [
2601
2586
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
2602
- /* @__PURE__ */ jsxRuntime.jsx(
2603
- "div",
2604
- {
2605
- className: cn(
2606
- "rounded-md p-2",
2607
- getNestedCardBg(background, "muted")
2608
- ),
2609
- children: /* @__PURE__ */ jsxRuntime.jsx(
2610
- DynamicIcon,
2611
- {
2612
- name: initiative.icon,
2613
- size: 24,
2614
- className: cn(getAccentColor(background))
2615
- }
2616
- )
2617
- }
2618
- ),
2587
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md p-2"), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: initiative.icon, size: 24 }) }),
2619
2588
  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
2620
2589
  ] }),
2621
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
2590
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: initiative.description }),
2622
2591
  initiative.metrics && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
2623
- /* @__PURE__ */ jsxRuntime.jsx(
2624
- "div",
2625
- {
2626
- className: cn(
2627
- "text-2xl font-bold",
2628
- getAccentColor(background)
2629
- ),
2630
- children: metric.value
2631
- }
2632
- ),
2633
- /* @__PURE__ */ jsxRuntime.jsx(
2634
- "div",
2635
- {
2636
- className: cn(
2637
- "mt-1 text-xs",
2638
- getTextColor(background, "muted")
2639
- ),
2640
- children: metric.label
2641
- }
2642
- )
2592
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-bold"), children: metric.value }),
2593
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 text-xs"), children: metric.label })
2643
2594
  ] }, i)) })
2644
2595
  ]
2645
2596
  }
@@ -2651,7 +2602,7 @@ function CommunityInitiatives({
2651
2602
  "md:col-span-5",
2652
2603
  isEven ? "md:order-2" : "md:order-1"
2653
2604
  ),
2654
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-4/3 overflow-hidden rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
2605
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video overflow-hidden rounded-xl shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
2655
2606
  img.Img,
2656
2607
  {
2657
2608
  src: initiative.image,
@@ -2672,28 +2623,21 @@ function CommunityInitiatives({
2672
2623
  Card,
2673
2624
  {
2674
2625
  className: cn(
2675
- "flex h-full min-h-[280px] w-full items-center justify-center",
2676
- getNestedCardBg(background, "subtle")
2626
+ "flex h-full min-h-[280px] w-full items-center justify-center"
2677
2627
  ),
2678
- children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center", children: [
2628
+ children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center flex flex-col items-center gap-4", children: [
2679
2629
  /* @__PURE__ */ jsxRuntime.jsx(
2680
2630
  DynamicIcon,
2681
2631
  {
2682
2632
  name: initiative.icon,
2683
2633
  size: 64,
2684
2634
  className: cn(
2685
- "mx-auto mb-4",
2686
- getTextColor(background, "muted"),
2635
+ "mx-auto text-card-foreground",
2687
2636
  "opacity-50"
2688
2637
  )
2689
2638
  }
2690
2639
  ),
2691
- /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
2692
- "Learn more about our",
2693
- " ",
2694
- initiative.title.toLowerCase(),
2695
- " initiative"
2696
- ] })
2640
+ /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: "mx-auto", children: initiative.title })
2697
2641
  ] })
2698
2642
  }
2699
2643
  )
@@ -2734,7 +2678,7 @@ function CommunityInitiatives({
2734
2678
  "div",
2735
2679
  {
2736
2680
  className: cn(
2737
- "mx-auto mb-8 md:mb-16 max-w-3xl space-y-4 text-center",
2681
+ "mx-auto mb-8 md:mb-16 max-w-3xl space-y-4 flex flex-col items-center",
2738
2682
  headerClassName
2739
2683
  ),
2740
2684
  children: [
@@ -2743,41 +2687,65 @@ function CommunityInitiatives({
2743
2687
  "h2",
2744
2688
  {
2745
2689
  className: cn(
2746
- "text-3xl font-bold tracking-tight md:text-4xl",
2690
+ "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance text-center",
2747
2691
  headingClassName
2748
2692
  ),
2749
2693
  children: heading
2750
2694
  }
2751
2695
  ) : heading),
2752
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descriptionClassName), children: description }) : description)
2696
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
2697
+ "p",
2698
+ {
2699
+ className: cn(
2700
+ "text-lg text-balance text-center",
2701
+ descriptionClassName
2702
+ ),
2703
+ children: description
2704
+ }
2705
+ ) : description)
2753
2706
  ]
2754
2707
  }
2755
2708
  ),
2756
2709
  categoriesContent,
2757
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
2758
- ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
2759
- "div",
2760
- {
2761
- className: cn(
2762
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
2763
- ),
2764
- children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2765
- }
2766
- ),
2767
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2768
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
2769
- "p",
2770
- {
2771
- className: cn(
2772
- "mx-auto mb-8 max-w-2xl",
2773
- getTextColor(background, "muted"),
2774
- ctaDescriptionClassName
2710
+ /* @__PURE__ */ jsxRuntime.jsxs(
2711
+ "div",
2712
+ {
2713
+ className: cn(
2714
+ "mt-10 md:mt-24 p-6 md:p-16",
2715
+ "text-center flex flex-col items-center",
2716
+ "bg-muted text-muted-foreground",
2717
+ "rounded-2xl shadow-lg",
2718
+ ctaClassName
2719
+ ),
2720
+ children: [
2721
+ ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
2722
+ "div",
2723
+ {
2724
+ className: cn(
2725
+ "mb-8 inline-flex items-center justify-center rounded-full p-1"
2726
+ ),
2727
+ children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
2728
+ }
2775
2729
  ),
2776
- children: ctaDescription
2777
- }
2778
- ) : ctaDescription),
2779
- actionsContent
2780
- ] })
2730
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
2731
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
2732
+ "p",
2733
+ {
2734
+ className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
2735
+ children: ctaDescription
2736
+ }
2737
+ ) : ctaDescription),
2738
+ /* @__PURE__ */ jsxRuntime.jsx(
2739
+ BlockActions,
2740
+ {
2741
+ actions,
2742
+ actionsSlot,
2743
+ actionsClassName
2744
+ }
2745
+ )
2746
+ ]
2747
+ }
2748
+ )
2781
2749
  ]
2782
2750
  }
2783
2751
  );