@retinalabsllc/zairusjs 20.1.30 → 20.1.40
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.
- package/dist/index.d.mts +8 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.js +50 -23
- package/dist/index.mjs +50 -23
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -444,6 +444,12 @@ interface HeroSectionProps {
|
|
|
444
444
|
bgVideoSrc?: string;
|
|
445
445
|
bgImageSrc?: string;
|
|
446
446
|
isWaitlist?: boolean;
|
|
447
|
+
/** Controls the Next/Image base width and height. Defaults to 120 for crisp Retina display */
|
|
448
|
+
logoSize?: number;
|
|
449
|
+
/** Controls the responsive tailwind classes for the logo wrapper to scale it. Defaults to "relative h-6 sm:h-8" */
|
|
450
|
+
logoWrapperClassName?: string;
|
|
451
|
+
/** Set to true if you want to completely bypass Next.js image compression (ideal for SVGs) */
|
|
452
|
+
unoptimizedLogos?: boolean;
|
|
447
453
|
}
|
|
448
454
|
declare const HeroSection: React.FC<HeroSectionProps>;
|
|
449
455
|
|
|
@@ -490,11 +496,13 @@ interface ScrollFeature {
|
|
|
490
496
|
title: string;
|
|
491
497
|
desc: string;
|
|
492
498
|
image?: string;
|
|
499
|
+
imagePosition?: 'left' | 'right';
|
|
493
500
|
}
|
|
494
501
|
interface FeatureScrollProps {
|
|
495
502
|
tagline: string;
|
|
496
503
|
headline: React.ReactNode;
|
|
497
504
|
features: ScrollFeature[];
|
|
505
|
+
expand?: boolean;
|
|
498
506
|
}
|
|
499
507
|
declare const FeatureScroll: React.FC<FeatureScrollProps>;
|
|
500
508
|
|
package/dist/index.d.ts
CHANGED
|
@@ -444,6 +444,12 @@ interface HeroSectionProps {
|
|
|
444
444
|
bgVideoSrc?: string;
|
|
445
445
|
bgImageSrc?: string;
|
|
446
446
|
isWaitlist?: boolean;
|
|
447
|
+
/** Controls the Next/Image base width and height. Defaults to 120 for crisp Retina display */
|
|
448
|
+
logoSize?: number;
|
|
449
|
+
/** Controls the responsive tailwind classes for the logo wrapper to scale it. Defaults to "relative h-6 sm:h-8" */
|
|
450
|
+
logoWrapperClassName?: string;
|
|
451
|
+
/** Set to true if you want to completely bypass Next.js image compression (ideal for SVGs) */
|
|
452
|
+
unoptimizedLogos?: boolean;
|
|
447
453
|
}
|
|
448
454
|
declare const HeroSection: React.FC<HeroSectionProps>;
|
|
449
455
|
|
|
@@ -490,11 +496,13 @@ interface ScrollFeature {
|
|
|
490
496
|
title: string;
|
|
491
497
|
desc: string;
|
|
492
498
|
image?: string;
|
|
499
|
+
imagePosition?: 'left' | 'right';
|
|
493
500
|
}
|
|
494
501
|
interface FeatureScrollProps {
|
|
495
502
|
tagline: string;
|
|
496
503
|
headline: React.ReactNode;
|
|
497
504
|
features: ScrollFeature[];
|
|
505
|
+
expand?: boolean;
|
|
498
506
|
}
|
|
499
507
|
declare const FeatureScroll: React.FC<FeatureScrollProps>;
|
|
500
508
|
|
package/dist/index.js
CHANGED
|
@@ -2802,7 +2802,11 @@ var HeroSection = ({
|
|
|
2802
2802
|
appLogos,
|
|
2803
2803
|
bgVideoSrc,
|
|
2804
2804
|
bgImageSrc,
|
|
2805
|
-
isWaitlist = false
|
|
2805
|
+
isWaitlist = false,
|
|
2806
|
+
logoSize = 120,
|
|
2807
|
+
// Increased to 120 so the source image is sharp
|
|
2808
|
+
logoWrapperClassName = "relative h-6 sm:h-8",
|
|
2809
|
+
unoptimizedLogos = false
|
|
2806
2810
|
}) => {
|
|
2807
2811
|
const [isAnimating, setIsAnimating] = (0, import_react45.useState)(false);
|
|
2808
2812
|
const [isWaitlistOpen, setIsWaitlistOpen] = (0, import_react45.useState)(false);
|
|
@@ -2829,7 +2833,7 @@ var HeroSection = ({
|
|
|
2829
2833
|
setIsWaitlistOpen(true);
|
|
2830
2834
|
}
|
|
2831
2835
|
};
|
|
2832
|
-
return /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-screen min-h-screen flex justify-center items-center
|
|
2836
|
+
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(
|
|
2833
2837
|
"video",
|
|
2834
2838
|
{
|
|
2835
2839
|
src: bgVideoSrc,
|
|
@@ -2864,8 +2868,7 @@ var HeroSection = ({
|
|
|
2864
2868
|
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]"
|
|
2865
2869
|
},
|
|
2866
2870
|
/* @__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" }, "*")))
|
|
2867
|
-
)), /* @__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 &&
|
|
2868
|
-
/* @__PURE__ */ import_react45.default.createElement(
|
|
2871
|
+
)), /* @__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(
|
|
2869
2872
|
import_link6.default,
|
|
2870
2873
|
{
|
|
2871
2874
|
href: isWaitlist ? "#" : ctaHref || "#",
|
|
@@ -2881,16 +2884,18 @@ var HeroSection = ({
|
|
|
2881
2884
|
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"
|
|
2882
2885
|
},
|
|
2883
2886
|
secondaryCtaText
|
|
2884
|
-
)), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react45.default.createElement("div", { className: "flex flex-col gap-
|
|
2887
|
+
)))))), 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(
|
|
2885
2888
|
import_image2.default,
|
|
2886
2889
|
{
|
|
2887
2890
|
src: logo.src,
|
|
2888
2891
|
alt: logo.alt,
|
|
2889
|
-
width:
|
|
2890
|
-
height:
|
|
2891
|
-
|
|
2892
|
+
width: logoSize,
|
|
2893
|
+
height: logoSize,
|
|
2894
|
+
quality: 100,
|
|
2895
|
+
unoptimized: unoptimizedLogos,
|
|
2896
|
+
className: "h-full w-auto grayscale object-contain"
|
|
2892
2897
|
}
|
|
2893
|
-
)))))
|
|
2898
|
+
))))), /* @__PURE__ */ import_react45.default.createElement(
|
|
2894
2899
|
WaitlistDialog,
|
|
2895
2900
|
{
|
|
2896
2901
|
isOpen: isWaitlistOpen,
|
|
@@ -3181,6 +3186,7 @@ var import_core_free_icons19 = require("@hugeicons/core-free-icons");
|
|
|
3181
3186
|
var FeatureCard = ({ feature, bgImage }) => {
|
|
3182
3187
|
const [isBgLoading, setIsBgLoading] = (0, import_react50.useState)(true);
|
|
3183
3188
|
const [isFgLoading, setIsFgLoading] = (0, import_react50.useState)(!!feature.image);
|
|
3189
|
+
const isLeft = feature.imagePosition === "left";
|
|
3184
3190
|
return /* @__PURE__ */ import_react50.default.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "relative w-full aspect-16/10 bg-stone-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ import_react50.default.createElement(
|
|
3185
3191
|
import_image3.default,
|
|
3186
3192
|
{
|
|
@@ -3202,22 +3208,32 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
3202
3208
|
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")`
|
|
3203
3209
|
}
|
|
3204
3210
|
}
|
|
3205
|
-
), isFgLoading && feature.image && /* @__PURE__ */ import_react50.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-stone-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ import_react50.default.createElement(import_react51.HugeiconsIcon, { icon: import_core_free_icons19.Loading03Icon, size: 32, className: "animate-spin text-stone-400" })), feature.image && /* @__PURE__ */ import_react50.default.createElement(
|
|
3206
|
-
|
|
3211
|
+
), isFgLoading && feature.image && /* @__PURE__ */ import_react50.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-stone-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ import_react50.default.createElement(import_react51.HugeiconsIcon, { icon: import_core_free_icons19.Loading03Icon, size: 32, className: "animate-spin text-stone-400" })), feature.image && /* @__PURE__ */ import_react50.default.createElement(
|
|
3212
|
+
"div",
|
|
3207
3213
|
{
|
|
3208
|
-
src: feature.image,
|
|
3209
|
-
alt: feature.title,
|
|
3210
|
-
fill: true,
|
|
3211
|
-
sizes: "(max-width: 768px) 90vw, 600px",
|
|
3212
|
-
onLoad: () => setIsFgLoading(false),
|
|
3213
3214
|
className: `
|
|
3214
|
-
|
|
3215
|
+
absolute -bottom-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out
|
|
3216
|
+
${isLeft ? "-left-6 group-hover:translate-x-2 group-hover:-translate-y-2" : "-right-6 group-hover:-translate-x-2 group-hover:-translate-y-2"}
|
|
3217
|
+
`
|
|
3218
|
+
},
|
|
3219
|
+
/* @__PURE__ */ import_react50.default.createElement(
|
|
3220
|
+
import_image3.default,
|
|
3221
|
+
{
|
|
3222
|
+
src: feature.image,
|
|
3223
|
+
alt: feature.title,
|
|
3224
|
+
fill: true,
|
|
3225
|
+
sizes: "(max-width: 768px) 90vw, 600px",
|
|
3226
|
+
onLoad: () => setIsFgLoading(false),
|
|
3227
|
+
className: `
|
|
3228
|
+
object-cover transition-all duration-700 ease-out
|
|
3229
|
+
${isLeft ? "object-top-right rounded-tr-2xl shadow-[12px_-12px_30px_rgba(0,0,0,0.06)]" : "object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)]"}
|
|
3215
3230
|
${isFgLoading ? "opacity-0 blur-xl" : "opacity-100 blur-0"}
|
|
3216
3231
|
`
|
|
3217
|
-
|
|
3218
|
-
|
|
3232
|
+
}
|
|
3233
|
+
)
|
|
3234
|
+
)), /* @__PURE__ */ import_react50.default.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ import_react50.default.createElement("h3", { className: "text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ import_react50.default.createElement("p", { className: "text-sm leading-relaxed text-stone-600 max-w-[90%]" }, feature.desc)));
|
|
3219
3235
|
};
|
|
3220
|
-
var FeatureScroll = ({ tagline, headline, features }) => {
|
|
3236
|
+
var FeatureScroll = ({ tagline, headline, features, expand = false }) => {
|
|
3221
3237
|
const scrollRef = (0, import_react50.useRef)(null);
|
|
3222
3238
|
const [canScrollLeft, setCanScrollLeft] = (0, import_react50.useState)(false);
|
|
3223
3239
|
const [canScrollRight, setCanScrollRight] = (0, import_react50.useState)(true);
|
|
@@ -3242,9 +3258,13 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
3242
3258
|
const bgImages = [
|
|
3243
3259
|
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_7.avif",
|
|
3244
3260
|
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_6.avif",
|
|
3245
|
-
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif"
|
|
3261
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif",
|
|
3262
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_2.avif",
|
|
3263
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_3.avif",
|
|
3264
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_4.avif"
|
|
3246
3265
|
];
|
|
3247
|
-
|
|
3266
|
+
const maxItems = expand ? 6 : 3;
|
|
3267
|
+
return /* @__PURE__ */ import_react50.default.createElement("section", { className: "py-24 w-full flex justify-center relative z-10 overflow-hidden" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12" }, /* @__PURE__ */ import_react50.default.createElement("div", { className: "relative z-10 text-left" }, /* @__PURE__ */ import_react50.default.createElement("span", { className: "text-xs tracking-[0.4em] text-stone-500 block mb-4" }, tagline), /* @__PURE__ */ import_react50.default.createElement("h2", { className: "text-3xl tracking-tight text-black leading-[1.05]" }, headline)), /* @__PURE__ */ import_react50.default.createElement("div", { className: "hidden md:flex items-center gap-3" }, /* @__PURE__ */ import_react50.default.createElement(
|
|
3248
3268
|
"button",
|
|
3249
3269
|
{
|
|
3250
3270
|
onClick: () => scroll("left"),
|
|
@@ -3267,7 +3287,14 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
3267
3287
|
onScroll: checkScroll,
|
|
3268
3288
|
className: "flex gap-6 overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] scrollbar-none pb-8 -mx-4 px-4 md:mx-0 md:px-0"
|
|
3269
3289
|
},
|
|
3270
|
-
features.slice(0,
|
|
3290
|
+
features.slice(0, maxItems).map((feature, idx) => /* @__PURE__ */ import_react50.default.createElement(
|
|
3291
|
+
FeatureCard,
|
|
3292
|
+
{
|
|
3293
|
+
key: idx,
|
|
3294
|
+
feature,
|
|
3295
|
+
bgImage: bgImages[idx % bgImages.length]
|
|
3296
|
+
}
|
|
3297
|
+
))
|
|
3271
3298
|
), /* @__PURE__ */ import_react50.default.createElement("div", { className: "flex md:hidden items-center justify-center gap-4 mt-2" }, /* @__PURE__ */ import_react50.default.createElement(
|
|
3272
3299
|
"button",
|
|
3273
3300
|
{
|
package/dist/index.mjs
CHANGED
|
@@ -2794,7 +2794,11 @@ var HeroSection = ({
|
|
|
2794
2794
|
appLogos,
|
|
2795
2795
|
bgVideoSrc,
|
|
2796
2796
|
bgImageSrc,
|
|
2797
|
-
isWaitlist = false
|
|
2797
|
+
isWaitlist = false,
|
|
2798
|
+
logoSize = 120,
|
|
2799
|
+
// Increased to 120 so the source image is sharp
|
|
2800
|
+
logoWrapperClassName = "relative h-6 sm:h-8",
|
|
2801
|
+
unoptimizedLogos = false
|
|
2798
2802
|
}) => {
|
|
2799
2803
|
const [isAnimating, setIsAnimating] = useState19(false);
|
|
2800
2804
|
const [isWaitlistOpen, setIsWaitlistOpen] = useState19(false);
|
|
@@ -2821,7 +2825,7 @@ var HeroSection = ({
|
|
|
2821
2825
|
setIsWaitlistOpen(true);
|
|
2822
2826
|
}
|
|
2823
2827
|
};
|
|
2824
|
-
return /* @__PURE__ */ React26.createElement("div", { className: "w-screen min-h-screen flex justify-center items-center
|
|
2828
|
+
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(
|
|
2825
2829
|
"video",
|
|
2826
2830
|
{
|
|
2827
2831
|
src: bgVideoSrc,
|
|
@@ -2856,8 +2860,7 @@ var HeroSection = ({
|
|
|
2856
2860
|
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]"
|
|
2857
2861
|
},
|
|
2858
2862
|
/* @__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" }, "*")))
|
|
2859
|
-
)), /* @__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 &&
|
|
2860
|
-
/* @__PURE__ */ React26.createElement(
|
|
2863
|
+
)), /* @__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(
|
|
2861
2864
|
Link6,
|
|
2862
2865
|
{
|
|
2863
2866
|
href: isWaitlist ? "#" : ctaHref || "#",
|
|
@@ -2873,16 +2876,18 @@ var HeroSection = ({
|
|
|
2873
2876
|
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"
|
|
2874
2877
|
},
|
|
2875
2878
|
secondaryCtaText
|
|
2876
|
-
)), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col gap-
|
|
2879
|
+
)))))), 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(
|
|
2877
2880
|
Image3,
|
|
2878
2881
|
{
|
|
2879
2882
|
src: logo.src,
|
|
2880
2883
|
alt: logo.alt,
|
|
2881
|
-
width:
|
|
2882
|
-
height:
|
|
2883
|
-
|
|
2884
|
+
width: logoSize,
|
|
2885
|
+
height: logoSize,
|
|
2886
|
+
quality: 100,
|
|
2887
|
+
unoptimized: unoptimizedLogos,
|
|
2888
|
+
className: "h-full w-auto grayscale object-contain"
|
|
2884
2889
|
}
|
|
2885
|
-
)))))
|
|
2890
|
+
))))), /* @__PURE__ */ React26.createElement(
|
|
2886
2891
|
WaitlistDialog,
|
|
2887
2892
|
{
|
|
2888
2893
|
isOpen: isWaitlistOpen,
|
|
@@ -3180,6 +3185,7 @@ import { ArrowLeft01Icon as ArrowLeft01Icon9, ArrowRight01Icon as ArrowRight01Ic
|
|
|
3180
3185
|
var FeatureCard = ({ feature, bgImage }) => {
|
|
3181
3186
|
const [isBgLoading, setIsBgLoading] = useState22(true);
|
|
3182
3187
|
const [isFgLoading, setIsFgLoading] = useState22(!!feature.image);
|
|
3188
|
+
const isLeft = feature.imagePosition === "left";
|
|
3183
3189
|
return /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ React29.createElement("div", { className: "relative w-full aspect-16/10 bg-stone-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React29.createElement(
|
|
3184
3190
|
Image4,
|
|
3185
3191
|
{
|
|
@@ -3201,22 +3207,32 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
3201
3207
|
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")`
|
|
3202
3208
|
}
|
|
3203
3209
|
}
|
|
3204
|
-
), isFgLoading && feature.image && /* @__PURE__ */ React29.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-stone-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon22, { icon: Loading03Icon13, size: 32, className: "animate-spin text-stone-400" })), feature.image && /* @__PURE__ */ React29.createElement(
|
|
3205
|
-
|
|
3210
|
+
), isFgLoading && feature.image && /* @__PURE__ */ React29.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-stone-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon22, { icon: Loading03Icon13, size: 32, className: "animate-spin text-stone-400" })), feature.image && /* @__PURE__ */ React29.createElement(
|
|
3211
|
+
"div",
|
|
3206
3212
|
{
|
|
3207
|
-
src: feature.image,
|
|
3208
|
-
alt: feature.title,
|
|
3209
|
-
fill: true,
|
|
3210
|
-
sizes: "(max-width: 768px) 90vw, 600px",
|
|
3211
|
-
onLoad: () => setIsFgLoading(false),
|
|
3212
3213
|
className: `
|
|
3213
|
-
|
|
3214
|
+
absolute -bottom-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out
|
|
3215
|
+
${isLeft ? "-left-6 group-hover:translate-x-2 group-hover:-translate-y-2" : "-right-6 group-hover:-translate-x-2 group-hover:-translate-y-2"}
|
|
3216
|
+
`
|
|
3217
|
+
},
|
|
3218
|
+
/* @__PURE__ */ React29.createElement(
|
|
3219
|
+
Image4,
|
|
3220
|
+
{
|
|
3221
|
+
src: feature.image,
|
|
3222
|
+
alt: feature.title,
|
|
3223
|
+
fill: true,
|
|
3224
|
+
sizes: "(max-width: 768px) 90vw, 600px",
|
|
3225
|
+
onLoad: () => setIsFgLoading(false),
|
|
3226
|
+
className: `
|
|
3227
|
+
object-cover transition-all duration-700 ease-out
|
|
3228
|
+
${isLeft ? "object-top-right rounded-tr-2xl shadow-[12px_-12px_30px_rgba(0,0,0,0.06)]" : "object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)]"}
|
|
3214
3229
|
${isFgLoading ? "opacity-0 blur-xl" : "opacity-100 blur-0"}
|
|
3215
3230
|
`
|
|
3216
|
-
|
|
3217
|
-
|
|
3231
|
+
}
|
|
3232
|
+
)
|
|
3233
|
+
)), /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ React29.createElement("h3", { className: "text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ React29.createElement("p", { className: "text-sm leading-relaxed text-stone-600 max-w-[90%]" }, feature.desc)));
|
|
3218
3234
|
};
|
|
3219
|
-
var FeatureScroll = ({ tagline, headline, features }) => {
|
|
3235
|
+
var FeatureScroll = ({ tagline, headline, features, expand = false }) => {
|
|
3220
3236
|
const scrollRef = useRef7(null);
|
|
3221
3237
|
const [canScrollLeft, setCanScrollLeft] = useState22(false);
|
|
3222
3238
|
const [canScrollRight, setCanScrollRight] = useState22(true);
|
|
@@ -3241,9 +3257,13 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
3241
3257
|
const bgImages = [
|
|
3242
3258
|
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_7.avif",
|
|
3243
3259
|
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_6.avif",
|
|
3244
|
-
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif"
|
|
3260
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif",
|
|
3261
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_2.avif",
|
|
3262
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_3.avif",
|
|
3263
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_4.avif"
|
|
3245
3264
|
];
|
|
3246
|
-
|
|
3265
|
+
const maxItems = expand ? 6 : 3;
|
|
3266
|
+
return /* @__PURE__ */ React29.createElement("section", { className: "py-24 w-full flex justify-center relative z-10 overflow-hidden" }, /* @__PURE__ */ React29.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12" }, /* @__PURE__ */ React29.createElement("div", { className: "relative z-10 text-left" }, /* @__PURE__ */ React29.createElement("span", { className: "text-xs tracking-[0.4em] text-stone-500 block mb-4" }, tagline), /* @__PURE__ */ React29.createElement("h2", { className: "text-3xl tracking-tight text-black leading-[1.05]" }, headline)), /* @__PURE__ */ React29.createElement("div", { className: "hidden md:flex items-center gap-3" }, /* @__PURE__ */ React29.createElement(
|
|
3247
3267
|
"button",
|
|
3248
3268
|
{
|
|
3249
3269
|
onClick: () => scroll("left"),
|
|
@@ -3266,7 +3286,14 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
3266
3286
|
onScroll: checkScroll,
|
|
3267
3287
|
className: "flex gap-6 overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] scrollbar-none pb-8 -mx-4 px-4 md:mx-0 md:px-0"
|
|
3268
3288
|
},
|
|
3269
|
-
features.slice(0,
|
|
3289
|
+
features.slice(0, maxItems).map((feature, idx) => /* @__PURE__ */ React29.createElement(
|
|
3290
|
+
FeatureCard,
|
|
3291
|
+
{
|
|
3292
|
+
key: idx,
|
|
3293
|
+
feature,
|
|
3294
|
+
bgImage: bgImages[idx % bgImages.length]
|
|
3295
|
+
}
|
|
3296
|
+
))
|
|
3270
3297
|
), /* @__PURE__ */ React29.createElement("div", { className: "flex md:hidden items-center justify-center gap-4 mt-2" }, /* @__PURE__ */ React29.createElement(
|
|
3271
3298
|
"button",
|
|
3272
3299
|
{
|