@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/components.cjs +160 -54
- package/dist/components.js +160 -54
- package/dist/feature-bento-utilities.cjs +101 -87
- package/dist/feature-bento-utilities.js +101 -87
- package/dist/feature-checklist-three-column.cjs +75 -43
- package/dist/feature-checklist-three-column.js +75 -43
- package/dist/feature-image-overlay-badge.cjs +57 -10
- package/dist/feature-image-overlay-badge.js +57 -10
- package/dist/feature-integration-cards.cjs +105 -19
- package/dist/feature-integration-cards.js +105 -19
- package/dist/feature-utility-cards-grid.cjs +79 -9
- package/dist/feature-utility-cards-grid.js +79 -9
- package/dist/footer-animated-social.cjs +66 -10
- package/dist/footer-animated-social.d.cts +5 -1
- package/dist/footer-animated-social.d.ts +5 -1
- package/dist/footer-animated-social.js +66 -10
- package/dist/footer-contact-card.cjs +94 -44
- package/dist/footer-contact-card.d.cts +5 -1
- package/dist/footer-contact-card.d.ts +5 -1
- package/dist/footer-contact-card.js +94 -44
- package/dist/index.cjs +160 -54
- package/dist/index.js +160 -54
- package/dist/registry.cjs +486 -196
- package/dist/registry.js +486 -196
- package/package.json +1 -1
package/dist/registry.cjs
CHANGED
|
@@ -23681,7 +23681,8 @@ function FooterContactCard({
|
|
|
23681
23681
|
copyrightClassName,
|
|
23682
23682
|
locationClassName,
|
|
23683
23683
|
background,
|
|
23684
|
-
|
|
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(
|
|
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(
|
|
23731
|
-
|
|
23732
|
-
|
|
23733
|
-
|
|
23734
|
-
|
|
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
|
|
23741
|
-
|
|
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
|
-
)
|
|
23745
|
-
|
|
23746
|
-
|
|
23747
|
-
|
|
23748
|
-
|
|
23749
|
-
|
|
23750
|
-
|
|
23751
|
-
|
|
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
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
23994
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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:
|
|
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(
|
|
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(
|
|
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(
|
|
26623
|
-
|
|
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(
|
|
26725
|
-
|
|
26726
|
-
|
|
26727
|
-
|
|
26728
|
-
|
|
26729
|
-
|
|
26730
|
-
|
|
26731
|
-
|
|
26732
|
-
|
|
26733
|
-
|
|
26734
|
-
|
|
26735
|
-
|
|
26736
|
-
|
|
26737
|
-
|
|
26738
|
-
|
|
26739
|
-
|
|
26740
|
-
|
|
26741
|
-
|
|
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
|
-
|
|
26759
|
-
/* @__PURE__ */ jsxRuntime.
|
|
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
|
-
|
|
26766
|
-
|
|
26767
|
-
|
|
26768
|
-
|
|
26769
|
-
|
|
26770
|
-
|
|
26771
|
-
|
|
26772
|
-
|
|
26773
|
-
|
|
26774
|
-
|
|
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
|
|
26944
|
+
className,
|
|
26789
26945
|
containerClassName: cn("max-w-7xl", containerClassName),
|
|
26790
26946
|
children: [
|
|
26791
|
-
(labelIconElement || label) && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
26792
|
-
|
|
26793
|
-
|
|
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(
|
|
26797
|
-
|
|
26798
|
-
|
|
26799
|
-
|
|
26800
|
-
|
|
26801
|
-
|
|
26802
|
-
|
|
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",
|
|
26842
|
-
/* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size:
|
|
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: "
|
|
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/
|
|
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(
|
|
26881
|
-
|
|
26882
|
-
|
|
26883
|
-
|
|
26884
|
-
|
|
26885
|
-
|
|
26886
|
-
|
|
26887
|
-
|
|
26888
|
-
|
|
26889
|
-
|
|
26890
|
-
|
|
26891
|
-
|
|
26892
|
-
|
|
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
|
-
|
|
26904
|
-
|
|
26905
|
-
|
|
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
|
-
|
|
26911
|
-
|
|
26912
|
-
|
|
26913
|
-
|
|
26914
|
-
|
|
26915
|
-
|
|
26916
|
-
|
|
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-
|
|
26929
|
-
title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-
|
|
26930
|
-
renderChecklistColumn(checklistColumn1, checklistColumn1Slot, "gap-
|
|
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(
|
|
26975
|
-
|
|
26976
|
-
|
|
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(
|
|
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(
|
|
26992
|
-
|
|
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:
|
|
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-
|
|
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(
|
|
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
|
|
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
|
|
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-
|
|
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-
|
|
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/
|
|
27836
|
+
/* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
|
|
27547
27837
|
]
|
|
27548
27838
|
}
|
|
27549
27839
|
)
|