@opensite/ui 1.4.4 → 1.4.5

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.
package/dist/registry.cjs CHANGED
@@ -23681,7 +23681,8 @@ function FooterContactCard({
23681
23681
  copyrightClassName,
23682
23682
  locationClassName,
23683
23683
  background,
23684
- spacing,
23684
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
23685
+ spacing = "py-6 md:py-32",
23685
23686
  pattern,
23686
23687
  patternOpacity,
23687
23688
  optixFlowConfig
@@ -23694,6 +23695,7 @@ function FooterContactCard({
23694
23695
  pattern,
23695
23696
  patternOpacity,
23696
23697
  className: cn(className),
23698
+ containerClassName,
23697
23699
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("footer", { children: [
23698
23700
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-12 lg:grid-cols-2", gridClassName), children: [
23699
23701
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(leftColumnClassName), children: [
@@ -23706,7 +23708,16 @@ function FooterContactCard({
23706
23708
  optixFlowConfig
23707
23709
  }
23708
23710
  ),
23709
- heading && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }),
23711
+ heading && /* @__PURE__ */ jsxRuntime.jsx(
23712
+ "h2",
23713
+ {
23714
+ className: cn(
23715
+ "mb-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
23716
+ headingClassName
23717
+ ),
23718
+ children: heading
23719
+ }
23720
+ ),
23710
23721
  (email || phone || address) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4 opacity-80", contactClassName), children: [
23711
23722
  email && /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx(
23712
23723
  Pressable,
@@ -23727,51 +23738,90 @@ function FooterContactCard({
23727
23738
  address && /* @__PURE__ */ jsxRuntime.jsx("p", { children: address })
23728
23739
  ] })
23729
23740
  ] }),
23730
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between", rightColumnClassName), children: [
23731
- (socialTitle || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(socialSectionClassName), children: [
23732
- socialTitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 font-medium", socialTitleClassName), children: socialTitle }),
23733
- socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex items-center gap-4", socialLinksClassName), children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
23734
- SocialLinkIcon,
23741
+ /* @__PURE__ */ jsxRuntime.jsxs(
23742
+ "div",
23743
+ {
23744
+ className: cn(
23745
+ "flex flex-col justify-between",
23746
+ rightColumnClassName
23747
+ ),
23748
+ children: [
23749
+ (socialTitle || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(socialSectionClassName), children: [
23750
+ socialTitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 font-medium", socialTitleClassName), children: socialTitle }),
23751
+ socialLinks && socialLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
23752
+ "ul",
23753
+ {
23754
+ className: cn(
23755
+ "flex items-center gap-4",
23756
+ socialLinksClassName
23757
+ ),
23758
+ children: socialLinks.map((social, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
23759
+ SocialLinkIcon,
23760
+ {
23761
+ href: social.href,
23762
+ label: social.label,
23763
+ iconNameOverride: social.iconNameOverride,
23764
+ className: cn(
23765
+ "flex size-12 items-center justify-center rounded-full border transition-colors hover:opacity-80",
23766
+ socialLinkClassName
23767
+ )
23768
+ }
23769
+ ) }, idx))
23770
+ }
23771
+ )
23772
+ ] }),
23773
+ navLinks && navLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("mt-18 md:mt-8", navClassName), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-6", children: navLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
23774
+ Pressable,
23775
+ {
23776
+ href: link.href,
23777
+ className: cn(
23778
+ "opacity-80 hover:opacity-100",
23779
+ navLinkClassName
23780
+ ),
23781
+ children: link.name
23782
+ }
23783
+ ) }, idx)) }) })
23784
+ ]
23785
+ }
23786
+ )
23787
+ ] }),
23788
+ /* @__PURE__ */ jsxRuntime.jsxs(
23789
+ "div",
23790
+ {
23791
+ className: cn(
23792
+ "mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center",
23793
+ bottomClassName
23794
+ ),
23795
+ children: [
23796
+ /* @__PURE__ */ jsxRuntime.jsxs(
23797
+ "div",
23735
23798
  {
23736
- href: social.href,
23737
- label: social.label,
23738
- iconNameOverride: social.iconNameOverride,
23739
23799
  className: cn(
23740
- "flex size-12 items-center justify-center rounded-full border transition-colors hover:opacity-80",
23741
- socialLinkClassName
23742
- )
23800
+ "flex flex-col gap-2 md:flex-row md:items-center md:gap-4",
23801
+ copyrightClassName
23802
+ ),
23803
+ children: [
23804
+ /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
23805
+ /* @__PURE__ */ jsxRuntime.jsx(
23806
+ BrandAttribution,
23807
+ {
23808
+ internalBrandSlug: "open_site_ai",
23809
+ optionIndex: 7,
23810
+ variant: "span",
23811
+ linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
23812
+ }
23813
+ )
23814
+ ]
23743
23815
  }
23744
- ) }, idx)) })
23745
- ] }),
23746
- navLinks && navLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("mt-8", navClassName), children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-wrap gap-6", children: navLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
23747
- Pressable,
23748
- {
23749
- href: link.href,
23750
- className: cn("opacity-80 hover:opacity-100", navLinkClassName),
23751
- children: link.name
23752
- }
23753
- ) }, idx)) }) })
23754
- ] })
23755
- ] }),
23756
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-16 flex flex-col justify-between gap-4 border-t pt-8 text-sm opacity-80 md:flex-row md:items-center", bottomClassName), children: [
23757
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-2 md:flex-row md:items-center md:gap-4", copyrightClassName), children: [
23758
- /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright }),
23759
- /* @__PURE__ */ jsxRuntime.jsx(
23760
- BrandAttribution,
23761
- {
23762
- internalBrandSlug: "open_site_ai",
23763
- optionIndex: 7,
23764
- variant: "span",
23765
- linkClassName: "underline underline-offset-4 transition-colors hover:opacity-100"
23766
- }
23767
- )
23768
- ] }),
23769
- (locationLabel || location) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn(locationClassName), children: [
23770
- locationLabel,
23771
- " ",
23772
- location && /* @__PURE__ */ jsxRuntime.jsx("strong", { children: location })
23773
- ] })
23774
- ] })
23816
+ ),
23817
+ (locationLabel || location) && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn(locationClassName), children: [
23818
+ locationLabel,
23819
+ " ",
23820
+ location && /* @__PURE__ */ jsxRuntime.jsx("strong", { children: location })
23821
+ ] })
23822
+ ]
23823
+ }
23824
+ )
23775
23825
  ] }) })
