@retinalabsllc/zairusjs 20.1.30 → 20.1.35

package/dist/index.d.mts

@@ -444,6 +444,12 @@ interface HeroSectionProps {
     bgVideoSrc?: string;
     bgImageSrc?: string;
     isWaitlist?: boolean;
+    /** Controls the Next/Image base width and height. Defaults to 120 for crisp Retina display */
+    logoSize?: number;
+    /** Controls the responsive tailwind classes for the logo wrapper to scale it. Defaults to "relative h-6 sm:h-8" */
+    logoWrapperClassName?: string;
+    /** Set to true if you want to completely bypass Next.js image compression (ideal for SVGs) */
+    unoptimizedLogos?: boolean;
 }
 declare const HeroSection: React.FC<HeroSectionProps>;
 

package/dist/index.d.ts

@@ -444,6 +444,12 @@ interface HeroSectionProps {
     bgVideoSrc?: string;
     bgImageSrc?: string;
     isWaitlist?: boolean;
+    /** Controls the Next/Image base width and height. Defaults to 120 for crisp Retina display */
+    logoSize?: number;
+    /** Controls the responsive tailwind classes for the logo wrapper to scale it. Defaults to "relative h-6 sm:h-8" */
+    logoWrapperClassName?: string;
+    /** Set to true if you want to completely bypass Next.js image compression (ideal for SVGs) */
+    unoptimizedLogos?: boolean;
 }
 declare const HeroSection: React.FC<HeroSectionProps>;
 

package/dist/index.js

@@ -2802,7 +2802,11 @@ var HeroSection = ({
   appLogos,
   bgVideoSrc,
   bgImageSrc,
-  isWaitlist = false
+  isWaitlist = false,
+  logoSize = 120,
+  // Increased to 120 so the source image is sharp
+  logoWrapperClassName = "relative h-6 sm:h-8",
+  unoptimizedLogos = false
 }) => {
   const [isAnimating, setIsAnimating] = (0, import_react45.useState)(false);
   const [isWaitlistOpen, setIsWaitlistOpen] = (0, import_react45.useState)(false);
@@ -2829,7 +2833,7 @@ var HeroSection = ({
       setIsWaitlistOpen(true);
     }
   };
-  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-screen min-h-screen flex justify-center items-center  p-4" }, /* @__PURE__ */ import_react45.default.createElement("section", { className: "relative h-[95vh] w-full overflow-hidden rounded-2xl " }, bgVideoSrc ? /* @__PURE__ */ import_react45.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-screen min-h-screen flex flex-col justify-center items-center p-4" }, /* @__PURE__ */ import_react45.default.createElement("section", { className: "relative h-[95vh] w-full overflow-hidden rounded-2xl " }, bgVideoSrc ? /* @__PURE__ */ import_react45.default.createElement(
     "video",
     {
       src: bgVideoSrc,
@@ -2864,8 +2868,7 @@ var HeroSection = ({
       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]"
     },
     /* @__PURE__ */ import_react45.default.createElement("div", { className: "inline-flex flex-wrap" }, /* @__PURE__ */ import_react45.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_react45.default.createElement("br", null), highlightText, /* @__PURE__ */ import_react45.default.createElement("span", { className: "absolute top-[0.65em] right-[-0.3em] text-[0.31em] text-[#ffffff]/70" }, "*")))
-  )), /* @__PURE__ */ import_react45.default.createElement("div", { className: "col-span-12 flex flex-col gap-5 pb-6 lg:col-span-4 lg:pb-10" }, subtitle && /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-xs text-[#ffffff]/70 sm:text-sm md:text-xs leading-[1.2] max-w-md transition-opacity duration-1000 delay-300" }, subtitle), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4" }, ctaText && // Changed from <button> to <Link> so it actually navigates!
-  /* @__PURE__ */ import_react45.default.createElement(
+  )), /* @__PURE__ */ import_react45.default.createElement("div", { className: "col-span-12 flex flex-col gap-5 pb-6 lg:col-span-4 lg:pb-10" }, subtitle && /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-xs text-[#ffffff]/70 sm:text-sm md:text-xs leading-[1.2] max-w-md transition-opacity duration-1000 delay-300" }, subtitle), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4" }, ctaText && /* @__PURE__ */ import_react45.default.createElement(
     import_link6.default,
     {
       href: isWaitlist ? "#" : ctaHref || "#",
@@ -2881,16 +2884,18 @@ var HeroSection = ({
       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"
     },
     secondaryCtaText
-  )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col gap-3 mt-4" }, appsText && /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-xs tracking-widest  text-[#ffffff]/50 " }, appsText), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex items-center gap-4" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react45.default.createElement("div", { key: idx, className: "relative h-6 sm:h-7 opacity-70 hover:opacity-100 transition-opacity invert" }, /* @__PURE__ */ import_react45.default.createElement(
+  )))))), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col items-center gap-4 mt-8 w-full" }, appsText && /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-xs tracking-widest text-black/70  uppercase" }, appsText), /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-wrap items-center justify-center gap-8 sm:gap-12" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react45.default.createElement("div", { key: idx, className: logoWrapperClassName }, /* @__PURE__ */ import_react45.default.createElement(
     import_image2.default,
     {
       src: logo.src,
       alt: logo.alt,
-      width: 28,
-      height: 28,
-      className: "h-full w-auto grayscale opacity-90 object-contain"
+      width: logoSize,
+      height: logoSize,
+      quality: 100,
+      unoptimized: unoptimizedLogos,
+      className: "h-full w-auto grayscale object-contain"
     }
