@opensite/ui 1.6.9 → 1.7.0

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 (31) hide show
  1. package/dist/hero-billing-platform-logos.cjs +77 -52
  2. package/dist/hero-billing-platform-logos.js +77 -51
  3. package/dist/hero-conversion-video-play.cjs +240 -78
  4. package/dist/hero-conversion-video-play.js +233 -75
  5. package/dist/hero-customer-support-layered.cjs +1 -1
  6. package/dist/hero-customer-support-layered.js +1 -1
  7. package/dist/hero-dashed-border-features.cjs +33 -24
  8. package/dist/hero-dashed-border-features.js +33 -24
  9. package/dist/hero-design-showcase-logos.cjs +102 -38
  10. package/dist/hero-design-showcase-logos.js +102 -38
  11. package/dist/hero-grid-pattern-solutions.cjs +187 -49
  12. package/dist/hero-grid-pattern-solutions.d.cts +1 -4
  13. package/dist/hero-grid-pattern-solutions.d.ts +1 -4
  14. package/dist/hero-grid-pattern-solutions.js +188 -50
  15. package/dist/hero-marketplace-scattered-images.cjs +120 -79
  16. package/dist/hero-marketplace-scattered-images.js +120 -79
  17. package/dist/hero-mentorship-video-split.cjs +32 -13
  18. package/dist/hero-mentorship-video-split.js +32 -13
  19. package/dist/hero-premium-split-avatars.cjs +2 -2
  20. package/dist/hero-premium-split-avatars.js +2 -2
  21. package/dist/hero-productivity-launcher-video.cjs +45 -143
  22. package/dist/hero-productivity-launcher-video.d.cts +5 -23
  23. package/dist/hero-productivity-launcher-video.d.ts +5 -23
  24. package/dist/hero-productivity-launcher-video.js +45 -143
  25. package/dist/hero-split-spiral-shapes.cjs +47 -38
  26. package/dist/hero-split-spiral-shapes.js +47 -38
  27. package/dist/hero-task-timer-animated.cjs +59 -59
  28. package/dist/hero-task-timer-animated.js +59 -59
  29. package/dist/registry.cjs +772 -439
  30. package/dist/registry.js +772 -439
  31. package/package.json +1 -1
@@ -449,111 +449,6 @@ var Pressable = React__namespace.forwardRef(
449
449
  }
450
450
  );
451
451
  Pressable.displayName = "Pressable";