23776
23826
  }
23777
23827
  );
@@ -23940,7 +23990,8 @@ function FooterAnimatedSocial({
23940
23990
  separatorClassName,
23941
23991
  copyrightClassName,
23942
23992
  background,
23943
- spacing,
23993
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
23994
+ spacing = "py-6 md:py-32",
23944
23995
  pattern,
23945
23996
  patternOpacity
23946
23997
  }) {
@@ -23963,7 +24014,10 @@ function FooterAnimatedSocial({
23963
24014
  label: link.label,
23964
24015
  iconNameOverride: link.iconNameOverride,
23965
24016
  iconSize: 24,
23966
- className: cn("group flex items-center gap-2 py-2 transition-colors hover:opacity-70", socialLinkClassName)
24017
+ className: cn(
24018
+ "group flex items-center gap-2 py-2 transition-colors hover:opacity-70",
24019
+ socialLinkClassName
24020
+ )
23967
24021
  }
23968
24022
  )
23969
24023
  },
@@ -23978,6 +24032,7 @@ function FooterAnimatedSocial({
23978
24032
  pattern,
23979
24033
  patternOpacity,
23980
24034
  className: cn(className),
24035
+ containerClassName,
23981
24036
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(contentClassName), children: /* @__PURE__ */ jsxRuntime.jsx("footer", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
23982
24037
  /* @__PURE__ */ jsxRuntime.jsxs(
23983
24038
  framerMotion.motion.div,
@@ -23986,23 +24041,56 @@ function FooterAnimatedSocial({
23986
24041
  initial: "hidden",
23987
24042
  whileInView: "visible",
23988
24043
  viewport: { once: true },
23989
- className: cn("flex flex-col justify-between md:flex-row md:items-center", layoutClassName),
24044
+ className: cn(
24045
+ "flex flex-col justify-between md:flex-row md:items-center",
24046
+ layoutClassName
24047
+ ),
23990
24048
  children: [
23991
24049
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8", leftColumnClassName), children: [
23992
24050
  /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { variants: itemVariants, className: "space-y-6", children: [
23993
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl leading-tight font-bold lg:text-5xl", headingClassName), children: heading }),
23994
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-md text-lg leading-relaxed opacity-80", descriptionClassName), children: description })
24051
+ /* @__PURE__ */ jsxRuntime.jsx(
24052
+ "h2",
24053
+ {
24054
+ className: cn(
24055
+ "text-4xl leading-tight font-bold lg:text-5xl",
24056
+ headingClassName
24057
+ ),
24058
+ children: heading
24059
+ }
24060
+ ),
24061
+ /* @__PURE__ */ jsxRuntime.jsx(
24062
+ "p",
24063
+ {
24064
+ className: cn(
24065
+ "max-w-md text-lg leading-relaxed opacity-80",
24066
+ descriptionClassName
24067
+ ),
24068
+ children: description
24069
+ }
24070
+ )
23995
24071
  ] }),
23996
24072
  ctaUrl && ctaText && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx(
23997
24073
  Pressable,
23998
24074
  {
23999
24075
  href: ctaUrl,
24000
- 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),
24076
+ className: cn(
24077
+ "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",
24078
+ ctaClassName
24079
+ ),
24001
24080
  children: ctaText
24002
24081
  }
24003
24082
  ) })
24004
24083
  ] }),