-  ))))))))), /* @__PURE__ */ import_react45.default.createElement(
+  ))))), /* @__PURE__ */ import_react45.default.createElement(
     WaitlistDialog,
     {
       isOpen: isWaitlistOpen,

package/dist/index.mjs

@@ -2794,7 +2794,11 @@ var HeroSection = ({
   appLogos,
   bgVideoSrc,
   bgImageSrc,
-  isWaitlist = false
+  isWaitlist = false,
+  logoSize = 120,
+  // Increased to 120 so the source image is sharp
+  logoWrapperClassName = "relative h-6 sm:h-8",
+  unoptimizedLogos = false
 }) => {
   const [isAnimating, setIsAnimating] = useState19(false);
   const [isWaitlistOpen, setIsWaitlistOpen] = useState19(false);
@@ -2821,7 +2825,7 @@ var HeroSection = ({
       setIsWaitlistOpen(true);
     }
   };
-  return /* @__PURE__ */ React26.createElement("div", { className: "w-screen min-h-screen flex justify-center items-center  p-4" }, /* @__PURE__ */ React26.createElement("section", { className: "relative h-[95vh] w-full overflow-hidden rounded-2xl " }, bgVideoSrc ? /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement("div", { className: "w-screen min-h-screen flex flex-col justify-center items-center p-4" }, /* @__PURE__ */ React26.createElement("section", { className: "relative h-[95vh] w-full overflow-hidden rounded-2xl " }, bgVideoSrc ? /* @__PURE__ */ React26.createElement(
     "video",
     {
       src: bgVideoSrc,
@@ -2856,8 +2860,7 @@ var HeroSection = ({
       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]"
     },
     /* @__PURE__ */ React26.createElement("div", { className: "inline-flex flex-wrap" }, /* @__PURE__ */ React26.createElement("span", { className: `inline-block relative transition-all duration-1000 ${isAnimating ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}` }, titlePrefix, titlePrefix && /* @__PURE__ */ React26.createElement("br", null), highlightText, /* @__PURE__ */ React26.createElement("span", { className: "absolute top-[0.65em] right-[-0.3em] text-[0.31em] text-[#ffffff]/70" }, "*")))
-  )), /* @__PURE__ */ React26.createElement("div", { className: "col-span-12 flex flex-col gap-5 pb-6 lg:col-span-4 lg:pb-10" }, subtitle && /* @__PURE__ */ React26.createElement("p", { className: "text-xs text-[#ffffff]/70 sm:text-sm md:text-xs leading-[1.2] max-w-md transition-opacity duration-1000 delay-300" }, subtitle), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4" }, ctaText && // Changed from <button> to <Link> so it actually navigates!
-  /* @__PURE__ */ React26.createElement(
+  )), /* @__PURE__ */ React26.createElement("div", { className: "col-span-12 flex flex-col gap-5 pb-6 lg:col-span-4 lg:pb-10" }, subtitle && /* @__PURE__ */ React26.createElement("p", { className: "text-xs text-[#ffffff]/70 sm:text-sm md:text-xs leading-[1.2] max-w-md transition-opacity duration-1000 delay-300" }, subtitle), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4" }, ctaText && /* @__PURE__ */ React26.createElement(
     Link6,
     {
       href: isWaitlist ? "#" : ctaHref || "#",
@@ -2873,16 +2876,18 @@ var HeroSection = ({
       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"
     },
     secondaryCtaText
-  )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col gap-3 mt-4" }, appsText && /* @__PURE__ */ React26.createElement("span", { className: "text-xs tracking-widest  text-[#ffffff]/50 " }, appsText), /* @__PURE__ */ React26.createElement("div", { className: "flex items-center gap-4" }, appLogos.map((logo, idx) => /* @__PURE__ */ React26.createElement("div", { key: idx, className: "relative h-6 sm:h-7 opacity-70 hover:opacity-100 transition-opacity invert" }, /* @__PURE__ */ React26.createElement(
+  )))))), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col items-center gap-4 mt-8 w-full" }, appsText && /* @__PURE__ */ React26.createElement("span", { className: "text-xs tracking-widest text-black/70  uppercase" }, appsText), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-wrap items-center justify-center gap-8 sm:gap-12" }, appLogos.map((logo, idx) => /* @__PURE__ */ React26.createElement("div", { key: idx, className: logoWrapperClassName }, /* @__PURE__ */ React26.createElement(
     Image3,
     {
       src: logo.src,
       alt: logo.alt,
-      width: 28,
-      height: 28,
-      className: "h-full w-auto grayscale opacity-90 object-contain"
+      width: logoSize,
+      height: logoSize,
+      quality: 100,
+      unoptimized: unoptimizedLogos,
+      className: "h-full w-auto grayscale object-contain"
     }
-  ))))))))), /* @__PURE__ */ React26.createElement(
+  ))))), /* @__PURE__ */ React26.createElement(
     WaitlistDialog,
     {
       isOpen: isWaitlistOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "20.1.30",
+  "version": "20.1.35",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",