@retinalabsllc/zairusjs 8.1.65 → 8.1.85

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 +52 -69
  4. package/dist/index.mjs +52 -69
  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,
@@ -327,27 +327,30 @@ var Header = ({
327
327
  const brandSubtitleClass = "text-neutral-500";
328
328
  const shouldInvertLogo = !invert;
329
329
  if (!mounted) {
330
- return /* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute inset-x-0 top-0 w-full h-20 z-50 pointer-events-none px-4 pt-4 sm:pt-6" });
330
+ return /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full h-20 px-4 pt-4 sm:pt-6" });
331
331
  }
332
- return /* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ import_react5.default.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ import_react5.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ import_react5.default.createElement(
333
- import_image.default,
334
- {
335
- src: logoSrc,
336
- alt: `${companyName} Logo`,
337
- width: 40,
338
- height: 40,
339
- className: `object-contain w-8 h-auto ${shouldInvertLogo ? "invert" : ""}`,
340
- priority: true
341
- }
342
- ), !hideHeaderText && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ import_react5.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ import_react5.default.createElement(
343
- NavLink,
344
- {
345
- key: index,
346
- href: link.href,
347
- className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
348
- },
349
- link.label
350
- ))))));
332
+ return (
333
+ // Removed 'absolute inset-x-0 top-0 z-50 pointer-events-none' to let it sit in the normal document flow
334
+ /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full px-4 pt-4 sm:pt-6 mb-4" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-5xl mx-auto w-full flex justify-center" }, /* @__PURE__ */ import_react5.default.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ import_react5.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ import_react5.default.createElement(
335
+ import_image.default,
336
+ {
337
+ src: logoSrc,
338
+ alt: `${companyName} Logo`,
339
+ width: 40,
340
+ height: 40,
341
+ className: `object-contain w-8 h-auto ${shouldInvertLogo ? "invert" : ""}`,
342
+ priority: true
343
+ }
344
+ ), !hideHeaderText && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ import_react5.default.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ import_react5.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ import_react5.default.createElement(
345
+ NavLink,
346
+ {
347
+ key: index,
348
+ href: link.href,
349
+ className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
350
+ },
351
+ link.label
352
+ ))))))
353
+ );
351
354
  };
352
355
 
353
356
  // src/components/Footer.tsx
@@ -492,7 +495,7 @@ var WaitlistDialog = ({ isOpen, onClose }) => {
492
495
  setIsLoading(false);
493
496
  }
494
497
  };