24005
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-5 space-y-8 md:mt-0", rightColumnClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", socialLinksClassName), children: socialLinksContent }) }) })
24084
+ /* @__PURE__ */ jsxRuntime.jsx(
24085
+ "div",
24086
+ {
24087
+ className: cn(
24088
+ "flex flex-row md:flex-col flex-wrap items-center justify-center gap-4 md:gap-2",
24089
+ rightColumnClassName
24090
+ ),
24091
+ children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-row md:flex-col items-center gap-4 md:gap-6", socialLinksClassName), children: socialLinksContent }) })
24092
+ }
24093
+ )
24006
24094
  ]
24007
24095
  }
24008
24096
  ),
@@ -24015,14 +24103,32 @@ function FooterAnimatedSocial({
24015
24103
  viewport: { once: true },
24016
24104
  className: cn("mt-16", bottomClassName),
24017
24105
  children: [
24018
- /* @__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" } }) }),
24106
+ /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx(
24107
+ "div",
24108
+ {
24109
+ className: cn(
24110
+ "mb-8 h-px w-full opacity-20",
24111
+ separatorClassName
24112
+ ),
24113
+ style: { backgroundColor: "currentColor" }
24114
+ }
24115
+ ) }),
24019
24116
  /* @__PURE__ */ jsxRuntime.jsxs(
24020
24117
  framerMotion.motion.div,
24021
24118
  {
24022
24119
  variants: itemVariants,
24023
- className: cn("flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center", copyrightClassName),
24120
+ className: cn(
24121
+ "flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center",
24122
+ copyrightClassName
24123
+ ),
24024
24124
  children: [
24025
- /* @__PURE__ */ jsxRuntime.jsx(FooterCopyright, { copyright, className: "text-sm opacity-70" }),
24125
+ /* @__PURE__ */ jsxRuntime.jsx(
24126
+ FooterCopyright,
24127
+ {
24128
+ copyright,
24129
+ className: "text-sm opacity-70"
24130
+ }
24131
+ ),
24026
24132
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 text-sm opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(
24027
24133
  BrandAttribution,
24028
24134
  {
@@ -26563,8 +26669,7 @@ function FeatureUtilityCardsGrid({
26563
26669
  href: learnMoreAction.href,
26564
26670
  onClick: learnMoreAction.onClick,
26565
26671
  className: cn(
26566
- "hover:underline",
26567
- `hover:${getAccentColor(background)}`,
26672
+ "font-medium transition-opacity hover:opacity-80",
26568
26673
  learnMoreAction.className
26569
26674
  ),
26570
26675
  "aria-label": learnMoreAction["aria-label"],
@@ -26577,7 +26682,10 @@ function FeatureUtilityCardsGrid({
26577
26682
  {
26578
26683
  href: learnMoreAction.href,
26579
26684
  onClick: learnMoreAction.onClick,
26580
- className: cn(learnMoreAction.className),
26685
+ className: cn(
26686
+ "flex items-center gap-1 font-medium transition-opacity hover:opacity-80",
26687
+ learnMoreAction.className
26688
+ ),
26581
26689
  "aria-label": learnMoreAction["aria-label"],
26582
26690
  children: [
26583
26691
  learnMoreAction.icon,
@@ -26615,18 +26723,60 @@ function FeatureUtilityCardsGrid({
26615
26723
  return utilities.map((utility, index) => /* @__PURE__ */ jsxRuntime.jsxs(
26616
26724
  Card,
26617
26725
  {
26618
- className: cn("overflow-hidden pt-0", cardClassName, utility.className),
26726
+ className: cn(
26727
+ "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
26728
+ cardClassName,
26729
+ utility.className
26730
+ ),
26619
26731
  children: [
26620
- renderUtilityImage(utility),
26621
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
26622
- utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 font-medium", utility.titleClassName), children: utility.title })),
26623
- utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("", utility.descriptionClassName), children: utility.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("", utility.descriptionClassName), children: utility.description }))
26732
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: renderUtilityImage(utility) }),
26733
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5 md:p-6", children: [
26734
+ utility.title && (typeof utility.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
26735
+ "h3",
26736
+ {
26737
+ className: cn(
26738
+ "mb-2 text-lg font-semibold",
26739
+ utility.titleClassName
26740
+ ),
26741
+ children: utility.title
26742
+ }
26743
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
26744
+ "div",
26745
+ {
26746
+ className: cn(
26747
+ "mb-2 text-lg font-semibold",
26748
+ utility.titleClassName
26749
+ ),
26750
+ children: utility.title
26751
+ }
26752
+ )),
26753
+ utility.description && (typeof utility.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
26754
+ "p",
26755
+ {
26756
+ className: cn(
26757
+ "text-sm leading-relaxed",
26758
+ getTextColor(background, "muted"),
26759
+ utility.descriptionClassName
26760
+ ),
26761
+ children: utility.description
26762
+ }
26763
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
26764
+ "div",
26765
+ {
26766
+ className: cn(
26767
+ "text-sm leading-relaxed",
26768
+ getTextColor(background, "muted"),
26769
+ utility.descriptionClassName
26770
+ ),
26771
+ children: utility.description
26772
+ }
26773
+ ))
26624
26774
  ] })
26625
26775
  ]
26626
26776
  },
26627
26777
  index
26628
26778
  ));
26629
- }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage]);
26779
+ }, [utilitiesSlot, utilities, cardClassName, renderUtilityImage, background]);
26630
26780
  return /* @__PURE__ */ jsxRuntime.jsxs(
26631
26781
  Section,
26632
26782
  {
@@ -26721,57 +26871,63 @@ function FeatureBentoUtilities({
26721
26871
  patternOpacity,
26722
26872
  patternClassName
26723
26873
  }) {
26724
- const renderCard = React52__namespace.useCallback((card, index) => {
26725
- const hasImage = card.imageSrc || card.imageSlot;
26726
- const cardClasses = cn(
26727
- hasImage ? "overflow-hidden pt-0" : "p-6",
26728
- card.isDashed && "border-dashed bg-transparent shadow-none",
26729
- card.className
26730
- );
26731
- const renderImage = () => {
26732
- if (card.imageSlot) return card.imageSlot;
26733
- if (card.imageSrc) {
26734
- return /* @__PURE__ */ jsxRuntime.jsx(
26735
- img.Img,
26736
- {
26737
- src: card.imageSrc,
26738
- alt: card.imageAlt || "",
26739
- className: "aspect-video w-full object-cover",
26740
- loading: "lazy",
26741
- optixFlowConfig
26742
- }
26743
- );
26874
+ const renderCard = React52__namespace.useCallback(
26875
+ (card, index) => {
26876
+ const hasImage = card.imageSrc || card.imageSlot;
26877
+ const cardClasses = cn(
26878
+ hasImage ? "overflow-hidden pt-0" : "p-6",
26879
+ card.isDashed && "border-dashed bg-transparent shadow-none",
26880
+ card.className
26881
+ );
26882
+ const renderImage = () => {
26883
+ if (card.imageSlot) return card.imageSlot;
26884
+ if (card.imageSrc) {
26885
+ return /* @__PURE__ */ jsxRuntime.jsx(
26886
+ img.Img,
26887
+ {
26888
+ src: card.imageSrc,
26889
+ alt: card.imageAlt || "",
26890
+ className: "aspect-video w-full object-cover",
26891
+ loading: "lazy",
26892
+ optixFlowConfig
26893
+ }
26894
+ );
26895
+ }
26896
+ return null;
26897
+ };
26898
+ const renderTitle = () => {
26899
+ if (!card.title) return null;
26900
+ const titleContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
26901
+ card.title,
26902
+ card.showSparkle && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkles", size: 16 }),
26903
+ card.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: card.badge })
26904
+ ] });
26905
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex items-center gap-2 font-medium", children: titleContent });
26906
+ };
26907
+ if (hasImage) {
26908
+ return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
26909
+ renderImage(),
26910
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
26911
+ renderTitle(),
26912
+ card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { children: card.description })
26913
+ ] })
26914
+ ] }, index);
26744
26915
  }
