@retinalabsllc/zairusjs 8.1.65 → 8.1.80

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 (5) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +28 -48
  4. package/dist/index.mjs +28 -48
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -80,6 +80,7 @@ interface AppLogo$1 {
80
80
  interface HeroSectionProps {
81
81
  badgeText?: string;
82
82
  titlePrefix?: React.ReactNode;
83
+ /** The text that receives the highlight. Defaults to "Retina" */
83
84
  highlightText?: string;
84
85
  cursorLabel?: string;
85
86
  subtitle?: string;
package/dist/index.d.ts CHANGED
@@ -80,6 +80,7 @@ interface AppLogo$1 {
80
80
  interface HeroSectionProps {
81
81
  badgeText?: string;
82
82
  titlePrefix?: React.ReactNode;
83
+ /** The text that receives the highlight. Defaults to "Retina" */
83
84
  highlightText?: string;
84
85
  cursorLabel?: string;
85
86
  subtitle?: string;
package/dist/index.js CHANGED
@@ -295,7 +295,7 @@ var NavLink = ({
295
295
  }) => {
296
296
  const pathname = (0, import_navigation.usePathname)();
297
297
  const isActive = pathname === href;
298
- const activeClass = "text-neutral-900 font-medium";
298
+ const activeClass = "text-neutral-900 ";
299
299
  const inactiveClass = "text-neutral-500 hover:text-neutral-900";
300
300
  return /* @__PURE__ */ import_react5.default.createElement(
301
301
  import_link2.default,
@@ -550,7 +550,6 @@ var HeroSection = ({
550
550
  badgeText,
551
551
  titlePrefix,
552
552
  highlightText = "Retina",
553
- // Defaulted to Retina as requested
554
553
  cursorLabel,
555
554
  subtitle,
556
555
  ctaText,
@@ -573,9 +572,7 @@ var HeroSection = ({
573
572
  const observer = new IntersectionObserver(
574
573
  ([entry]) => {
575
574
  if (entry.isIntersecting) {
576
- if (entry.boundingClientRect.top >= 0) {
577
- setIsAnimating(true);
578
- }
575
+ setIsAnimating(true);
579
576
  } else {
580
577
  setIsAnimating(false);
581
578
  }
@@ -587,7 +584,13 @@ var HeroSection = ({
587
584
  }
588
585
  return () => observer.disconnect();
589
586
  }, []);
590
- return /* @__PURE__ */ import_react10.default.createElement("section", { className: "relative min-h-[85vh] pt-40 sm:pt-48 pb-20 flex flex-col items-center justify-center overflow-hidden w-full bg-white" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "absolute inset-0 w-full h-full z-0 overflow-hidden" }, bgVideoSrc ? /* @__PURE__ */ import_react10.default.createElement(
587
+ const handleCtaClick = (e) => {
588
+ if (isWaitlist) {
589
+ e.preventDefault();
590
+ setIsWaitlistOpen(true);
591
+ }
592
+ };
593
+ return /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-screen min-h-screen flex justify-center items-center p-2 sm:p-4" }, /* @__PURE__ */ import_react10.default.createElement("section", { className: "relative h-[95vh] w-full overflow-hidden rounded-2xl " }, bgVideoSrc ? /* @__PURE__ */ import_react10.default.createElement(
591
594
  "video",
592
595
  {
593
596
  src: bgVideoSrc,
@@ -596,7 +599,7 @@ var HeroSection = ({
596
599
  loop: true,
597
600
  muted: true,
598
601
  playsInline: true,
599
- className: "absolute inset-0 w-full h-full object-cover z-0"
602
+ className: "absolute inset-0 h-full w-full object-cover z-0"
600
603
  }
601
604
  ) : bgImageSrc ? /* @__PURE__ */ import_react10.default.createElement(
602
605
  import_image2.default,
@@ -605,71 +608,48 @@ var HeroSection = ({
605
608
  alt: "Hero Background",
606
609
  fill: true,
607
610
  priority: true,
608
- className: "object-cover z-0"
611
+ className: "absolute inset-0 h-full w-full object-cover z-0"
609
612
  }
610
613
  ) : null, /* @__PURE__ */ import_react10.default.createElement(
611
614
  "div",
612
615
  {
613
- className: "absolute inset-0 z-10 opacity-40 mix-blend-overlay pointer-events-none",
614
- style: {
615
- backgroundImage: `linear-gradient(110deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 35%, rgba(0,0,0,0.05) 60%, rgba(255,255,255,0.6) 80%, rgba(0,0,0,0.1) 100%), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2MDAnIGhlaWdodD0nODAnPjxmaWx0ZXIgaWQ9J2JydXNoZWQnIHg9JzAlJyB5PScwJScgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAuMDA1IDAuOCcgbnVtT2N0YXZlcz0nNCcgc2VlZD0nNScgcmVzdWx0PSdub2lzZScvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnIHJlc3VsdD0nbW9ubycvPjxmZUNvbXBvbmVudFRyYW5zZmVyIHJlc3VsdD0nYWRqdXN0ZWQnPjxmZUZ1bmNSIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAuNCcgaW50ZXJjZXB0PScwLjMnLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScwLjQnIGludGVyY2VwdD0nMC4zJy8+PGZlRnVuY0IgdHlwZT0nbGluZWFyJyBzbG9wZT0nMC40JyBpbnRlcmNlcHQ9JzAuMycvPjxmZUZ1bmNBIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAuMTUnIGludGVyY2VwdD0nMCcvPjwvZmVDb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPScjZDFkNWRiJy8+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2JydXNoZWQpJyBvcGFjaXR5PScwLjgnLz48L3N2Zz4=")`,
616
- backgroundSize: "cover",
617
- backgroundPosition: "center"
618
- }
619
- }
620
- ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "absolute inset-0 bg-white/70 backdrop-blur-[2px] z-10" }), /* @__PURE__ */ import_react10.default.createElement(
621
- "div",
622
- {
623
- className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-[0.04]",
624
- style: {
625
- backgroundImage: "radial-gradient(circle at center, rgba(0,0,0,1) 1px, transparent 1px)",
626
- backgroundSize: "32px 32px"
627
- }
628
- }
629
- ), /* @__PURE__ */ import_react10.default.createElement(
630
- "div",
631
- {
632
- className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-[0.05] mix-blend-overlay",
616
+ className: "pointer-events-none absolute inset-0 z-10 opacity-[0.7] mix-blend-overlay",
633
617
  style: {
634
618
  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
635
619
  }
636
620
  }
637
- ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-white to-transparent z-10 pointer-events-none" })), /* @__PURE__ */ import_react10.default.createElement("div", { className: "relative max-w-5xl mx-auto px-4 sm:px-6 w-full flex flex-col items-center text-center z-20" }, /* @__PURE__ */ import_react10.default.createElement(
621
+ ), /* @__PURE__ */ import_react10.default.createElement("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-b from-black/30 via-transparent to-black/80 z-10" }), /* @__PURE__ */ import_react10.default.createElement("div", { className: "absolute bottom-0 left-0 right-0 px-4 pb-4 sm:px-6 md:px-10 z-20" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "grid grid-cols-12 items-end gap-4" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "col-span-12 lg:col-span-8" }, /* @__PURE__ */ import_react10.default.createElement(
638
622
  "h1",
639
623
  {
640
624
  ref: titleRef,
641
- className: `text-4xl sm:text-5xl lg:text-7xl font-serif font-light mb-6 text-neutral-900 tracking-tight leading-[1.05] max-w-4xl`,
642
- style: isAnimating ? { animationIterationCount: 1 } : {}
625
+ className: "leading-[0.85] tracking-[-0.07em] text-[18.2vw] sm:text-[16.8vw] md:text-[15.4vw] lg:text-[14vw] xl:text-[13.3vw] 2xl:text-[14vw] text-[#ffffff]"
643
626
  },
644
- /* @__PURE__ */ import_react10.default.createElement("span", { className: "block" }, titlePrefix),
645
- /* @__PURE__ */ import_react10.default.createElement("span", { className: "block mt-2 font-medium text-neutral-900" }, highlightText)
646
- ), subtitle && /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-[14px] md:text-[16px] text-neutral-600 max-w-xl mx-auto mb-10 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-col sm:flex-row gap-4 justify-center items-center w-full px-2 sm:px-0 mx-auto mb-16" }, ctaText && (ctaHref || isWaitlist) && /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-full sm:w-60 flex justify-center *:w-full" }, /* @__PURE__ */ import_react10.default.createElement(
647
- ThreeDButton,
627
+ /* @__PURE__ */ import_react10.default.createElement("div", { className: "inline-flex flex-wrap" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: `inline-block relative transition-all duration-1000 ${isAnimating ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}` }, titlePrefix, titlePrefix && /* @__PURE__ */ import_react10.default.createElement("br", null), highlightText, /* @__PURE__ */ import_react10.default.createElement("span", { className: "absolute top-[0.65em] right-[-0.3em] text-[0.31em] text-[#ffffff]/70" }, "*")))
628
+ )), /* @__PURE__ */ import_react10.default.createElement("div", { className: "col-span-12 flex flex-col gap-5 pb-6 lg:col-span-4 lg:pb-10" }, subtitle && /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-xs text-[#ffffff]/70 sm:text-sm md:text-base leading-[1.2] max-w-md transition-opacity duration-1000 delay-300" }, subtitle), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4" }, ctaText && /* @__PURE__ */ import_react10.default.createElement(
629
+ "button",
648
630
  {
649
- href: isWaitlist ? "#" : ctaHref || "#",
650
- onClick: isWaitlist ? (e) => {
651
- e.preventDefault();
652
- setIsWaitlistOpen(true);
653
- } : void 0
631
+ onClick: handleCtaClick,
632
+ className: "group inline-flex h-10 items-center gap-2 self-start rounded-full bg-[#ffffff] pl-5 pr-1 text-xs text-black transition-all hover:gap-3"
654
633
  },
655
- ctaText
656
- )), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ import_react10.default.createElement(
634
+ ctaText,
635
+ /* @__PURE__ */ import_react10.default.createElement("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-black transition-transform group-hover:scale-110" }, /* @__PURE__ */ import_react10.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-arrow-right h-4 w-4 text-[#ffffff]" }, /* @__PURE__ */ import_react10.default.createElement("path", { d: "M5 12h14" }), /* @__PURE__ */ import_react10.default.createElement("path", { d: "m12 5 7 7-7 7" })))
636
+ ), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ import_react10.default.createElement(
657
637
  import_link4.default,
658
638
  {
659
639
  href: secondaryCtaHref,
660
- className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-white/80 backdrop-blur-md text-center text-neutral-900 text-xs hover:bg-neutral-50 hover:border-neutral-300 border border-neutral-200 outline-none transition-all shadow-sm"
640
+ className: "inline-flex h-10 items-center self-start justify-center text-xs tracking-wide rounded-full px-6 border border-[#ffffff]/30 text-[#ffffff] hover:bg-[#ffffff]/10 transition-colors"
661
641
  },
662
642
  secondaryCtaText
663
- )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-500 mb-5" }, appsText), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-80 mix-blend-multiply" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react10.default.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default" }, /* @__PURE__ */ import_react10.default.createElement(
643
+ )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-col gap-3 mt-4" }, appsText && /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-[10px] tracking-widest uppercase text-[#ffffff]/50 " }, appsText), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-4" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react10.default.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-7 sm:w-7 opacity-70 hover:opacity-100 transition-opacity invert" }, /* @__PURE__ */ import_react10.default.createElement(
664
644
  import_image2.default,
665
645
  {
666
646
  src: logo.src,
667
647
  alt: logo.alt,
668
- width: 50,
669
- height: 50,
670
- className: "object-contain h-full w-auto"
648
+ width: 28,
649
+ height: 28,
650
+ className: "object-contain"
671
651
  }
672
- )))))), /* @__PURE__ */ import_react10.default.createElement(
652
+ ))))))))), /* @__PURE__ */ import_react10.default.createElement(
673
653
  WaitlistDialog,
674
654
  {
675
655
  isOpen: isWaitlistOpen,
package/dist/index.mjs CHANGED
@@ -235,7 +235,7 @@ var NavLink = ({
235
235
  }) => {
236
236
  const pathname = usePathname();
237
237
  const isActive = pathname === href;
238
- const activeClass = "text-neutral-900 font-medium";
238
+ const activeClass = "text-neutral-900 ";
239
239
  const inactiveClass = "text-neutral-500 hover:text-neutral-900";
240
240
  return /* @__PURE__ */ React4.createElement(
241
241
  Link2,
@@ -490,7 +490,6 @@ var HeroSection = ({
490
490
  badgeText,
491
491
  titlePrefix,
492
492
  highlightText = "Retina",
493
- // Defaulted to Retina as requested
494
493
  cursorLabel,
495
494
  subtitle,
496
495
  ctaText,
@@ -513,9 +512,7 @@ var HeroSection = ({
513
512
  const observer = new IntersectionObserver(
514
513
  ([entry]) => {
515
514
  if (entry.isIntersecting) {
516
- if (entry.boundingClientRect.top >= 0) {
517
- setIsAnimating(true);
518
- }
515
+ setIsAnimating(true);
519
516
  } else {
520
517
  setIsAnimating(false);
521
518
  }
@@ -527,7 +524,13 @@ var HeroSection = ({
527
524
  }
528
525
  return () => observer.disconnect();
529
526
  }, []);
530
- return /* @__PURE__ */ React8.createElement("section", { className: "relative min-h-[85vh] pt-40 sm:pt-48 pb-20 flex flex-col items-center justify-center overflow-hidden w-full bg-white" }, /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-0 w-full h-full z-0 overflow-hidden" }, bgVideoSrc ? /* @__PURE__ */ React8.createElement(
527
+ const handleCtaClick = (e) => {
528
+ if (isWaitlist) {
529
+ e.preventDefault();
530
+ setIsWaitlistOpen(true);
531
+ }
532
+ };
533
+ return /* @__PURE__ */ React8.createElement("div", { className: "w-screen min-h-screen flex justify-center items-center p-2 sm:p-4" }, /* @__PURE__ */ React8.createElement("section", { className: "relative h-[95vh] w-full overflow-hidden rounded-2xl " }, bgVideoSrc ? /* @__PURE__ */ React8.createElement(
531
534
  "video",
532
535
  {
533
536
  src: bgVideoSrc,
@@ -536,7 +539,7 @@ var HeroSection = ({
536
539
  loop: true,
537
540
  muted: true,
538
541
  playsInline: true,
539
- className: "absolute inset-0 w-full h-full object-cover z-0"
542
+ className: "absolute inset-0 h-full w-full object-cover z-0"
540
543
  }
541
544
  ) : bgImageSrc ? /* @__PURE__ */ React8.createElement(
542
545
  Image2,
@@ -545,71 +548,48 @@ var HeroSection = ({
545
548
  alt: "Hero Background",
546
549
  fill: true,
547
550
  priority: true,
548
- className: "object-cover z-0"
551
+ className: "absolute inset-0 h-full w-full object-cover z-0"
549
552
  }
550
553
  ) : null, /* @__PURE__ */ React8.createElement(
551
554
  "div",
552
555
  {
553
- className: "absolute inset-0 z-10 opacity-40 mix-blend-overlay pointer-events-none",
554
- style: {
555
- backgroundImage: `linear-gradient(110deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 35%, rgba(0,0,0,0.05) 60%, rgba(255,255,255,0.6) 80%, rgba(0,0,0,0.1) 100%), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2MDAnIGhlaWdodD0nODAnPjxmaWx0ZXIgaWQ9J2JydXNoZWQnIHg9JzAlJyB5PScwJScgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAuMDA1IDAuOCcgbnVtT2N0YXZlcz0nNCcgc2VlZD0nNScgcmVzdWx0PSdub2lzZScvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnIHJlc3VsdD0nbW9ubycvPjxmZUNvbXBvbmVudFRyYW5zZmVyIHJlc3VsdD0nYWRqdXN0ZWQnPjxmZUZ1bmNSIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAuNCcgaW50ZXJjZXB0PScwLjMnLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScwLjQnIGludGVyY2VwdD0nMC4zJy8+PGZlRnVuY0IgdHlwZT0nbGluZWFyJyBzbG9wZT0nMC40JyBpbnRlcmNlcHQ9JzAuMycvPjxmZUZ1bmNBIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAuMTUnIGludGVyY2VwdD0nMCcvPjwvZmVDb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPScjZDFkNWRiJy8+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2JydXNoZWQpJyBvcGFjaXR5PScwLjgnLz48L3N2Zz4=")`,
556
- backgroundSize: "cover",
557
- backgroundPosition: "center"
558
- }
559
- }
560
- ), /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-0 bg-white/70 backdrop-blur-[2px] z-10" }), /* @__PURE__ */ React8.createElement(
561
- "div",
562
- {
563
- className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-[0.04]",
564
- style: {
565
- backgroundImage: "radial-gradient(circle at center, rgba(0,0,0,1) 1px, transparent 1px)",
566
- backgroundSize: "32px 32px"
567
- }
568
- }
569
- ), /* @__PURE__ */ React8.createElement(
570
- "div",
571
- {
572
- className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-[0.05] mix-blend-overlay",
556
+ className: "pointer-events-none absolute inset-0 z-10 opacity-[0.7] mix-blend-overlay",
573
557
  style: {
574
558
  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
575
559
  }
576
560
  }
577
- ), /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-white to-transparent z-10 pointer-events-none" })), /* @__PURE__ */ React8.createElement("div", { className: "relative max-w-5xl mx-auto px-4 sm:px-6 w-full flex flex-col items-center text-center z-20" }, /* @__PURE__ */ React8.createElement(
561
+ ), /* @__PURE__ */ React8.createElement("div", { className: "pointer-events-none absolute inset-0 bg-linear-to-b from-black/30 via-transparent to-black/80 z-10" }), /* @__PURE__ */ React8.createElement("div", { className: "absolute bottom-0 left-0 right-0 px-4 pb-4 sm:px-6 md:px-10 z-20" }, /* @__PURE__ */ React8.createElement("div", { className: "grid grid-cols-12 items-end gap-4" }, /* @__PURE__ */ React8.createElement("div", { className: "col-span-12 lg:col-span-8" }, /* @__PURE__ */ React8.createElement(
578
562
  "h1",
579
563
  {
580
564
  ref: titleRef,
581
- className: `text-4xl sm:text-5xl lg:text-7xl font-serif font-light mb-6 text-neutral-900 tracking-tight leading-[1.05] max-w-4xl`,
582
- style: isAnimating ? { animationIterationCount: 1 } : {}
565
+ className: "leading-[0.85] tracking-[-0.07em] text-[18.2vw] sm:text-[16.8vw] md:text-[15.4vw] lg:text-[14vw] xl:text-[13.3vw] 2xl:text-[14vw] text-[#ffffff]"
583
566
  },
584
- /* @__PURE__ */ React8.createElement("span", { className: "block" }, titlePrefix),
585
- /* @__PURE__ */ React8.createElement("span", { className: "block mt-2 font-medium text-neutral-900" }, highlightText)
586
- ), subtitle && /* @__PURE__ */ React8.createElement("p", { className: "text-[14px] md:text-[16px] text-neutral-600 max-w-xl mx-auto mb-10 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col sm:flex-row gap-4 justify-center items-center w-full px-2 sm:px-0 mx-auto mb-16" }, ctaText && (ctaHref || isWaitlist) && /* @__PURE__ */ React8.createElement("div", { className: "w-full sm:w-60 flex justify-center *:w-full" }, /* @__PURE__ */ React8.createElement(
587
- ThreeDButton,
567
+ /* @__PURE__ */ React8.createElement("div", { className: "inline-flex flex-wrap" }, /* @__PURE__ */ React8.createElement("span", { className: `inline-block relative transition-all duration-1000 ${isAnimating ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}` }, titlePrefix, titlePrefix && /* @__PURE__ */ React8.createElement("br", null), highlightText, /* @__PURE__ */ React8.createElement("span", { className: "absolute top-[0.65em] right-[-0.3em] text-[0.31em] text-[#ffffff]/70" }, "*")))
568
+ )), /* @__PURE__ */ React8.createElement("div", { className: "col-span-12 flex flex-col gap-5 pb-6 lg:col-span-4 lg:pb-10" }, subtitle && /* @__PURE__ */ React8.createElement("p", { className: "text-xs text-[#ffffff]/70 sm:text-sm md:text-base leading-[1.2] max-w-md transition-opacity duration-1000 delay-300" }, subtitle), /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4" }, ctaText && /* @__PURE__ */ React8.createElement(
569
+ "button",
588
570
  {
589
- href: isWaitlist ? "#" : ctaHref || "#",
590
- onClick: isWaitlist ? (e) => {
591
- e.preventDefault();
592
- setIsWaitlistOpen(true);
593
- } : void 0
571
+ onClick: handleCtaClick,
572
+ className: "group inline-flex h-10 items-center gap-2 self-start rounded-full bg-[#ffffff] pl-5 pr-1 text-xs text-black transition-all hover:gap-3"
594
573
  },
595
- ctaText
596
- )), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React8.createElement(
574
+ ctaText,
575
+ /* @__PURE__ */ React8.createElement("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-black transition-transform group-hover:scale-110" }, /* @__PURE__ */ React8.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-arrow-right h-4 w-4 text-[#ffffff]" }, /* @__PURE__ */ React8.createElement("path", { d: "M5 12h14" }), /* @__PURE__ */ React8.createElement("path", { d: "m12 5 7 7-7 7" })))
576
+ ), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React8.createElement(
597
577
  Link4,
598
578
  {
599
579
  href: secondaryCtaHref,
600
- className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-white/80 backdrop-blur-md text-center text-neutral-900 text-xs hover:bg-neutral-50 hover:border-neutral-300 border border-neutral-200 outline-none transition-all shadow-sm"
580
+ className: "inline-flex h-10 items-center self-start justify-center text-xs tracking-wide rounded-full px-6 border border-[#ffffff]/30 text-[#ffffff] hover:bg-[#ffffff]/10 transition-colors"
601
581
  },
602
582
  secondaryCtaText
603
- )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React8.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ React8.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-500 mb-5" }, appsText), /* @__PURE__ */ React8.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-80 mix-blend-multiply" }, appLogos.map((logo, idx) => /* @__PURE__ */ React8.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default" }, /* @__PURE__ */ React8.createElement(
583
+ )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col gap-3 mt-4" }, appsText && /* @__PURE__ */ React8.createElement("span", { className: "text-[10px] tracking-widest uppercase text-[#ffffff]/50 " }, appsText), /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-4" }, appLogos.map((logo, idx) => /* @__PURE__ */ React8.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-7 sm:w-7 opacity-70 hover:opacity-100 transition-opacity invert" }, /* @__PURE__ */ React8.createElement(
604
584
  Image2,
605
585
  {
606
586
  src: logo.src,
607
587
  alt: logo.alt,
608
- width: 50,
609
- height: 50,
610
- className: "object-contain h-full w-auto"
588
+ width: 28,
589
+ height: 28,
590
+ className: "object-contain"
611
591
  }
612
- )))))), /* @__PURE__ */ React8.createElement(
592
+ ))))))))), /* @__PURE__ */ React8.createElement(
613
593
  WaitlistDialog,
614
594
  {
615
595
  isOpen: isWaitlistOpen,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "8.1.65",
3
+ "version": "8.1.80",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",