495
- return /* @__PURE__ */ import_react9.default.createElement("div", { className: "fixed inset-0 z-100 flex items-center justify-center p-4 bg-black/30" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "absolute inset-0", onClick: !isLoading ? onClose : void 0 }), /* @__PURE__ */ import_react9.default.createElement(
498
+ return /* @__PURE__ */ import_react9.default.createElement("div", { className: "fixed inset-0 z-100 flex items-center justify-center p-4 bg-black/60" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "absolute inset-0", onClick: !isLoading ? onClose : void 0 }), /* @__PURE__ */ import_react9.default.createElement(
496
499
  "div",
497
500
  {
498
501
  className: "w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200"
@@ -550,7 +553,6 @@ var HeroSection = ({
550
553
  badgeText,
551
554
  titlePrefix,
552
555
  highlightText = "Retina",
553
- // Defaulted to Retina as requested
554
556
  cursorLabel,
555
557
  subtitle,
556
558
  ctaText,
@@ -573,9 +575,7 @@ var HeroSection = ({
573
575
  const observer = new IntersectionObserver(
574
576
  ([entry]) => {
575
577
  if (entry.isIntersecting) {
576
- if (entry.boundingClientRect.top >= 0) {
577
- setIsAnimating(true);
578
- }
578
+ setIsAnimating(true);
579
579
  } else {
580
580
  setIsAnimating(false);
581
581
  }
@@ -587,7 +587,13 @@ var HeroSection = ({
587
587
  }
588
588
  return () => observer.disconnect();
589
589
  }, []);
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(
590
+ const handleCtaClick = (e) => {
591
+ if (isWaitlist) {
592
+ e.preventDefault();
593
+ setIsWaitlistOpen(true);
594
+ }
595
+ };
596
+ 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
597
  "video",
592
598
  {
593
599
  src: bgVideoSrc,
@@ -596,7 +602,7 @@ var HeroSection = ({
596
602
  loop: true,
597
603
  muted: true,
598
604
  playsInline: true,
599
- className: "absolute inset-0 w-full h-full object-cover z-0"
605
+ className: "absolute inset-0 h-full w-full object-cover z-0"
600
606
  }
601
607
  ) : bgImageSrc ? /* @__PURE__ */ import_react10.default.createElement(
602
608
  import_image2.default,
@@ -605,71 +611,48 @@ var HeroSection = ({
605
611
  alt: "Hero Background",
606
612
  fill: true,
607
613
  priority: true,
608
- className: "object-cover z-0"
614
+ className: "absolute inset-0 h-full w-full object-cover z-0"
609
615
  }
610
616
  ) : null, /* @__PURE__ */ import_react10.default.createElement(
611
617
  "div",
612
618
  {
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",
619
+ className: "pointer-events-none absolute inset-0 z-10 opacity-[0.7] mix-blend-overlay",
633
620
  style: {
634
621
  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
622
  }
636
623
  }
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(
624
+ ), /* @__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
625
  "h1",
639
626
  {
640
627
  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 } : {}
628
+ 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
629
  },
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,
630
+ /* @__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" }, "*")))
631
+ )), /* @__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(
632
+ "button",
648
633
  {
649
- href: isWaitlist ? "#" : ctaHref || "#",
650
- onClick: isWaitlist ? (e) => {
651
- e.preventDefault();
652
- setIsWaitlistOpen(true);
653
- } : void 0
634
+ onClick: handleCtaClick,
635
+ 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
636
  },
655
- ctaText
656
- )), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ import_react10.default.createElement(
637
+ ctaText,
638
+ /* @__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" })))
639
+ ), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ import_react10.default.createElement(
657
640
  import_link4.default,
658
641
  {
659
642
  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"
643
+ 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
644
  },
662
645
  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(
646
+ )), 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
647
  import_image2.default,
665
648
  {
666
649
  src: logo.src,
667
650
  alt: logo.alt,
668
- width: 50,
669
- height: 50,
670
- className: "object-contain h-full w-auto"
651
+ width: 28,
652
+ height: 28,
653
+ className: "object-contain"
671
654
  }
672
- )))))), /* @__PURE__ */ import_react10.default.createElement(
655
+ ))))))))), /* @__PURE__ */ import_react10.default.createElement(
673
656
  WaitlistDialog,
674
657
  {
675
658
  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,
@@ -267,27 +267,30 @@ var Header = ({
267
267
  const brandSubtitleClass = "text-neutral-500";
268
268
  const shouldInvertLogo = !invert;
269
269
  if (!mounted) {
270
- return /* @__PURE__ */ React4.createElement("div", { className: "absolute inset-x-0 top-0 w-full h-20 z-50 pointer-events-none px-4 pt-4 sm:pt-6" });
270
+ return /* @__PURE__ */ React4.createElement("div", { className: "w-full h-20 px-4 pt-4 sm:pt-6" });
271
271
  }
272
- return /* @__PURE__ */ React4.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ React4.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ React4.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React4.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ React4.createElement(
273
- Image,
274
- {
275
- src: logoSrc,
276
- alt: `${companyName} Logo`,
277
- width: 40,
278
- height: 40,
279
- className: `object-contain w-8 h-auto ${shouldInvertLogo ? "invert" : ""}`,
280
- priority: true
281
- }
282
- ), !hideHeaderText && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React4.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ React4.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ React4.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React4.createElement(
283
- NavLink,
284
- {
285
- key: index,
286
- href: link.href,
287
- className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
288
- },
289
- link.label
290
- ))))));
272
+ return (
273
+ // Removed 'absolute inset-x-0 top-0 z-50 pointer-events-none' to let it sit in the normal document flow
274
+ /* @__PURE__ */ React4.createElement("div", { className: "w-full px-4 pt-4 sm:pt-6 mb-4" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-5xl mx-auto w-full flex justify-center" }, /* @__PURE__ */ React4.createElement("header", { className: `${headerLayoutWidth} ${headerBgClass} backdrop-blur-md rounded-full py-2 px-6 flex items-center transition-all duration-300` }, hasBrandSection && /* @__PURE__ */ React4.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React4.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, showLogo && /* @__PURE__ */ React4.createElement(
275
+ Image,
276
+ {
277
+ src: logoSrc,
278
+ alt: `${companyName} Logo`,
279
+ width: 40,
280
+ height: 40,
281
+ className: `object-contain w-8 h-auto ${shouldInvertLogo ? "invert" : ""}`,
282
+ priority: true
283
+ }
284
+ ), !hideHeaderText && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React4.createElement("span", { className: `text-[11px] leading-none tracking-wide mb-1 ${brandTitleClass}` }, companyName), subtitle && /* @__PURE__ */ React4.createElement("span", { className: `text-[9px] tracking-widest leading-none ${brandSubtitleClass}` }, subtitle)))), /* @__PURE__ */ React4.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React4.createElement(
285
+ NavLink,
286
+ {
287
+ key: index,
288
+ href: link.href,
289
+ className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
290
+ },
291
+ link.label
292
+ ))))))
293
+ );
291
294
  };