26745
- return null;
26746
- };
26747
- const renderTitle = () => {
26748
- if (!card.title) return null;
26749
- const titleContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
26750
- card.title,
26751
- card.showSparkle && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkles", size: 16 }),
26752
- card.badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", children: card.badge })
26753
- ] });
26754
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 flex items-center gap-2 font-medium", children: titleContent });
26755
- };
26756
- if (hasImage) {
26757
26916
  return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
26758
- renderImage(),
26759
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
26760
- renderTitle(),
26761
- card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
26762
- ] })
26917
+ renderTitle(),
26918
+ card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
26763
26919
  ] }, index);
26764
- }
26765
- return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClasses, children: [
26766
- renderTitle(),
26767
- card.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: card.description })
26768
- ] }, index);
26769
- }, [optixFlowConfig]);
26770
- const renderColumn = React52__namespace.useCallback((cards, slot) => {
26771
- if (slot) return slot;
26772
- if (!cards || cards.length === 0) return null;
26773
- return cards.map((card, index) => renderCard(card, index));
26774
- }, [renderCard]);
26920
+ },
26921
+ [optixFlowConfig]
26922
+ );
26923
+ const renderColumn = React52__namespace.useCallback(
26924
+ (cards, slot) => {
26925
+ if (slot) return slot;
26926
+ if (!cards || cards.length === 0) return null;
26927
+ return cards.map((card, index) => renderCard(card, index));
26928
+ },
26929
+ [renderCard]
26930
+ );
26775
26931
  const labelIconElement = React52.useMemo(() => {
26776
26932
  if (labelIcon) return labelIcon;
26777
26933
  if (labelIconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: labelIconName, size: 20 });
@@ -26785,22 +26941,56 @@ function FeatureBentoUtilities({
26785
26941
  pattern,
26786
26942
  patternOpacity,
26787
26943
  patternClassName,
26788
- className: cn(getNestedCardBg(background, "muted"), className),
26944
+ className,
26789
26945
  containerClassName: cn("max-w-7xl", containerClassName),
26790
26946
  children: [
26791
- (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", getTextColor(background, "muted"), labelClassName), children: [
26792
- labelIconElement,
26793
- label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
26794
- ] }),
26947
+ (labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs(
26948
+ "div",
26949
+ {
26950
+ className: cn(
26951
+ "flex items-center gap-2",
26952
+ getTextColor(background, "muted"),
26953
+ labelClassName
26954
+ ),
26955
+ children: [
26956
+ labelIconElement,
26957
+ label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children: label }))
26958
+ ]
26959
+ }
26960
+ ),
26795
26961
  /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "mt-3 mb-8" }),