452
- var svgCache = /* @__PURE__ */ new Map();
453
- function DynamicIcon({
454
- name,
455
- size = 28,
456
- color,
457
- className,
458
- alt
459
- }) {
460
- const [svgContent, setSvgContent] = React__namespace.useState(null);
461
- const [isLoading, setIsLoading] = React__namespace.useState(true);
462
- const [error, setError] = React__namespace.useState(null);
463
- const { url, iconName } = React__namespace.useMemo(() => {
464
- const separator = name.includes("/") ? "/" : ":";
465
- const [prefix, iconName2] = name.split(separator);
466
- const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
467
- return {
468
- url: baseUrl,
469
- iconName: iconName2
470
- };
471
- }, [name, size]);
472
- React__namespace.useEffect(() => {
473
- let isMounted = true;
474
- const fetchSvg = async () => {
475
- const cached = svgCache.get(url);
476
- if (cached) {
477
- if (isMounted) {
478
- setSvgContent(cached);
479
- setIsLoading(false);
480
- }
481
- return;
482
- }
483
- try {
484
- setIsLoading(true);
485
- setError(null);
486
- const response = await fetch(url);
487
- if (!response.ok) {
488
- throw new Error(`Failed to fetch icon: ${response.status}`);
489
- }
490
- let svg = await response.text();
491
- svg = processSvgForCurrentColor(svg);
492
- svgCache.set(url, svg);
493
- if (isMounted) {
494
- setSvgContent(svg);
495
- setIsLoading(false);
496
- }
497
- } catch (err) {
498
- if (isMounted) {
499
- setError(err instanceof Error ? err.message : "Failed to load icon");
500
- setIsLoading(false);
501
- }
502
- }
503
- };
504
- fetchSvg();
505
- return () => {
506
- isMounted = false;
507
- };
508
- }, [url]);
509
- if (isLoading) {
510
- return /* @__PURE__ */ jsxRuntime.jsx(
511
- "span",
512
- {
513
- className: cn("inline-block", className),
514
- style: { width: size, height: size },
515
- "aria-hidden": "true"
516
- }
517
- );
518
- }
519
- if (error || !svgContent) {
520
- return /* @__PURE__ */ jsxRuntime.jsx(
521
- "span",
522
- {
523
- className: cn("inline-block", className),
524
- style: { width: size, height: size },
525
- role: "img",
526
- "aria-label": alt || iconName
527
- }
528
- );
529
- }
530
- return /* @__PURE__ */ jsxRuntime.jsx(
531
- "span",
532
- {
533
- className: cn("inline-flex items-center justify-center", className),
534
- style: {
535
- width: size,
536
- height: size,
537
- color: color || "inherit"
538
- },
539
- role: "img",
540
- "aria-label": alt || iconName,
541
- dangerouslySetInnerHTML: { __html: svgContent }
542
- }
543
- );
544
- }
545
- function processSvgForCurrentColor(svg) {
546
- let processed = svg;
547
- processed = processed.replace(
548
- /stroke=["'](#000000|#000|black)["']/gi,
549
- 'stroke="currentColor"'
550
- );
551
- processed = processed.replace(
552
- /fill=["'](#000000|#000|black)["']/gi,
553
- 'fill="currentColor"'
554
- );
555
- return processed;
556
- }
557
452
  var maxWidthStyles = {
558
453
  sm: "max-w-screen-sm",
559
454
  md: "max-w-screen-md",
@@ -936,12 +831,11 @@ function HeroProductivityLauncherVideo({
936
831
  actionsSlot,
937
832
  versionInfo,
938
833
  versionInfoSlot,
939
- secondaryCta,
940
- secondaryCtaSlot,
941
834
  videoSrc,
942
835
  videoSlot,
943
836
  background,
944
- spacing = "py-32 md:py-32",
837
+ spacing = "py-0 md:py-0",
838
+ containerClassName = "mx-auto w-screen min-h-screen h-full max-w-screen relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex flex-col items-center justify-center",
945
839
  pattern,
946
840
  patternOpacity,
947
841
  className,
@@ -953,7 +847,14 @@ function HeroProductivityLauncherVideo({
953
847
  if (actionsSlot) return actionsSlot;
954
848
  if (!actions || actions.length === 0) return null;
955
849
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: actions.map((action, index) => {
956
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
850
+ const {
851
+ label,
852
+ icon,
853
+ iconAfter,
854
+ children,
855
+ className: actionClassName,
856
+ ...pressableProps
857
+ } = action;
957
858
  return /* @__PURE__ */ jsxRuntime.jsx(
958
859
  Pressable,
959
860
  {
@@ -973,40 +874,15 @@ function HeroProductivityLauncherVideo({
973
874
  const renderVersionInfo = React.useMemo(() => {
974
875
  if (versionInfoSlot) return versionInfoSlot;
975
876
  if (!versionInfo) return null;
976
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
877
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs text-white", children: [
977
878
  versionInfo.version && /* @__PURE__ */ jsxRuntime.jsx("span", { children: versionInfo.version }),
978
879
  versionInfo.osRequirement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
979
880
  versionInfo.installMethod && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
980
881
  ] });
981
882
  }, [versionInfoSlot, versionInfo]);
982
- const renderSecondaryCta = React.useMemo(() => {
983
- if (secondaryCtaSlot) return secondaryCtaSlot;
984
- if (!secondaryCta) return null;
985
- return /* @__PURE__ */ jsxRuntime.jsxs(
986
- Pressable,
987
- {
988
- href: secondaryCta.href,
989
- className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
990
- children: [
991
- secondaryCta.primaryText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.primaryText }),
992
- secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
993
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.secondaryText }),
994
- /* @__PURE__ */ jsxRuntime.jsx(
995
- DynamicIcon,
996
- {
997
- name: "lucide/arrow-right",
998
- size: 16,
999
- className: "stroke-muted-foreground"
1000
- }
1001
- )
1002
- ] })
1003
- ]
1004
- }
1005
- );
1006
- }, [secondaryCtaSlot, secondaryCta]);
1007
883
  const renderVideo = React.useMemo(() => {
1008
884
  if (videoSlot) return videoSlot;
1009
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-24 z-10 h-full w-full before:absolute before:inset-0 before:size-full before:bg-[radial-gradient(circle_at_center,rgba(10,10,10,.3)_15%,rgba(10,10,10,1)_45%)] before:content-['']", children: /* @__PURE__ */ jsxRuntime.jsx(
885
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
1010
886
  "video",
1011
887
  {
1012
888
  src: videoSrc,
@@ -1014,7 +890,7 @@ function HeroProductivityLauncherVideo({
1014
890
  muted: true,
1015
891
  autoPlay: true,
1016
892
  controls: false,
1017
- className: "block size-full object-cover object-center bg-blend-saturation"
893
+ className: "block size-full object-cover object-center brightness-50"
1018
894
  }
1019
895
  ) });
1020
896
  }, [videoSlot, videoSrc]);
@@ -1025,19 +901,45 @@ function HeroProductivityLauncherVideo({
1025
901
  spacing,
1026
902
  pattern,
1027
903
  patternOpacity,
1028
- className: cn("relative flex items-center justify-center dark overflow-hidden bg-background py-12 font-sans md:py-20", className),
1029
- containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
904
+ className,
905
+ containerClassName,
1030
906
  children: [
1031
907
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
1032
908
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
1033
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
1034
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
909
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
910
+ "h1",
911
+ {
912
+ className: cn(
913
+ "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
914
+ headingClassName
915
+ ),
916
+ children: heading
917
+ }
918
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
919
+ "h1",
920
+ {
921
+ className: cn(
922
+ "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
923
+ headingClassName
924
+ ),
925
+ children: heading
926
+ }
927
+ )) }),
928
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
929
+ "p",
930
+ {
931
+ className: cn(
932
+ "text-center text-sm leading-normal tracking-tight text-balance md:text-lg text-white",
933
+ descriptionClassName
934
+ ),
935
+ children: description
936
+ }
937
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
1035
938
  ] }),
