@retinalabsllc/zairusjs 6.1.5 → 6.1.9

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 (3) hide show
  1. package/dist/index.js +52 -47
  2. package/dist/index.mjs +52 -47
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -440,53 +440,58 @@ var HeroSection = ({
440
440
  }
441
441
  return () => observer.disconnect();
442
442
  }, []);
443
- return /* @__PURE__ */ import_react8.default.createElement("section", { className: "relative min-h-[85vh] pt-40 sm:pt-48 pb-20 w-full bg-white overflow-hidden" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 w-full h-full flex flex-col lg:flex-row items-center gap-12 lg:gap-8" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex-1 flex flex-col items-start text-left z-20 w-full" }, badgeText && /* @__PURE__ */ import_react8.default.createElement("span", { className: "inline-block py-1 px-3 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium tracking-wide mb-6" }, badgeText), /* @__PURE__ */ import_react8.default.createElement(
444
- "h1",
445
- {
446
- ref: titleRef,
447
- className: `text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-light mb-6 text-neutral-900 tracking-tight leading-[1.1] max-w-2xl`,
448
- style: isAnimating ? { animationIterationCount: 1 } : {}
449
- },
450
- titlePrefix,
451
- " ",
452
- /* @__PURE__ */ import_react8.default.createElement("span", { className: "font-medium gradient-text block mt-1" }, highlightText)
453
- ), subtitle && /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[15px] md:text-[17px] text-neutral-500 max-w-xl mb-10 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-col gap-4 w-full sm:w-auto mb-16" }, ctaText && ctaHref && /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full sm:w-64 flex justify-start *:w-full" }, /* @__PURE__ */ import_react8.default.createElement(ThreeDButton, { href: ctaHref }, ctaText)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ import_react8.default.createElement(
454
- import_link4.default,
455
- {
456
- href: secondaryCtaHref,
457
- className: "w-full sm:w-64 inline-flex font-medium items-center justify-center text-xs tracking-widest rounded-full px-8 py-3 border border-neutral-200 text-center text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900 outline-none transition-all"
458
- },
459
- secondaryCtaText
460
- )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full flex flex-col items-start mt-auto" }, appsText && /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[10px] font-medium tracking-[0.15em] text-neutral-400 mb-4 uppercase" }, appsText), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-wrap justify-start items-center gap-6 opacity-80 mix-blend-multiply" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react8.default.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-7 sm:w-7 flex items-center justify-center cursor-default grayscale hover:grayscale-0 transition-all duration-300" }, /* @__PURE__ */ import_react8.default.createElement(
461
- import_image2.default,
462
- {
463
- src: logo.src,
464
- alt: logo.alt,
465
- width: 40,
466
- height: 40,
467
- className: "object-contain h-full w-auto"
468
- }
469
- )))))), (bgVideoSrc || bgImageSrc) && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex-1 w-full relative aspect-square lg:aspect-4/3 rounded-2xl overflow-hidden bg-neutral-100 flex items-center justify-center" }, bgVideoSrc ? /* @__PURE__ */ import_react8.default.createElement(
470
- "video",
471
- {
472
- src: bgVideoSrc,
473
- poster: bgImageSrc,
474
- autoPlay: true,
475
- loop: true,
476
- muted: true,
477
- playsInline: true,
478
- className: "absolute inset-0 w-full h-full object-cover"
479
- }
480
- ) : bgImageSrc ? /* @__PURE__ */ import_react8.default.createElement(
481
- import_image2.default,
482
- {
483
- src: bgImageSrc,
484
- alt: "Hero Media",
485
- fill: true,
486
- priority: true,
487
- className: "object-cover"
488
- }
489
- ) : null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "absolute inset-0 bg-black/5 pointer-events-none mix-blend-overlay" }))));
443
+ return (
444
+ // Outer section provides the "space from the wall" (padding)
445
+ /* @__PURE__ */ import_react8.default.createElement("section", { className: "relative w-full px-4 sm:px-6 lg:px-8 pt-24 sm:pt-32 pb-12 flex justify-center overflow-hidden" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full max-w-350 bg-white rounded-2xl min-h-[80vh] p-6 sm:p-12 lg:p-16 flex flex-col lg:flex-row items-center gap-12 lg:gap-16 relative" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex-1 flex flex-col items-start text-left z-20 w-full mt-8 lg:mt-0" }, badgeText && /* @__PURE__ */ import_react8.default.createElement("span", { className: "inline-block py-1.5 px-4 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium tracking-wide mb-8" }, badgeText), /* @__PURE__ */ import_react8.default.createElement(
446
+ "h1",
447
+ {
448
+ ref: titleRef,
449
+ className: `text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-light mb-6 text-neutral-900 tracking-tight leading-[1.1] max-w-2xl`,
450
+ style: isAnimating ? { animationIterationCount: 1 } : {}
451
+ },
452
+ titlePrefix,
453
+ " ",
454
+ /* @__PURE__ */ import_react8.default.createElement("span", { className: "font-medium gradient-text block mt-2" }, highlightText)
455
+ ), subtitle && /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[15px] md:text-[17px] text-neutral-500 max-w-xl mb-12 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-col gap-4 w-full sm:w-auto mb-16" }, ctaText && ctaHref && // Widened to sm:w-80 (320px) on desktop
456
+ /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full sm:w-80 flex justify-start *:w-full" }, /* @__PURE__ */ import_react8.default.createElement(ThreeDButton, { href: ctaHref }, ctaText)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ import_react8.default.createElement(
457
+ import_link4.default,
458
+ {
459
+ href: secondaryCtaHref,
460
+ className: "w-full sm:w-80 inline-flex font-medium items-center justify-center text-xs tracking-widest rounded-full px-8 py-3.5 bg-neutral-100 text-center text-neutral-700 hover:bg-neutral-200 outline-none transition-colors duration-300"
461
+ },
462
+ secondaryCtaText
463
+ )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full flex flex-col items-start mt-auto" }, appsText && /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[10px] font-medium tracking-[0.15em] text-neutral-400 mb-5 uppercase" }, appsText), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-wrap justify-start items-center gap-6 opacity-80 mix-blend-multiply" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react8.default.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-7 sm:w-7 flex items-center justify-center cursor-default grayscale hover:grayscale-0 transition-all duration-300" }, /* @__PURE__ */ import_react8.default.createElement(
464
+ import_image2.default,
465
+ {
466
+ src: logo.src,
467
+ alt: logo.alt,
468
+ width: 40,
469
+ height: 40,
470
+ className: "object-contain h-full w-auto"
471
+ }
472
+ )))))), (bgVideoSrc || bgImageSrc) && // Drops below text on mobile. Square on mobile (aspect-square), taller on desktop (lg:aspect-[4/5])
473
+ /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full lg:w-[45%] xl:w-[50%] relative aspect-square lg:aspect-4/5 rounded-2xl overflow-hidden bg-neutral-100 flex items-center justify-center shrink-0" }, bgVideoSrc ? /* @__PURE__ */ import_react8.default.createElement(
474
+ "video",
475
+ {
476
+ src: bgVideoSrc,
477
+ poster: bgImageSrc,
478
+ autoPlay: true,
479
+ loop: true,
480
+ muted: true,
481
+ playsInline: true,
482
+ className: "absolute inset-0 w-full h-full object-cover"
483
+ }
484
+ ) : bgImageSrc ? /* @__PURE__ */ import_react8.default.createElement(
485
+ import_image2.default,
486
+ {
487
+ src: bgImageSrc,
488
+ alt: "Hero Media",
489
+ fill: true,
490
+ priority: true,
491
+ className: "object-cover"
492
+ }
493
+ ) : null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "absolute inset-0 bg-black/5 pointer-events-none mix-blend-overlay" }))))
494
+ );
490
495
  };