26796
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between gap-6 md:flex-row", headerClassName), children: [
26797
- title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title })),
26798
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
26799
- ] }),
26800
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-11 flex flex-col gap-6 md:flex-row", gridClassName), children: [
26801
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col gap-6", columnClassName), children: renderColumn(leftColumnCards, leftColumnSlot) }),
26802
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex w-full flex-col gap-6", columnClassName), children: renderColumn(rightColumnCards, rightColumnSlot) })
26803
- ] })
26962
+ /* @__PURE__ */ jsxRuntime.jsxs(
26963
+ "div",
26964
+ {
26965
+ className: cn(
26966
+ "flex flex-col justify-between gap-6 md:flex-row",
26967
+ headerClassName
26968
+ ),
26969
+ children: [
26970
+ title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium md:w-1/2", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx(
26971
+ "div",
26972
+ {
26973
+ className: cn("text-3xl font-medium md:w-1/2", titleClassName),
26974
+ children: title
26975
+ }
26976
+ )),
26977
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("md:w-1/2", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("md:w-1/2", descriptionClassName), children: description }))
26978
+ ]
26979
+ }
26980
+ ),
26981
+ /* @__PURE__ */ jsxRuntime.jsxs(
26982
+ "div",
26983
+ {
26984
+ className: cn(
26985
+ "mt-11 grid grid-cols-1 gap-6 md:grid-cols-2",
26986
+ gridClassName
26987
+ ),
26988
+ children: [
26989
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-6", columnClassName), children: renderColumn(leftColumnCards, leftColumnSlot) }),
26990
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-6", columnClassName), children: renderColumn(rightColumnCards, rightColumnSlot) })
26991
+ ]
26992
+ }
26993
+ )
26804
26994
  ]
26805
26995
  }
26806
26996
  );
@@ -26838,11 +27028,11 @@ function FeatureChecklistThreeColumn({
26838
27028
  const renderChecklistColumn = React52.useCallback((items, slot, gapClass) => {
26839
27029
  if (slot) return slot;
26840
27030
  if (!items || items.length === 0) return null;
26841
- return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col", getTextColor(background, "muted"), gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-center gap-2", getCheckItemClassName(item)), children: [
26842
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 16, className: getAccentColor(background) }),
26843
- getCheckItemContent(item)
27031
+ return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex flex-col", gapClass, checklistClassName), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", getCheckItemClassName(item)), children: [
27032
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 12, className: getAccentColor(background) }) }),
27033
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: getTextColor(background, "muted"), children: getCheckItemContent(item) })
26844
27034
  ] }, index)) });