1036
939
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
1037
940
  renderActions,
1038
941
  renderVersionInfo
1039
- ] }),
1040
- renderSecondaryCta
942
+ ] })
1041
943
  ] }) }),
1042
944
  renderVideo
1043
945
  ]
@@ -24,20 +24,6 @@ interface VersionInfo {
24
24
  */
25
25
  installAction?: () => void;
26
26
  }
27
- interface SecondaryCtaConfig {
28
- /**
29
- * Primary text (e.g., "Download on iOS")
30
- */
31
- primaryText?: string;
32
- /**
33
- * Secondary text (e.g., "Join waitlist")
34
- */
35
- secondaryText?: string;
36
- /**
37
- * Link destination
38
- */
39
- href?: string;
40
- }
41
27
  interface HeroProductivityLauncherVideoProps {
42
28
  /**
43
29
  * Main heading content
@@ -63,14 +49,6 @@ interface HeroProductivityLauncherVideoProps {
63
49
  * Custom slot for version info (overrides versionInfo prop)
64
50
  */
65
51
  versionInfoSlot?: React.ReactNode;
66
- /**
67
- * Secondary CTA configuration
68
- */
69
- secondaryCta?: SecondaryCtaConfig;
70
- /**
71
- * Custom slot for secondary CTA (overrides secondaryCta prop)
72
- */
73
- secondaryCtaSlot?: React.ReactNode;
74
52
  /**
75
53
  * Video source URL
76
54
  */
@@ -86,6 +64,10 @@ interface HeroProductivityLauncherVideoProps {
86
64
  * Vertical spacing for the section
87
65
  */
88
66
  spacing?: SectionSpacing;
67
+ /**
68
+ * Additional CSS classes for the container
69
+ */
70
+ containerClassName?: string;
89
71
  /**
90
72
  * Optional background pattern name
91
73
  */
@@ -111,6 +93,6 @@ interface HeroProductivityLauncherVideoProps {
111
93
  */
112
94
  descriptionClassName?: string;
113
95
  }
114
- declare function HeroProductivityLauncherVideo({ heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, secondaryCta, secondaryCtaSlot, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
96
+ declare function HeroProductivityLauncherVideo({ heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, videoSrc, videoSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
115
97
 
116
98
  export { HeroProductivityLauncherVideo, type HeroProductivityLauncherVideoProps };
@@ -24,20 +24,6 @@ interface VersionInfo {
24
24
  */
25
25
  installAction?: () => void;
26
26
  }
27
- interface SecondaryCtaConfig {
28
- /**
29
- * Primary text (e.g., "Download on iOS")
30
- */
31
- primaryText?: string;
32
- /**
33
- * Secondary text (e.g., "Join waitlist")
34
- */
35
- secondaryText?: string;
36
- /**
37
- * Link destination
38
- */
39
- href?: string;
40
- }
41
27
  interface HeroProductivityLauncherVideoProps {
42
28
  /**
43
29
  * Main heading content
@@ -63,14 +49,6 @@ interface HeroProductivityLauncherVideoProps {
63
49
  * Custom slot for version info (overrides versionInfo prop)
64
50
  */
65
51
  versionInfoSlot?: React.ReactNode;
66
- /**
67
- * Secondary CTA configuration
68
- */
69
- secondaryCta?: SecondaryCtaConfig;
70
- /**
71
- * Custom slot for secondary CTA (overrides secondaryCta prop)
72
- */
73
- secondaryCtaSlot?: React.ReactNode;
74
52
  /**
75
53
  * Video source URL
76
54
  */
@@ -86,6 +64,10 @@ interface HeroProductivityLauncherVideoProps {
86
64
  * Vertical spacing for the section
87
65
  */
88
66
  spacing?: SectionSpacing;
67
+ /**
68
+ * Additional CSS classes for the container
69
+ */
70
+ containerClassName?: string;
89
71
  /**
90
72
  * Optional background pattern name
91
73
  */
@@ -111,6 +93,6 @@ interface HeroProductivityLauncherVideoProps {
111
93
  */
112
94
  descriptionClassName?: string;
113
95
  }
114
- declare function HeroProductivityLauncherVideo({ heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, secondaryCta, secondaryCtaSlot, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
96
+ declare function HeroProductivityLauncherVideo({ heading, description, actions, actionsSlot, versionInfo, versionInfoSlot, videoSrc, videoSlot, background, spacing, containerClassName, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroProductivityLauncherVideoProps): React.JSX.Element;
115
97
 
116
98
  export { HeroProductivityLauncherVideo, type HeroProductivityLauncherVideoProps };
@@ -428,111 +428,6 @@ var Pressable = React.forwardRef(
428
428
  }
429
429
  );
430
430
  Pressable.displayName = "Pressable";
431
- var svgCache = /* @__PURE__ */ new Map();
432
- function DynamicIcon({
433
- name,
434
- size = 28,
435
- color,
436
- className,
437
- alt
438
- }) {
439
- const [svgContent, setSvgContent] = React.useState(null);
440
- const [isLoading, setIsLoading] = React.useState(true);
441
- const [error, setError] = React.useState(null);
442
- const { url, iconName } = React.useMemo(() => {
443
- const separator = name.includes("/") ? "/" : ":";
444
- const [prefix, iconName2] = name.split(separator);
445
- const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
446
- return {
447
- url: baseUrl,
448
- iconName: iconName2
449
- };
450
- }, [name, size]);
451
- React.useEffect(() => {
452
- let isMounted = true;
453
- const fetchSvg = async () => {
454
- const cached = svgCache.get(url);
455
- if (cached) {
456
- if (isMounted) {
457
- setSvgContent(cached);
458
- setIsLoading(false);
459
- }
460
- return;
461
- }
462
- try {
463
- setIsLoading(true);
464
- setError(null);
465
- const response = await fetch(url);
466
- if (!response.ok) {
467
- throw new Error(`Failed to fetch icon: ${response.status}`);
468
- }
469
- let svg = await response.text();
470
- svg = processSvgForCurrentColor(svg);
471
- svgCache.set(url, svg);
472
- if (isMounted) {
473
- setSvgContent(svg);
474
- setIsLoading(false);
475
- }
476
- } catch (err) {
477
- if (isMounted) {
478
- setError(err instanceof Error ? err.message : "Failed to load icon");
479
- setIsLoading(false);
480
- }
481
- }
482
- };
483
- fetchSvg();
484
- return () => {
485
- isMounted = false;
486
- };
487
- }, [url]);
488
- if (isLoading) {
489
- return /* @__PURE__ */ jsx(
490
- "span",
491
- {
492
- className: cn("inline-block", className),
493
- style: { width: size, height: size },
494
- "aria-hidden": "true"
495
- }
496
- );
497
- }
498
- if (error || !svgContent) {
499
- return /* @__PURE__ */ jsx(
500
- "span",
501
- {
502
- className: cn("inline-block", className),
503
- style: { width: size, height: size },
504
- role: "img",
505
- "aria-label": alt || iconName
506
- }
507
- );
508
- }
509
- return /* @__PURE__ */ jsx(
510
- "span",
511
- {
512
- className: cn("inline-flex items-center justify-center", className),
513
- style: {
514
- width: size,
515
- height: size,
516
- color: color || "inherit"
517
- },
518
- role: "img",
519
- "aria-label": alt || iconName,
520
- dangerouslySetInnerHTML: { __html: svgContent }
521
- }
522
- );
523
- }
524
- function processSvgForCurrentColor(svg) {
525
- let processed = svg;
526
- processed = processed.replace(
527
- /stroke=["'](#000000|#000|black)["']/gi,
528
- 'stroke="currentColor"'
529
- );
530
- processed = processed.replace(
531
- /fill=["'](#000000|#000|black)["']/gi,
532
- 'fill="currentColor"'
533
- );
534
- return processed;
535
- }
536
431
  var maxWidthStyles = {
537
432
  sm: "max-w-screen-sm",
538
433
  md: "max-w-screen-md",
@@ -915,12 +810,11 @@ function HeroProductivityLauncherVideo({
915
810
  actionsSlot,
916
811
  versionInfo,
917
812
  versionInfoSlot,
918
- secondaryCta,
919
- secondaryCtaSlot,
920
813
  videoSrc,
921
814
  videoSlot,
922
815
  background,
923
- spacing = "py-32 md:py-32",
816
+ spacing = "py-0 md:py-0",
817
+ containerClassName = "mx-auto w-screen min-h-screen h-full max-w-screen relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex flex-col items-center justify-center",
924
818
  pattern,
925
819
  patternOpacity,
926
820
  className,
@@ -932,7 +826,14 @@ function HeroProductivityLauncherVideo({
932
826
  if (actionsSlot) return actionsSlot;
933
827
  if (!actions || actions.length === 0) return null;
934
828
  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: actions.map((action, index) => {
935
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
829
+ const {
830
+ label,
831
+ icon,
832
+ iconAfter,
833
+ children,
834
+ className: actionClassName,
835
+ ...pressableProps
836
+ } = action;
936
837
  return /* @__PURE__ */ jsx(
937
838
  Pressable,
938
839
  {
@@ -952,40 +853,15 @@ function HeroProductivityLauncherVideo({
952
853
  const renderVersionInfo = useMemo(() => {
953
854
  if (versionInfoSlot) return versionInfoSlot;
954
855
  if (!versionInfo) return null;
955
- return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
856
+ return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-white", children: [
956
857
  versionInfo.version && /* @__PURE__ */ jsx("span", { children: versionInfo.version }),
957
858
  versionInfo.osRequirement && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
958
859
  versionInfo.installMethod && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
959
860
  ] });
960
861
  }, [versionInfoSlot, versionInfo]);
961
- const renderSecondaryCta = useMemo(() => {
962
- if (secondaryCtaSlot) return secondaryCtaSlot;
963
- if (!secondaryCta) return null;
964
- return /* @__PURE__ */ jsxs(
965
- Pressable,
966
- {
967
- href: secondaryCta.href,
968
- className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
969
- children: [
970
- secondaryCta.primaryText && /* @__PURE__ */ jsx("span", { children: secondaryCta.primaryText }),
971
- secondaryCta.secondaryText && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
972
- /* @__PURE__ */ jsx("span", { children: secondaryCta.secondaryText }),
973
- /* @__PURE__ */ jsx(
974
- DynamicIcon,
975
- {
976
- name: "lucide/arrow-right",
977
- size: 16,
978
- className: "stroke-muted-foreground"
979
- }
980
- )
981
- ] })
982
- ]
983
- }
984
- );
985
- }, [secondaryCtaSlot, secondaryCta]);
986
862
  const renderVideo = useMemo(() => {
987
863
  if (videoSlot) return videoSlot;
988
- return /* @__PURE__ */ jsx("div", { className: "absolute -top-24 z-10 h-full w-full before:absolute before:inset-0 before:size-full before:bg-[radial-gradient(circle_at_center,rgba(10,10,10,.3)_15%,rgba(10,10,10,1)_45%)] before:content-['']", children: /* @__PURE__ */ jsx(
864
+ return /* @__PURE__ */ jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsx(
989
865
  "video",
990
866
  {
991
867
  src: videoSrc,
@@ -993,7 +869,7 @@ function HeroProductivityLauncherVideo({
993
869
  muted: true,
994
870
  autoPlay: true,
995
871
  controls: false,
996
- className: "block size-full object-cover object-center bg-blend-saturation"
872
+ className: "block size-full object-cover object-center brightness-50"
997
873
  }
998
874
  ) });
999
875
  }, [videoSlot, videoSrc]);
@@ -1004,19 +880,45 @@ function HeroProductivityLauncherVideo({
1004
880
  spacing,
1005
881
  pattern,
1006
882
  patternOpacity,
1007
- className: cn("relative flex items-center justify-center dark overflow-hidden bg-background py-12 font-sans md:py-20", className),
1008
- containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
883
+ className,
884
+ containerClassName,
1009
885
  children: [
1010
886
  /* @__PURE__ */ jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
1011
887
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
1012
- /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
1013
- /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
888
+ /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
889
+ "h1",
890
+ {
891
+ className: cn(
892
+ "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
893
+ headingClassName
894
+ ),
895
+ children: heading
896
+ }
897
+ ) : /* @__PURE__ */ jsx(
898
+ "h1",
899
+ {
900
+ className: cn(
901
+ "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
902
+ headingClassName
903
+ ),
904
+ children: heading
905
+ }
906
+ )) }),
907
+ /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx(
908
+ "p",
909
+ {
910
+ className: cn(
911
+ "text-center text-sm leading-normal tracking-tight text-balance md:text-lg text-white",
912
+ descriptionClassName
913
+ ),
914
+ children: description
915
+ }
916
+ ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
1014
917
  ] }),
1015
918
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
1016
919
  renderActions,
1017
920
  renderVersionInfo
1018
- ] }),
1019
- renderSecondaryCta
921
+ ] })
1020
922
  ] }) }),
1021
923
  renderVideo
1022
924
  ]