@opensite/ui 1.6.5 → 1.6.6

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 (23) hide show
  1. package/dist/hero-overlay-cta-grid.cjs +1 -1
  2. package/dist/hero-overlay-cta-grid.js +1 -1
  3. package/dist/hero-pattern-badge-logos.cjs +2 -3
  4. package/dist/hero-pattern-badge-logos.d.cts +1 -5
  5. package/dist/hero-pattern-badge-logos.d.ts +1 -5
  6. package/dist/hero-pattern-badge-logos.js +2 -3
  7. package/dist/hero-pattern-logo-tech-stack.cjs +2 -2
  8. package/dist/hero-pattern-logo-tech-stack.js +2 -2
  9. package/dist/hero-platform-features-grid.cjs +75 -44
  10. package/dist/hero-platform-features-grid.d.cts +5 -1
  11. package/dist/hero-platform-features-grid.d.ts +5 -1
  12. package/dist/hero-platform-features-grid.js +75 -44
  13. package/dist/hero-tech-carousel.cjs +83 -88
  14. package/dist/hero-tech-carousel.d.cts +1 -1
  15. package/dist/hero-tech-carousel.d.ts +1 -1
  16. package/dist/hero-tech-carousel.js +83 -88
  17. package/dist/link-page-newsletter-social.cjs +17 -7
  18. package/dist/link-page-newsletter-social.js +17 -7
  19. package/dist/link-tree-block.cjs +7 -16
  20. package/dist/link-tree-block.js +7 -16
  21. package/dist/registry.cjs +187 -79
  22. package/dist/registry.js +187 -79
  23. package/package.json +1 -1