26845
- }, [checklistClassName, getCheckItemContent, getCheckItemClassName]);
27035
+ }, [checklistClassName, getCheckItemContent, getCheckItemClassName, background]);
26846
27036
  const renderCardImage = React52.useCallback((card) => {
26847
27037
  if (card.imageSlot) return card.imageSlot;
26848
27038
  if (card.image) {
@@ -26866,10 +27056,10 @@ function FeatureChecklistThreeColumn({
26866
27056
  Pressable,
26867
27057
  {
26868
27058
  href: card.link,
26869
- className: "my-3 flex items-center gap-2 px-4 font-medium sm:my-4 sm:px-5 md:px-6",
27059
+ className: "flex items-center gap-2 px-5 py-4 font-medium transition-opacity hover:opacity-80 md:px-6",
26870
27060
  children: [
26871
27061
  card.linkLabel || "Read more",
26872
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16, className: "mt-0.5" })
27062
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
26873
27063
  ]
26874
27064
  }
26875
27065
  );
@@ -26877,43 +27067,62 @@ function FeatureChecklistThreeColumn({
26877
27067
  const cardsContent = React52.useMemo(() => {
26878
27068
  if (cardsSlot) return cardsSlot;
26879
27069
  if (!cards || cards.length === 0) return null;
26880
- return cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border", cardClassName, card.className), children: [
26881
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative p-1", children: [
26882
- renderCardImage(card),
26883
- card.badge && /* @__PURE__ */ jsxRuntime.jsx(
26884
- Badge,
26885
- {
26886
- variant: "outline",
26887
- className: cn("absolute top-5 left-5 bg-background", card.badgeClassName),
26888
- children: card.badge
26889
- }
26890
- )
26891
- ] }),
26892
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
26893
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 px-4 pt-5 sm:px-5 md:px-6 md:pt-6", children: [
26894
- card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium", card.titleClassName), children: card.title })),
26895
- card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), card.descriptionClassName), children: card.description }))
26896
- ] }),
26897
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px border-t border-dashed" }),
26898
- /* @__PURE__ */ jsxRuntime.jsx("ul", { className: getTextColor(background, "muted"), children: card.checklistItems?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(React52__namespace.Fragment, { children: [
26899
- /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-2 px-4 py-3 sm:px-5 md:px-6", getCheckItemClassName(item)), children: [
26900
- /* @__PURE__ */ jsxRuntime.jsx(
26901
- DynamicIcon,
27070
+ return cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsxs(
27071
+ Card,
27072
+ {
27073
+ className: cn(
27074
+ "overflow-hidden pt-0 transition-shadow duration-300 hover:shadow-lg",
27075
+ cardClassName,
27076
+ card.className
27077
+ ),
27078
+ children: [
27079
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
27080
+ renderCardImage(card),
27081
+ card.badge && /* @__PURE__ */ jsxRuntime.jsx(
27082
+ Badge,
26902
27083
  {
26903
- name: "lucide/check",
26904
- size: 16,
26905
- className: cn("mt-1 shrink-0", getAccentColor(background))
27084
+ variant: "outline",
27085
+ className: cn(
27086
+ "absolute top-4 left-4 bg-background/90 backdrop-blur-sm",
27087
+ card.badgeClassName
27088
+ ),
27089
+ children: card.badge
26906
27090
  }
26907
- ),
26908
- getCheckItemContent(item)
27091
+ )
26909
27092
  ] }),
26910
- card.checklistItems && itemIndex < card.checklistItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px border-t border-dashed" })
26911
- ] }, itemIndex)) }),
26912
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px border-t border-dashed" }),
26913
- renderCardLink(card)
26914
- ] })
26915
- ] }, index));
26916
- }, [cardsSlot, cards, cardClassName, renderCardImage, renderCardLink, getCheckItemContent, getCheckItemClassName]);
27093
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
27094
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-5 md:px-6 md:py-6", children: [
27095
+ card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-lg font-semibold", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-lg font-semibold", card.titleClassName), children: card.title })),
27096
+ card.description && (typeof card.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm leading-relaxed", getTextColor(background, "muted"), card.descriptionClassName), children: card.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm leading-relaxed", getTextColor(background, "muted"), card.descriptionClassName), children: card.description }))
27097
+ ] }),
27098
+ card.checklistItems && card.checklistItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "border-t px-5 py-4 md:px-6", children: card.checklistItems.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
27099
+ "li",
27100
+ {
27101
+ className: cn(
27102
+ "flex items-start gap-3 py-2",
27103
+ getCheckItemClassName(item)
27104
+ ),
27105
+ children: [
27106
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(
27107
+ DynamicIcon,
27108
+ {
27109
+ name: "lucide/check",
27110
+ size: 12,
27111
+ className: getAccentColor(background)
27112
+ }
27113
+ ) }),
27114
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm", getTextColor(background, "muted")), children: getCheckItemContent(item) })
27115
+ ]
27116
+ },
27117
+ itemIndex
27118
+ )) }),
27119
+ card.link && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t", children: renderCardLink(card) })
27120
+ ] })
27121
+ ]
27122
+ },
27123
+ index
27124
+ ));
27125
+ }, [cardsSlot, cards, cardClassName, renderCardImage, renderCardLink, getCheckItemContent, getCheckItemClassName, background]);
26917
27126
  return /* @__PURE__ */ jsxRuntime.jsxs(
26918
27127
  Section,
26919
27128
  {
@@ -26925,9 +27134,9 @@ function FeatureChecklistThreeColumn({
26925
27134
  className,
26926
27135
  containerClassName,
26927
27136
  children: [
26928
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-4 sm:grid-cols-2 sm:gap-8 md:gap-12 lg:grid-cols-3 lg:gap-16", headerGridClassName), children: [
26929
- title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-4 text-3xl font-medium sm:col-span-2 sm:text-4xl md:mb-0 lg:col-span-1", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-3xl font-medium sm:col-span-2 sm:text-4xl md:mb-0 lg:col-span-1", titleClassName), children: title })),
26930
- renderChecklistColumn(checklistColumn1, checklistColumn1Slot, "gap-3 sm:gap-4"),
27137
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-6 sm:grid-cols-2 sm:gap-8 lg:grid-cols-3 lg:gap-12", headerGridClassName), children: [
27138
+ title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-2 text-2xl font-semibold text-balance sm:col-span-2 sm:text-3xl lg:col-span-1 lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-2xl font-semibold text-balance sm:col-span-2 sm:text-3xl lg:col-span-1 lg:text-4xl", titleClassName), children: title })),
27139
+ renderChecklistColumn(checklistColumn1, checklistColumn1Slot, "gap-4"),
26931
27140
  renderChecklistColumn(checklistColumn2, checklistColumn2Slot, "gap-4")
26932
27141
  ] }),