491
496
 
492
497
  // src/components/AppBento2.tsx
package/dist/index.mjs CHANGED
@@ -381,53 +381,58 @@ var HeroSection = ({
381
381
  }
382
382
  return () => observer.disconnect();
383
383
  }, []);
384
- return /* @__PURE__ */ React6.createElement("section", { className: "relative min-h-[85vh] pt-40 sm:pt-48 pb-20 w-full bg-white overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 w-full h-full flex flex-col lg:flex-row items-center gap-12 lg:gap-8" }, /* @__PURE__ */ React6.createElement("div", { className: "flex-1 flex flex-col items-start text-left z-20 w-full" }, badgeText && /* @__PURE__ */ React6.createElement("span", { className: "inline-block py-1 px-3 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium tracking-wide mb-6" }, badgeText), /* @__PURE__ */ React6.createElement(
385
- "h1",
386
- {
387
- ref: titleRef,
388
- className: `text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-light mb-6 text-neutral-900 tracking-tight leading-[1.1] max-w-2xl`,
389
- style: isAnimating ? { animationIterationCount: 1 } : {}
390
- },
391
- titlePrefix,
392
- " ",
393
- /* @__PURE__ */ React6.createElement("span", { className: "font-medium gradient-text block mt-1" }, highlightText)
394
- ), subtitle && /* @__PURE__ */ React6.createElement("p", { className: "text-[15px] md:text-[17px] text-neutral-500 max-w-xl mb-10 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-4 w-full sm:w-auto mb-16" }, ctaText && ctaHref && /* @__PURE__ */ React6.createElement("div", { className: "w-full sm:w-64 flex justify-start *:w-full" }, /* @__PURE__ */ React6.createElement(ThreeDButton, { href: ctaHref }, ctaText)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React6.createElement(
395
- Link4,
396
- {
397
- href: secondaryCtaHref,
398
- className: "w-full sm:w-64 inline-flex font-medium items-center justify-center text-xs tracking-widest rounded-full px-8 py-3 border border-neutral-200 text-center text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900 outline-none transition-all"
399
- },
400
- secondaryCtaText
401
- )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex flex-col items-start mt-auto" }, appsText && /* @__PURE__ */ React6.createElement("p", { className: "text-[10px] font-medium tracking-[0.15em] text-neutral-400 mb-4 uppercase" }, appsText), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-wrap justify-start items-center gap-6 opacity-80 mix-blend-multiply" }, appLogos.map((logo, idx) => /* @__PURE__ */ React6.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-7 sm:w-7 flex items-center justify-center cursor-default grayscale hover:grayscale-0 transition-all duration-300" }, /* @__PURE__ */ React6.createElement(
402
- Image2,
403
- {
404
- src: logo.src,
405
- alt: logo.alt,
406
- width: 40,
407
- height: 40,
408
- className: "object-contain h-full w-auto"
409
- }
410
- )))))), (bgVideoSrc || bgImageSrc) && /* @__PURE__ */ React6.createElement("div", { className: "flex-1 w-full relative aspect-square lg:aspect-4/3 rounded-2xl overflow-hidden bg-neutral-100 flex items-center justify-center" }, bgVideoSrc ? /* @__PURE__ */ React6.createElement(
411
- "video",
412
- {
413
- src: bgVideoSrc,
414
- poster: bgImageSrc,
415
- autoPlay: true,
416
- loop: true,
417
- muted: true,
418
- playsInline: true,
419
- className: "absolute inset-0 w-full h-full object-cover"
420
- }
421
- ) : bgImageSrc ? /* @__PURE__ */ React6.createElement(
422
- Image2,
423
- {
424
- src: bgImageSrc,
425
- alt: "Hero Media",
426
- fill: true,
427
- priority: true,
428
- className: "object-cover"
429
- }
430
- ) : null, /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-black/5 pointer-events-none mix-blend-overlay" }))));
384
+ return (
385
+ // Outer section provides the "space from the wall" (padding)
386
+ /* @__PURE__ */ React6.createElement("section", { className: "relative w-full px-4 sm:px-6 lg:px-8 pt-24 sm:pt-32 pb-12 flex justify-center overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full max-w-350 bg-white rounded-2xl min-h-[80vh] p-6 sm:p-12 lg:p-16 flex flex-col lg:flex-row items-center gap-12 lg:gap-16 relative" }, /* @__PURE__ */ React6.createElement("div", { className: "flex-1 flex flex-col items-start text-left z-20 w-full mt-8 lg:mt-0" }, badgeText && /* @__PURE__ */ React6.createElement("span", { className: "inline-block py-1.5 px-4 rounded-full bg-neutral-100 text-neutral-600 text-xs font-medium tracking-wide mb-8" }, badgeText), /* @__PURE__ */ React6.createElement(
387
+ "h1",
388
+ {
389
+ ref: titleRef,
390
+ className: `text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-light mb-6 text-neutral-900 tracking-tight leading-[1.1] max-w-2xl`,
391
+ style: isAnimating ? { animationIterationCount: 1 } : {}
392
+ },
393
+ titlePrefix,
394
+ " ",
395
+ /* @__PURE__ */ React6.createElement("span", { className: "font-medium gradient-text block mt-2" }, highlightText)
396
+ ), subtitle && /* @__PURE__ */ React6.createElement("p", { className: "text-[15px] md:text-[17px] text-neutral-500 max-w-xl mb-12 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-4 w-full sm:w-auto mb-16" }, ctaText && ctaHref && // Widened to sm:w-80 (320px) on desktop
397
+ /* @__PURE__ */ React6.createElement("div", { className: "w-full sm:w-80 flex justify-start *:w-full" }, /* @__PURE__ */ React6.createElement(ThreeDButton, { href: ctaHref }, ctaText)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React6.createElement(
398
+ Link4,
399
+ {
400
+ href: secondaryCtaHref,
401
+ className: "w-full sm:w-80 inline-flex font-medium items-center justify-center text-xs tracking-widest rounded-full px-8 py-3.5 bg-neutral-100 text-center text-neutral-700 hover:bg-neutral-200 outline-none transition-colors duration-300"
402
+ },
403
+ secondaryCtaText
404
+ )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex flex-col items-start mt-auto" }, appsText && /* @__PURE__ */ React6.createElement("p", { className: "text-[10px] font-medium tracking-[0.15em] text-neutral-400 mb-5 uppercase" }, appsText), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-wrap justify-start items-center gap-6 opacity-80 mix-blend-multiply" }, appLogos.map((logo, idx) => /* @__PURE__ */ React6.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-7 sm:w-7 flex items-center justify-center cursor-default grayscale hover:grayscale-0 transition-all duration-300" }, /* @__PURE__ */ React6.createElement(
405
+ Image2,
406
+ {
407
+ src: logo.src,
408
+ alt: logo.alt,
409
+ width: 40,
410
+ height: 40,
411
+ className: "object-contain h-full w-auto"
412
+ }
413
+ )))))), (bgVideoSrc || bgImageSrc) && // Drops below text on mobile. Square on mobile (aspect-square), taller on desktop (lg:aspect-[4/5])
414
+ /* @__PURE__ */ React6.createElement("div", { className: "w-full lg:w-[45%] xl:w-[50%] relative aspect-square lg:aspect-4/5 rounded-2xl overflow-hidden bg-neutral-100 flex items-center justify-center shrink-0" }, bgVideoSrc ? /* @__PURE__ */ React6.createElement(
415
+ "video",
416
+ {
417
+ src: bgVideoSrc,
418
+ poster: bgImageSrc,
419
+ autoPlay: true,
420
+ loop: true,
421
+ muted: true,
422
+ playsInline: true,
423
+ className: "absolute inset-0 w-full h-full object-cover"
424
+ }
425
+ ) : bgImageSrc ? /* @__PURE__ */ React6.createElement(
426
+ Image2,
427
+ {
428
+ src: bgImageSrc,
429
+ alt: "Hero Media",
430
+ fill: true,
431
+ priority: true,
432
+ className: "object-cover"
433
+ }
434
+ ) : null, /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-black/5 pointer-events-none mix-blend-overlay" }))))
435
+ );
431
436
  };
432
437
 
433
438
  // src/components/AppBento2.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "6.1.5",
3
+ "version": "6.1.9",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",