package/dist/hero-overlay-cta-grid.cjs CHANGED
@@ -1036,7 +1036,7 @@ function HeroOverlayCtaGrid({
1036
1036
  containerClassName,
1037
1037
  children: [
1038
1038
  renderBackground,
1039
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-12", children: [
1039
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-12 px-6", children: [
1040
1040
  /* @__PURE__ */ jsxRuntime.jsxs(
1041
1041
  framerMotion.motion.div,
1042
1042
  {
package/dist/hero-overlay-cta-grid.js CHANGED
@@ -1015,7 +1015,7 @@ function HeroOverlayCtaGrid({
1015
1015
  containerClassName,
1016
1016
  children: [
1017
1017
  renderBackground,
1018
- /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-12", children: [
1018
+ /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-12 px-6", children: [
1019
1019
  /* @__PURE__ */ jsxs(
1020
1020
  motion.div,
1021
1021
  {
package/dist/hero-pattern-badge-logos.cjs CHANGED
@@ -879,7 +879,6 @@ function HeroPatternBadgeLogos({
879
879
  badgeClassName,
880
880
  actionsClassName,
881
881
  logosClassName,
882
- backgroundClassName,
883
882
  optixFlowConfig
884
883
  }) {
885
884
  const renderActions = React.useMemo(() => {
@@ -973,7 +972,7 @@ function HeroPatternBadgeLogos({
973
972
  spacing,
974
973
  pattern,
975
974
  patternOpacity,
976
- className: cn("relative p-0", className),
975
+ className,
977
976
  containerClassName,
978
977
  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
979
978
  "div",
@@ -1025,7 +1024,7 @@ function HeroPatternBadgeLogos({
1025
1024
  ),
1026
1025
  children: [
1027
1026
  logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
1028
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4 w-full", children: renderLogos })
1027
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center flex-wrap gap-12", children: renderLogos })
1029
1028
  ]
1030
1029
  }
1031
1030
  )
package/dist/hero-pattern-badge-logos.d.cts CHANGED
@@ -87,15 +87,11 @@ interface HeroPatternBadgeLogosProps {
87
87
  * Additional CSS classes for the logos container
88
88
  */
89
89
  logosClassName?: string;
90
- /**
91
- * Additional CSS classes for the background pattern
92
- */
93
- backgroundClassName?: string;
94
90
  /**
95
91
  * OptixFlow image optimization configuration
96
92
  */
97
93
  optixFlowConfig?: OptixFlowConfig;
98
94
  }
99
- declare function HeroPatternBadgeLogos({ badge, heading, description, actions, actionsSlot, logos, logosSlot, logosTagline, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, badgeClassName, actionsClassName, logosClassName, backgroundClassName, optixFlowConfig, }: HeroPatternBadgeLogosProps): React.JSX.Element;
95
+ declare function HeroPatternBadgeLogos({ badge, heading, description, actions, actionsSlot, logos, logosSlot, logosTagline, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, badgeClassName, actionsClassName, logosClassName, optixFlowConfig, }: HeroPatternBadgeLogosProps): React.JSX.Element;
100
96
 
101
97
  export { HeroPatternBadgeLogos, type HeroPatternBadgeLogosProps };
package/dist/hero-pattern-badge-logos.d.ts CHANGED
@@ -87,15 +87,11 @@ interface HeroPatternBadgeLogosProps {
87
87
  * Additional CSS classes for the logos container
88
88
  */
89
89
  logosClassName?: string;
90
- /**
91
- * Additional CSS classes for the background pattern
92
- */
93
- backgroundClassName?: string;
94
90
  /**
95
91
  * OptixFlow image optimization configuration
96
92
  */
97
93
  optixFlowConfig?: OptixFlowConfig;
98
94
  }
99
- declare function HeroPatternBadgeLogos({ badge, heading, description, actions, actionsSlot, logos, logosSlot, logosTagline, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, badgeClassName, actionsClassName, logosClassName, backgroundClassName, optixFlowConfig, }: HeroPatternBadgeLogosProps): React.JSX.Element;
95
+ declare function HeroPatternBadgeLogos({ badge, heading, description, actions, actionsSlot, logos, logosSlot, logosTagline, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, badgeClassName, actionsClassName, logosClassName, optixFlowConfig, }: HeroPatternBadgeLogosProps): React.JSX.Element;
100
96
 
101
97
  export { HeroPatternBadgeLogos, type HeroPatternBadgeLogosProps };
package/dist/hero-pattern-badge-logos.js CHANGED
@@ -858,7 +858,6 @@ function HeroPatternBadgeLogos({
858
858
  badgeClassName,
859
859
  actionsClassName,
860
860
  logosClassName,
861
- backgroundClassName,
862
861
  optixFlowConfig
863
862
  }) {
864
863
  const renderActions = useMemo(() => {
@@ -952,7 +951,7 @@ function HeroPatternBadgeLogos({
952
951
  spacing,
953
952
  pattern,
954
953
  patternOpacity,
955
- className: cn("relative p-0", className),
954
+ className,
956
955
  containerClassName,
957
956
  children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
958
957
  "div",
@@ -1004,7 +1003,7 @@ function HeroPatternBadgeLogos({
1004
1003
  ),
1005
1004
  children: [
1006
1005
  logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
1007
- /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4 w-full", children: renderLogos })
1006
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-wrap gap-12", children: renderLogos })
1008
1007
  ]
1009
1008
  }
1010
1009
  )
package/dist/hero-pattern-logo-tech-stack.cjs CHANGED
@@ -912,14 +912,14 @@ function HeroPatternLogoTechStack({
912
912
  ),
913
913
  children: [
914
914
  techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium lg:text-left"), children: techStackLabel }) : techStackLabel),
915
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: techLogos.map((techLogo, index) => {
915
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row flex-wrap items-center justify-center gap-8 md:gap-4", children: techLogos.map((techLogo, index) => {
916
916
  const techLogoSrc = typeof techLogo.src === "string" ? techLogo.src : techLogo.src.light;
917
917
  return /* @__PURE__ */ jsxRuntime.jsx(
918
918
  Pressable,
919
919
  {
920
920
  href: techLogo.href,
921
921
  className: cn(
922
- "group flex w-auto h-10 items-center justify-center max-w-12 max-h-10 min-h-10 p-1",
922
+ "group flex w-auto h-12 md:h-10 items-center justify-center max-w-full md:max-w-30 max-h-12 md:max-h-10 min-h-12 md:min-h-10 p-2 md:p-1",
923
923
  techLogo.className
924
924
  ),
925
925
  children: /* @__PURE__ */ jsxRuntime.jsx(
package/dist/hero-pattern-logo-tech-stack.js CHANGED
@@ -891,14 +891,14 @@ function HeroPatternLogoTechStack({
891
891
  ),
892
892
  children: [
893
893
  techStackLabel && (typeof techStackLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-medium lg:text-left"), children: techStackLabel }) : techStackLabel),
894
- /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: techLogos.map((techLogo, index) => {
894
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col md:flex-row flex-wrap items-center justify-center gap-8 md:gap-4", children: techLogos.map((techLogo, index) => {
895
895
  const techLogoSrc = typeof techLogo.src === "string" ? techLogo.src : techLogo.src.light;
896
896
  return /* @__PURE__ */ jsx(
897
897
  Pressable,
898
898
  {
899
899
  href: techLogo.href,
900
900
  className: cn(
901
- "group flex w-auto h-10 items-center justify-center max-w-12 max-h-10 min-h-10 p-1",
901
+ "group flex w-auto h-12 md:h-10 items-center justify-center max-w-full md:max-w-30 max-h-12 md:max-h-10 min-h-12 md:min-h-10 p-2 md:p-1",
902
902
  techLogo.className
903
903
  ),
904
904
  children: /* @__PURE__ */ jsx(
package/dist/hero-platform-features-grid.cjs CHANGED
@@ -32,32 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
32
32
  function cn(...inputs) {
33
33
  return tailwindMerge.twMerge(clsx.clsx(inputs));
34
34
  }
35
- function getTextColor(parentBg, variant = "default", options) {
36
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
37
- if (isDark) {
38
- switch (variant) {
39
- case "default":
40
- return "text-foreground";
41
- case "muted":
42
- return "text-foreground/80";
43
- case "subtle":
44
- return "text-foreground/60";
45
- case "accent":
46
- return "text-accent-foreground";
47
- }
48
- } else {
49
- switch (variant) {
50
- case "default":
51
- return "text-foreground";
52
- case "muted":
53
- return "text-muted-foreground";
54
- case "subtle":
55
- return "text-muted-foreground/70";
56
- case "accent":
57
- return "text-primary";
58
- }
59
- }
60
- }
61
35
  function normalizePhoneNumber(input) {
62
36
  const trimmed = input.trim();
63
37
  if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -960,17 +934,18 @@ function HeroPlatformFeaturesGrid({
960
934
  logo,
961
935
  logoSlot,
962
936
  subtitle,
937
+ description,
963
938
  heading,
964
939
  action,
965
940
  actionSlot,
966
941
  features,
967
942
  featuresSlot,
968
943
  background,
969
- spacing,
944
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
945
+ spacing = "py-6 md:py-32",
970
946
  pattern,
971
947
  patternOpacity,
972
948
  className,
973
- containerClassName,
974
949
  headerClassName,
975
950
  headingClassName,
976
951
  featuresClassName,
@@ -985,7 +960,10 @@ function HeroPlatformFeaturesGrid({
985
960
  {
986
961
  src: logoSrc,
987
962
  alt: logo.alt,
988
- className: cn("mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28", logo.imgClassName),
963
+ className: cn(
964
+ "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28",
965
+ logo.imgClassName
966
+ ),
989
967
  optixFlowConfig
990
968
  }
991
969
  );
@@ -993,7 +971,14 @@ function HeroPlatformFeaturesGrid({
993
971
  const renderAction = React.useMemo(() => {
994
972
  if (actionSlot) return actionSlot;
995
973
  if (!action) return null;
996
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
974
+ const {
975
+ label,
976
+ icon,
977
+ iconAfter,
978
+ children,
979
+ className: actionClassName,
980
+ ...pressableProps
981
+ } = action;
997
982
  return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
998
983
  icon,
999
984
  label,
@@ -1003,13 +988,30 @@ function HeroPlatformFeaturesGrid({
1003
988
  const renderFeatures = React.useMemo(() => {
1004
989
  if (featuresSlot) return featuresSlot;
1005
990
  if (!features || features.length === 0) return null;
1006
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 bg-background p-5 md:gap-6", children: [
1007
- feature.icon ?? (feature.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
1008
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1009
- feature.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
1010
- feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted")), children: feature.description })
1011
- ] })
1012
- ] }, index)) });
991
+ return /* @__PURE__ */ jsxRuntime.jsx(
992
+ "div",
993
+ {
994
+ className: cn(
995
+ "mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
996
+ featuresClassName
997
+ ),
998
+ children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
999
+ Pressable,
1000
+ {
1001
+ href: feature.href,
1002
+ className: "flex flex-col gap-3 bg-card text-card-foreground p-5 md:gap-6",
1003
+ children: [
1004
+ feature.icon ?? (feature.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
1005
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1006
+ feature.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
1007
+ feature.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm md:text-base"), children: feature.description })
1008
+ ] })
1009
+ ]
1010
+ },
1011
+ index
1012
+ ))
1013
+ }
1014
+ );
1013
1015
  }, [featuresSlot, features, featuresClassName]);
1014
1016
  return /* @__PURE__ */ jsxRuntime.jsx(
1015
1017
  Section,
@@ -1019,13 +1021,42 @@ function HeroPlatformFeaturesGrid({
1019
1021
  pattern,
1020
1022
  patternOpacity,
1021
1023
  className: cn(className),
1022
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
1023
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-center", headerClassName), children: [
1024
- renderLogo,
1025
- subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base", getTextColor(background, "muted")), children: subtitle }) : subtitle),
1026
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
1027
- renderAction
1028
- ] }),
1024
+ containerClassName,
1025
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center w-full", children: [
1026
+ /* @__PURE__ */ jsxRuntime.jsxs(
1027
+ "div",
1028
+ {
1029
+ className: cn(
1030
+ "flex flex-col items-center w-full gap-6 text-center",
1031
+ headerClassName
1032
+ ),
1033
+ children: [
1034
+ renderLogo,
1035
+ subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base"), children: subtitle }) : subtitle),
1036
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1037
+ "h1",
1038
+ {
1039
+ className: cn(
1040
+ "mt-4 text-4xl font-semibold text-balance lg:text-6xl",
1041
+ headingClassName
1042
+ ),
1043
+ children: heading
1044
+ }
1045
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
1046
+ "h1",
1047
+ {
1048
+ className: cn(
1049
+ "mt-4 text-4xl font-semibold text-balance lg:text-6xl",
1050
+ headingClassName
1051
+ ),
1052
+ children: heading
1053
+ }
1054
+ )),
1055
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
1056
+ renderAction
1057
+ ]
1058
+ }
1059
+ ),
1029
1060
  renderFeatures
1030
1061
  ] })
1031
1062
  }
package/dist/hero-platform-features-grid.d.cts CHANGED
@@ -19,6 +19,10 @@ interface HeroPlatformFeaturesGridProps {
19
19
  * Subtitle/label text above heading
20
20
  */
21
21
  subtitle?: React.ReactNode;
22
+ /**
23
+ * Supporting description content
24
+ */
25
+ description?: React.ReactNode;
22
26
  /**
23
27
  * Main heading content
24
28
  */
@@ -81,6 +85,6 @@ interface HeroPlatformFeaturesGridProps {
81
85
  */
82
86
  optixFlowConfig?: OptixFlowConfig;
83
87
  }
84
- declare function HeroPlatformFeaturesGrid({ logo, logoSlot, subtitle, heading, action, actionSlot, features, featuresSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, featuresClassName, optixFlowConfig, }: HeroPlatformFeaturesGridProps): React.JSX.Element;
88
+ declare function HeroPlatformFeaturesGrid({ logo, logoSlot, subtitle, description, heading, action, actionSlot, features, featuresSlot, background, containerClassName, spacing, pattern, patternOpacity, className, headerClassName, headingClassName, featuresClassName, optixFlowConfig, }: HeroPlatformFeaturesGridProps): React.JSX.Element;
85
89
 
86
90
  export { HeroPlatformFeaturesGrid, type HeroPlatformFeaturesGridProps };
package/dist/hero-platform-features-grid.d.ts CHANGED
@@ -19,6 +19,10 @@ interface HeroPlatformFeaturesGridProps {
19
19
  * Subtitle/label text above heading
20
20
  */
21
21
  subtitle?: React.ReactNode;
22
+ /**
23
+ * Supporting description content
24
+ */
25
+ description?: React.ReactNode;
22
26
  /**
23
27
  * Main heading content
24
28
  */
@@ -81,6 +85,6 @@ interface HeroPlatformFeaturesGridProps {
81
85
  */
82
86
  optixFlowConfig?: OptixFlowConfig;
83
87
  }
84
- declare function HeroPlatformFeaturesGrid({ logo, logoSlot, subtitle, heading, action, actionSlot, features, featuresSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, featuresClassName, optixFlowConfig, }: HeroPlatformFeaturesGridProps): React.JSX.Element;
88
+ declare function HeroPlatformFeaturesGrid({ logo, logoSlot, subtitle, description, heading, action, actionSlot, features, featuresSlot, background, containerClassName, spacing, pattern, patternOpacity, className, headerClassName, headingClassName, featuresClassName, optixFlowConfig, }: HeroPlatformFeaturesGridProps): React.JSX.Element;
85
89
 
86
90
  export { HeroPlatformFeaturesGrid, type HeroPlatformFeaturesGridProps };
package/dist/hero-platform-features-grid.js CHANGED
@@ -11,32 +11,6 @@ import { Img } from '@page-speed/img';
11
11
  function cn(...inputs) {
12
12
  return twMerge(clsx(inputs));
13
13
  }
14
- function getTextColor(parentBg, variant = "default", options) {
15
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
16
- if (isDark) {
17
- switch (variant) {
18
- case "default":
19
- return "text-foreground";
20
- case "muted":
21
- return "text-foreground/80";
22
- case "subtle":
23
- return "text-foreground/60";
24
- case "accent":
25
- return "text-accent-foreground";
26
- }
27
- } else {
28
- switch (variant) {
29
- case "default":
30
- return "text-foreground";
31
- case "muted":
32
- return "text-muted-foreground";
33
- case "subtle":
34
- return "text-muted-foreground/70";
35
- case "accent":
36
- return "text-primary";
37
- }
38
- }
39
- }
40
14
  function normalizePhoneNumber(input) {
41
15
  const trimmed = input.trim();
42
16
  if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -939,17 +913,18 @@ function HeroPlatformFeaturesGrid({
939
913
  logo,
940
914
  logoSlot,
941
915
  subtitle,
916
+ description,
942
917
  heading,
943
918
  action,
944
919
  actionSlot,
945
920
  features,
946
921
  featuresSlot,
947
922
  background,
948
- spacing,
923
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
924
+ spacing = "py-6 md:py-32",
949
925
  pattern,
950
926
  patternOpacity,
951
927
  className,
952
- containerClassName,
953
928
  headerClassName,
954
929
  headingClassName,
955
930
  featuresClassName,
@@ -964,7 +939,10 @@ function HeroPlatformFeaturesGrid({
964
939
  {
965
940
  src: logoSrc,
966
941
  alt: logo.alt,
967
- className: cn("mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28", logo.imgClassName),
942
+ className: cn(
943
+ "mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28",
944
+ logo.imgClassName
945
+ ),
968
946
  optixFlowConfig
969
947
  }
970
948
  );
@@ -972,7 +950,14 @@ function HeroPlatformFeaturesGrid({
972
950
  const renderAction = useMemo(() => {
973
951
  if (actionSlot) return actionSlot;
974
952
  if (!action) return null;
975
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
953
+ const {
954
+ label,
955
+ icon,
956
+ iconAfter,
957
+ children,
958
+ className: actionClassName,
959
+ ...pressableProps
960
+ } = action;
976
961
  return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
977
962
  icon,
978
963
  label,
@@ -982,13 +967,30 @@ function HeroPlatformFeaturesGrid({
982
967
  const renderFeatures = useMemo(() => {
983
968
  if (featuresSlot) return featuresSlot;
984
969
  if (!features || features.length === 0) return null;
985
- return /* @__PURE__ */ jsx("div", { className: cn("mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 bg-background p-5 md:gap-6", children: [
986
- feature.icon ?? (feature.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
987
- /* @__PURE__ */ jsxs("div", { children: [
988
- feature.title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
989
- feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base", getTextColor(background, "muted")), children: feature.description })
990
- ] })
991
- ] }, index)) });
970
+ return /* @__PURE__ */ jsx(
971
+ "div",
972
+ {
973
+ className: cn(
974
+ "mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4 w-full",
975
+ featuresClassName
976
+ ),
977
+ children: features.map((feature, index) => /* @__PURE__ */ jsxs(
978
+ Pressable,
979
+ {
980
+ href: feature.href,
981
+ className: "flex flex-col gap-3 bg-card text-card-foreground p-5 md:gap-6",
982
+ children: [
983
+ feature.icon ?? (feature.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24 })),
984
+ /* @__PURE__ */ jsxs("div", { children: [
985
+ feature.title && /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold md:text-base", children: feature.title }),
986
+ feature.description && /* @__PURE__ */ jsx("p", { className: cn("text-sm md:text-base"), children: feature.description })
987
+ ] })
988
+ ]
989
+ },
990
+ index
991
+ ))
992
+ }
993
+ );
992
994
  }, [featuresSlot, features, featuresClassName]);
993
995
  return /* @__PURE__ */ jsx(
994
996
  Section,
@@ -998,13 +1000,42 @@ function HeroPlatformFeaturesGrid({
998
1000
  pattern,
999
1001
  patternOpacity,
1000
1002
  className: cn(className),
1001
- children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
1002
- /* @__PURE__ */ jsxs("div", { className: cn("text-center", headerClassName), children: [
1003
- renderLogo,
1004
- subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base", getTextColor(background, "muted")), children: subtitle }) : subtitle),
1005
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading })),
1006
- renderAction
1007
- ] }),
1003
+ containerClassName,
1004
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center w-full", children: [
1005
+ /* @__PURE__ */ jsxs(
1006
+ "div",
1007
+ {
1008
+ className: cn(
1009
+ "flex flex-col items-center w-full gap-6 text-center",
1010
+ headerClassName
1011
+ ),
1012
+ children: [
1013
+ renderLogo,
1014
+ subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("span", { className: cn("mb-3 text-sm tracking-widest md:text-base"), children: subtitle }) : subtitle),
1015
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
1016
+ "h1",
1017
+ {
1018
+ className: cn(
1019
+ "mt-4 text-4xl font-semibold text-balance lg:text-6xl",
1020
+ headingClassName
1021
+ ),
1022
+ children: heading
1023
+ }
1024
+ ) : /* @__PURE__ */ jsx(
1025
+ "h1",
1026
+ {
1027
+ className: cn(
1028
+ "mt-4 text-4xl font-semibold text-balance lg:text-6xl",
1029
+ headingClassName
1030
+ ),
1031
+ children: heading
1032
+ }
1033
+ )),
1034
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl md:text-lg text-balance"), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("max-w-2xl md:text-lg text-balance"), children: description })),
1035
+ renderAction
1036
+ ]
1037
+ }
1038
+ ),
1008
1039
  renderFeatures
1009
1040
  ] })
1010
1041
  }