26933
27142
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 grid gap-6 sm:mt-16 md:grid-cols-2 lg:grid-cols-3", cardsGridClassName), children: cardsContent })
@@ -26971,11 +27180,22 @@ function FeatureIntegrationCards({
26971
27180
  const renderLinkLabel = React52.useCallback((integration) => {
26972
27181
  if (integration.linkLabelSlot) return integration.linkLabelSlot;
26973
27182
  if (!integration.linkLabel) return null;
26974
- return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("flex items-center gap-1 rounded-full border px-3 py-2.5 text-sm", integration.linkLabelClassName), children: [
26975
- integration.linkLabel,
26976
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
26977
- ] });
26978
- }, []);
27183
+ return /* @__PURE__ */ jsxRuntime.jsxs(
27184
+ "span",
27185
+ {
27186
+ className: cn(
27187
+ "flex items-center gap-1.5 rounded-full border px-3 py-2 text-sm font-medium transition-colors",
27188
+ getBorderColor(background),
27189
+ getAccentColor(background),
27190
+ integration.linkLabelClassName
27191
+ ),
27192
+ children: [
27193
+ integration.linkLabel,
27194
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14 })
27195
+ ]
27196
+ }
27197
+ );
27198
+ }, [background]);
26979
27199
  const integrationsContent = React52.useMemo(() => {
26980
27200
  if (integrationsSlot) return integrationsSlot;
26981
27201
  if (!integrations || integrations.length === 0) return null;
@@ -26984,35 +27204,84 @@ function FeatureIntegrationCards({
26984
27204
  const linkLabelContent = renderLinkLabel(integration);
26985
27205
  const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
26986
27206
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
26987
- iconContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "grid size-12 shrink-0 place-content-center rounded-md border", children: iconContent }),
27207
+ iconContent && /* @__PURE__ */ jsxRuntime.jsx(
27208
+ "span",
27209
+ {
27210
+ className: cn(
27211
+ "grid size-12 shrink-0 place-content-center rounded-lg border bg-background/50",
27212
+ getBorderColor(background)
27213
+ ),
27214
+ children: iconContent
27215
+ }
27216
+ ),
26988
27217
  linkLabelContent
26989
27218
  ] }),
26990
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
26991
- integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("font-medium md:text-lg", integration.titleClassName), children: integration.title })),
26992
- integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm md:text-base", getTextColor(background, "muted"), integration.descriptionClassName), children: integration.description }))
27219
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
27220
+ integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
27221
+ "h3",
27222
+ {
27223
+ className: cn(
27224
+ "font-semibold md:text-lg",
27225
+ getTextColor(background),
27226
+ integration.titleClassName
27227
+ ),
27228
+ children: integration.title
27229
+ }
27230
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
27231
+ "div",
27232
+ {
27233
+ className: cn(
27234
+ "font-semibold md:text-lg",
27235
+ getTextColor(background),
27236
+ integration.titleClassName
27237
+ ),
27238
+ children: integration.title
27239
+ }
27240
+ )),
27241
+ integration.description && (typeof integration.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
27242
+ "p",
27243
+ {
27244
+ className: cn(
27245
+ "text-sm leading-relaxed md:text-base",
27246
+ getTextColor(background, "muted"),
27247
+ integration.descriptionClassName
27248
+ ),
27249
+ children: integration.description
27250
+ }
27251
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
27252
+ "div",
27253
+ {
27254
+ className: cn(
27255
+ "text-sm leading-relaxed md:text-base",
27256
+ getTextColor(background, "muted"),
27257
+ integration.descriptionClassName
27258
+ ),
27259
+ children: integration.description
27260
+ }
27261
+ ))
26993
27262
  ] })
26994
27263
  ] });
27264
+ const cardClasses = cn(
27265
+ "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300",
27266
+ getBorderColor(background),
27267
+ "hover:shadow-lg",
27268
+ cardClassName,
27269
+ integration.className
27270
+ );
26995
27271
  if (integration.link) {
26996
27272
  return /* @__PURE__ */ jsxRuntime.jsx(
26997
27273
  Pressable,
26998
27274
  {
26999
27275
  href: integration.link,
27000
- className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
27276
+ className: cardClasses,
27001
27277
  children: cardContent
27002
27278
  },
27003
27279
  index
27004
27280
  );
27005
27281
  }