292
295
 
293
296
  // src/components/Footer.tsx
@@ -432,7 +435,7 @@ var WaitlistDialog = ({ isOpen, onClose }) => {
432
435
  setIsLoading(false);
433
436
  }
434
437
  };
435
- return /* @__PURE__ */ React7.createElement("div", { className: "fixed inset-0 z-100 flex items-center justify-center p-4 bg-black/30" }, /* @__PURE__ */ React7.createElement("div", { className: "absolute inset-0", onClick: !isLoading ? onClose : void 0 }), /* @__PURE__ */ React7.createElement(
438
+ return /* @__PURE__ */ React7.createElement("div", { className: "fixed inset-0 z-100 flex items-center justify-center p-4 bg-black/60" }, /* @__PURE__ */ React7.createElement("div", { className: "absolute inset-0", onClick: !isLoading ? onClose : void 0 }), /* @__PURE__ */ React7.createElement(
436
439
  "div",
437
440
  {
438
441
  className: "w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden relative z-10 animate-in fade-in zoom-in-95 duration-200"
@@ -490,7 +493,6 @@ var HeroSection = ({
490
493
  badgeText,
491
494
  titlePrefix,
492
495
  highlightText = "Retina",
493
- // Defaulted to Retina as requested
494
496
  cursorLabel,
495
497
  subtitle,
496
498
  ctaText,
@@ -513,9 +515,7 @@ var HeroSection = ({
513
515
  const observer = new IntersectionObserver(
514
516
  ([entry]) => {
515
517
  if (entry.isIntersecting) {
516
- if (entry.boundingClientRect.top >= 0) {
517
- setIsAnimating(true);
518
- }
518
+ setIsAnimating(true);
519
519
  } else {
520
520
  setIsAnimating(false);
521
521
  }
@@ -527,7 +527,13 @@ var HeroSection = ({
527
527
  }
528
528
  return () => observer.disconnect();
529
529
  }, []);
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(
530
+ const handleCtaClick = (e) => {
531
+ if (isWaitlist) {
532
+ e.preventDefault();
533
+ setIsWaitlistOpen(true);
534
+ }
535
+ };
536
+ 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
537
  "video",
532
538
  {
533
539
  src: bgVideoSrc,
@@ -536,7 +542,7 @@ var HeroSection = ({
536
542
  loop: true,
537
543
  muted: true,
538
544
  playsInline: true,
539
- className: "absolute inset-0 w-full h-full object-cover z-0"
545
+ className: "absolute inset-0 h-full w-full object-cover z-0"
540
546
  }
541
547
  ) : bgImageSrc ? /* @__PURE__ */ React8.createElement(
542
548
  Image2,
@@ -545,71 +551,48 @@ var HeroSection = ({
545
551
  alt: "Hero Background",
546
552
  fill: true,
547
553
  priority: true,
548
- className: "object-cover z-0"
554
+ className: "absolute inset-0 h-full w-full object-cover z-0"
549
555
  }
550
556
  ) : null, /* @__PURE__ */ React8.createElement(
551
557
  "div",
552
558
  {
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",
559
+ className: "pointer-events-none absolute inset-0 z-10 opacity-[0.7] mix-blend-overlay",
573
560
  style: {
574
561
  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
562
  }
576
563
  }
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(
564
+ ), /* @__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
565
  "h1",
579
566
  {
580
567
  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 } : {}
568
+ 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
569
  },
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,
570
+ /* @__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" }, "*")))
571
+ )), /* @__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(
572
+ "button",
588
573
  {
589
- href: isWaitlist ? "#" : ctaHref || "#",
590
- onClick: isWaitlist ? (e) => {
591
- e.preventDefault();
592
- setIsWaitlistOpen(true);
593
- } : void 0
574
+ onClick: handleCtaClick,
575
+ 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
576
  },
595
- ctaText
596
- )), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React8.createElement(
577
+ ctaText,
578
+ /* @__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" })))
579
+ ), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React8.createElement(
597
580
  Link4,
598
581
  {
599
582
  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"
583
+ 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
584
  },
602
585
  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(
586
+ )), 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
587
  Image2,
605
588
  {
606
589
  src: logo.src,
607
590
  alt: logo.alt,
608
- width: 50,
609
- height: 50,
610
- className: "object-contain h-full w-auto"
591
+ width: 28,
592
+ height: 28,
593
+ className: "object-contain"
611
594
  }
612
- )))))), /* @__PURE__ */ React8.createElement(
595
+ ))))))))), /* @__PURE__ */ React8.createElement(
613
596
  WaitlistDialog,
614
597
  {
615
598
  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.85",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",