27006
- return /* @__PURE__ */ jsxRuntime.jsx(
27007
- "div",
27008
- {
27009
- className: cn("flex flex-col gap-4 rounded-xl border p-6 transition-colors duration-300", cardClassName, integration.className),
27010
- children: cardContent
27011
- },
27012
- index
27013
- );
27282
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClasses, children: cardContent }, index);
27014
27283
  });
27015
- }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel]);
27284
+ }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel, background]);
27016
27285
  return /* @__PURE__ */ jsxRuntime.jsxs(
27017
27286
  Section,
27018
27287
  {
@@ -27375,7 +27644,7 @@ function FeatureImageOverlayBadge({
27375
27644
  overlayTitleClassName,
27376
27645
  optixFlowConfig,
27377
27646
  background,
27378
- spacing = "py-6 md:py-32",
27647
+ spacing = "py-12 md:py-20 lg:py-24",
27379
27648
  pattern,
27380
27649
  patternOpacity,
27381
27650
  patternClassName
@@ -27478,7 +27747,27 @@ function FeatureImageOverlayBadge({
27478
27747
  children: title
27479
27748
  }
27480
27749
  )),
27481
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:text-lg", descriptionClassName), children: description })),
27750
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
27751
+ "p",
27752
+ {
27753
+ className: cn(
27754
+ "text-base leading-relaxed lg:text-lg",
27755
+ getTextColor(background, "muted"),
27756
+ descriptionClassName
27757
+ ),
27758
+ children: description
27759
+ }
27760
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
27761
+ "div",
27762
+ {
27763
+ className: cn(
27764
+ "text-base leading-relaxed lg:text-lg",
27765
+ getTextColor(background, "muted"),
27766
+ descriptionClassName
27767
+ ),
27768
+ children: description
27769
+ }
27770
+ )),
27482
27771
  /* @__PURE__ */ jsxRuntime.jsx(
27483
27772
  "div",
27484
27773
  {
@@ -27497,31 +27786,31 @@ function FeatureImageOverlayBadge({
27497
27786
  "div",
27498
27787
  {
27499
27788
  className: cn(
27500
- "absolute top-0 right-0 bottom-0 left-0 rounded-2xl bg-linear-to-t from-foreground via-foreground/20 to-transparent",
27789
+ "absolute inset-0 rounded-2xl bg-gradient-to-t from-black/80 via-black/30 to-transparent",
27501
27790
  overlayClassName
27502
27791
  )
27503
27792
  }
27504
27793
  ),
27505
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between pt-4 pr-4 pl-4 pb-8 md:pt-7 md:bpr-7 md:pl-7 md:pb-7 rounded-2xl", children: [
27794
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-between rounded-2xl p-5 md:p-7", children: [
27506
27795
  (avatarSrc || avatarBadgeText) && /* @__PURE__ */ jsxRuntime.jsxs(
27507
27796
  "span",
27508
27797
  {
27509
27798
  className: cn(
27510
- "ml-auto flex w-fit items-center gap-2 rounded-full bg-foreground/30 px-4 py-2.5 text-sm font-semibold backdrop-blur-sm shadow-xl",
27799
+ "ml-auto flex w-fit items-center gap-2 rounded-full bg-white/20 px-4 py-2.5 text-sm font-semibold text-white backdrop-blur-md shadow-lg",
27511
27800
  avatarBadgeClassName
27512
27801
  ),
27513
27802
  children: [
27514
- avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
27803
+ avatarSrc && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full ring-2 ring-white/30", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarSrc, alt: "Avatar" }) }),
27515
27804
  avatarBadgeText
27516
27805
  ]
27517
27806
  }
27518
27807
  ),
27519
- (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
27808
+ (overlayTitle || overlayLinkText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
27520
27809
  overlayTitle && (typeof overlayTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
27521
27810
  "h4",
27522
27811
  {
27523
27812
  className: cn(
27524
- "text-lg font-semibold lg:text-3xl",
27813
+ "text-lg font-semibold text-white lg:text-2xl xl:text-3xl",
27525
27814
  overlayTitleClassName
27526
27815
  ),
27527
27816
  children: overlayTitle
@@ -27530,7 +27819,7 @@ function FeatureImageOverlayBadge({
27530
27819
  "div",
27531
27820
  {
27532
27821
  className: cn(
27533
- "text-lg font-semibold lg:text-3xl",
27822
+ "text-lg font-semibold text-white lg:text-2xl xl:text-3xl",
27534
27823
  overlayTitleClassName
27535
27824
  ),
27536
27825
  children: overlayTitle
@@ -27541,9 +27830,10 @@ function FeatureImageOverlayBadge({
27541
27830
  {
27542
27831
  href: overlayLinkUrl,
27543
27832
  onClick: overlayLinkOnClick,
27833
+ className: "flex w-fit items-center gap-2 font-medium text-white transition-opacity hover:opacity-80",
27544
27834
  children: [
27545
27835
  overlayLinkText,
27546
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 18 })
27836
+ /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
27547
27837
  ]
27548
27838
  }
27549
27839
  )