@retinalabsllc/zairusjs 5.1.70 → 5.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.
- package/dist/index.d.mts +4 -291
- package/dist/index.d.ts +4 -291
- package/dist/index.js +374 -2007
- package/dist/index.mjs +358 -2012
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -21,6 +21,7 @@ var Faq = ({
|
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
{ threshold: 0.1 }
|
|
24
|
+
// Triggers when 10% of the title is visible
|
|
24
25
|
);
|
|
25
26
|
if (titleRef.current) {
|
|
26
27
|
observer.observe(titleRef.current);
|
|
@@ -30,11 +31,11 @@ var Faq = ({
|
|
|
30
31
|
const toggleFaq = (index) => {
|
|
31
32
|
setActiveFaq(activeFaq === index ? null : index);
|
|
32
33
|
};
|
|
33
|
-
return /* @__PURE__ */ React.createElement("div", { className: "py-24 w-full flex justify-center px-4 md:px-8 z-10 relative
|
|
34
|
+
return /* @__PURE__ */ React.createElement("div", { className: "py-24 w-full flex justify-center px-4 md:px-8 z-10 relative" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-10 max-w-4xl w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center w-full" }, title && /* @__PURE__ */ React.createElement(
|
|
34
35
|
"h2",
|
|
35
36
|
{
|
|
36
37
|
ref: titleRef,
|
|
37
|
-
className: `text-3xl
|
|
38
|
+
className: `text-3xl text-black tracking-tight leading-[1.15] ${isAnimating ? "" : ""}`,
|
|
38
39
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
39
40
|
},
|
|
40
41
|
"FAQ"
|
|
@@ -42,10 +43,10 @@ var Faq = ({
|
|
|
42
43
|
const isOpen = activeFaq === index;
|
|
43
44
|
const getShadowStyle = () => {
|
|
44
45
|
if (isOpen) return `
|
|
45
|
-
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.
|
|
46
|
-
inset 0 -3px 0 0 rgba(0, 0, 0, 0.
|
|
47
|
-
0 4px 0 0 #
|
|
48
|
-
0 12px 24px rgba(0, 0, 0, 0.
|
|
46
|
+
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
|
|
47
|
+
inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
|
|
48
|
+
0 4px 0 0 #0c0c0c,
|
|
49
|
+
0 12px 24px rgba(0, 0, 0, 0.1)
|
|
49
50
|
`;
|
|
50
51
|
return "none";
|
|
51
52
|
};
|
|
@@ -53,7 +54,7 @@ var Faq = ({
|
|
|
53
54
|
"div",
|
|
54
55
|
{
|
|
55
56
|
key: index,
|
|
56
|
-
className: `relative transition-all duration-500 rounded-4xl overflow-hidden
|
|
57
|
+
className: `relative transition-all duration-500 rounded-4xl overflow-hidden ${isOpen ? "bg-black border-transparent" : "border border-neutral-200 hover:border-neutral-300"}`,
|
|
57
58
|
style: { boxShadow: getShadowStyle() }
|
|
58
59
|
},
|
|
59
60
|
isOpen && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
@@ -72,19 +73,19 @@ var Faq = ({
|
|
|
72
73
|
/* @__PURE__ */ React.createElement(
|
|
73
74
|
"span",
|
|
74
75
|
{
|
|
75
|
-
className: `text-[15px] transition-colors duration-300 flex items-center gap-2 ${isOpen ? "text-white" : "text-
|
|
76
|
+
className: `text-[15px] transition-colors duration-300 flex items-center gap-2 ${isOpen ? "text-white" : "text-black"}`
|
|
76
77
|
},
|
|
77
|
-
/* @__PURE__ */ React.createElement("span", { className: "text-neutral-
|
|
78
|
+
/* @__PURE__ */ React.createElement("span", { className: isOpen ? "text-neutral-400" : "text-neutral-400" }, index + 1, "."),
|
|
78
79
|
faq.question
|
|
79
80
|
),
|
|
80
|
-
/* @__PURE__ */ React.createElement("div", { className: `shrink-0 transition-colors duration-300 ${isOpen ? "text-white" : "text-
|
|
81
|
+
/* @__PURE__ */ React.createElement("div", { className: `shrink-0 transition-colors duration-300 ${isOpen ? "text-white" : "text-black group-hover:text-black/70"}` }, isOpen ? /* @__PURE__ */ React.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React.createElement("path", { d: "M8 12h8", strokeLinecap: "round" })) : /* @__PURE__ */ React.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React.createElement("path", { d: "M12 8v8M8 12h8", strokeLinecap: "round" })))
|
|
81
82
|
),
|
|
82
83
|
/* @__PURE__ */ React.createElement(
|
|
83
84
|
"div",
|
|
84
85
|
{
|
|
85
86
|
className: `relative z-20 grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`
|
|
86
87
|
},
|
|
87
|
-
/* @__PURE__ */ React.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React.createElement("p", { className: `text-[14px] leading-relaxed px-6 pb-6 pt-0 pr-12 transition-colors duration-300 ${isOpen ? "text-neutral-
|
|
88
|
+
/* @__PURE__ */ React.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React.createElement("p", { className: `text-[14px] leading-relaxed px-6 pb-6 pt-0 pr-12 transition-colors duration-300 ${isOpen ? "text-neutral-300" : "text-transparent"}` }, faq.answer))
|
|
88
89
|
)
|
|
89
90
|
);
|
|
90
91
|
}))));
|
|
@@ -99,23 +100,31 @@ var ThreeDButton = ({
|
|
|
99
100
|
className = "",
|
|
100
101
|
onClick
|
|
101
102
|
}) => {
|
|
102
|
-
const
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
const baseShadow = `
|
|
104
|
+
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.3),
|
|
105
|
+
inset 0 -2px 0 0 rgba(0, 0, 0, 0.5),
|
|
106
|
+
0 3px 0 0 #0c0c0c,
|
|
107
|
+
0 6px 10px rgba(0, 0, 0, 0.3)
|
|
108
|
+
`;
|
|
109
|
+
const hoverShadow = `
|
|
110
|
+
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
|
|
111
|
+
inset 0 -2px 0 0 rgba(0, 0, 0, 0.5),
|
|
112
|
+
0 4px 0 0 #0c0c0c,
|
|
113
|
+
0 8px 12px rgba(0, 0, 0, 0.35)
|
|
114
|
+
`;
|
|
115
|
+
const activeShadow = `
|
|
116
|
+
inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
|
|
117
|
+
inset 0 -1px 0 0 rgba(0, 0, 0, 0.5),
|
|
118
|
+
0 1px 0 0 #0c0c0c,
|
|
119
|
+
0 2px 4px rgba(0, 0, 0, 0.2)
|
|
120
|
+
`;
|
|
106
121
|
return /* @__PURE__ */ React2.createElement(
|
|
107
122
|
Link,
|
|
108
123
|
{
|
|
109
124
|
href,
|
|
110
125
|
onClick,
|
|
111
|
-
className: `relative inline-flex items-center justify-center py-2.5 px-8 rounded-full
|
|
112
|
-
style: {
|
|
113
|
-
backgroundImage: silverBg,
|
|
114
|
-
backgroundSize: "cover",
|
|
115
|
-
backgroundPosition: "center right",
|
|
116
|
-
boxShadow: baseShadow,
|
|
117
|
-
textShadow: "0 1px 1px rgba(255,255,255,0.6)"
|
|
118
|
-
},
|
|
126
|
+
className: `relative inline-flex items-center justify-center py-2.5 px-8 rounded-full bg-neutral-950 text-white text-xs transition-all duration-150 select-none group ${className}`,
|
|
127
|
+
style: { boxShadow: baseShadow },
|
|
119
128
|
onMouseEnter: (e) => {
|
|
120
129
|
e.currentTarget.style.boxShadow = hoverShadow;
|
|
121
130
|
e.currentTarget.style.transform = "translateY(-1px)";
|
|
@@ -132,8 +141,8 @@ var ThreeDButton = ({
|
|
|
132
141
|
e.currentTarget.style.transform = "translateY(-1px)";
|
|
133
142
|
}
|
|
134
143
|
},
|
|
135
|
-
/* @__PURE__ */ React2.createElement("span", { className: "absolute inset-0 bg-linear-to-
|
|
136
|
-
/* @__PURE__ */ React2.createElement("span", { className: "relative z-10 pt-1 tracking-wide text-
|
|
144
|
+
/* @__PURE__ */ React2.createElement("span", { className: "absolute inset-0 rounded-full bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none" }),
|
|
145
|
+
/* @__PURE__ */ React2.createElement("span", { className: "relative z-10 pt-1 tracking-wide text-white/95 group-hover:text-white transition-colors duration-150 flex items-center justify-center leading-none" }, children)
|
|
137
146
|
);
|
|
138
147
|
};
|
|
139
148
|
|
|
@@ -151,11 +160,29 @@ var ThreeDActionButton = ({
|
|
|
151
160
|
ariaLabel
|
|
152
161
|
}) => {
|
|
153
162
|
const isInteractionDisabled = disabled || isLoading;
|
|
154
|
-
const
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
163
|
+
const baseShadow = `
|
|
164
|
+
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.3),
|
|
165
|
+
inset 0 -2px 0 0 rgba(0, 0, 0, 0.5),
|
|
166
|
+
0 3px 0 0 #0c0c0c,
|
|
167
|
+
0 6px 10px rgba(0, 0, 0, 0.3)
|
|
168
|
+
`;
|
|
169
|
+
const hoverShadow = `
|
|
170
|
+
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
|
|
171
|
+
inset 0 -2px 0 0 rgba(0, 0, 0, 0.5),
|
|
172
|
+
0 4px 0 0 #0c0c0c,
|
|
173
|
+
0 8px 12px rgba(0, 0, 0, 0.35)
|
|
174
|
+
`;
|
|
175
|
+
const activeShadow = `
|
|
176
|
+
inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
|
|
177
|
+
inset 0 -1px 0 0 rgba(0, 0, 0, 0.5),
|
|
178
|
+
0 1px 0 0 #0c0c0c,
|
|
179
|
+
0 2px 4px rgba(0, 0, 0, 0.2)
|
|
180
|
+
`;
|
|
181
|
+
const disabledShadow = `
|
|
182
|
+
inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
|
|
183
|
+
inset 0 -1px 0 0 rgba(0, 0, 0, 0.3),
|
|
184
|
+
0 1px 0 0 #1c1c1c
|
|
185
|
+
`;
|
|
159
186
|
return /* @__PURE__ */ React3.createElement(
|
|
160
187
|
"button",
|
|
161
188
|
{
|
|
@@ -165,18 +192,12 @@ var ThreeDActionButton = ({
|
|
|
165
192
|
"aria-label": ariaLabel,
|
|
166
193
|
className: `
|
|
167
194
|
relative inline-flex items-center justify-center py-2.5 px-8 rounded-full
|
|
168
|
-
|
|
169
|
-
transition-all duration-150 select-none group outline-none
|
|
170
|
-
${isInteractionDisabled ? "opacity-
|
|
195
|
+
bg-neutral-950 text-white text-xs tracking-widest
|
|
196
|
+
transition-all duration-150 select-none group outline-none
|
|
197
|
+
${isInteractionDisabled ? "opacity-50 cursor-not-allowed" : "active:translate-y-0.5"}
|
|
171
198
|
${className}
|
|
172
199
|
`,
|
|
173
|
-
style: {
|
|
174
|
-
backgroundImage: silverBg,
|
|
175
|
-
backgroundSize: "cover",
|
|
176
|
-
backgroundPosition: "center right",
|
|
177
|
-
boxShadow: isInteractionDisabled ? disabledShadow : baseShadow,
|
|
178
|
-
textShadow: "0 1px 1px rgba(255,255,255,0.6)"
|
|
179
|
-
},
|
|
200
|
+
style: { boxShadow: isInteractionDisabled ? disabledShadow : baseShadow },
|
|
180
201
|
onMouseEnter: (e) => {
|
|
181
202
|
if (isInteractionDisabled) return;
|
|
182
203
|
e.currentTarget.style.boxShadow = hoverShadow;
|
|
@@ -197,536 +218,27 @@ var ThreeDActionButton = ({
|
|
|
197
218
|
e.currentTarget.style.transform = "translateY(-1px)";
|
|
198
219
|
}
|
|
199
220
|
},
|
|
200
|
-
/* @__PURE__ */ React3.createElement("span", { className: "absolute inset-0 bg-linear-to-
|
|
201
|
-
/* @__PURE__ */ React3.createElement("span", { className: "relative z-10 flex items-center justify-center gap-2 leading-none
|
|
221
|
+
/* @__PURE__ */ React3.createElement("span", { className: "absolute inset-0 rounded-full bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none" }),
|
|
222
|
+
/* @__PURE__ */ React3.createElement("span", { className: "relative z-10 flex items-center justify-center gap-2 leading-none" }, isLoading ? /* @__PURE__ */ React3.createElement(HugeiconsIcon, { icon: Loading03Icon, size: 16, className: "animate-spin text-white" }) : children)
|
|
202
223
|
);
|
|
203
224
|
};
|
|
204
225
|
|
|
205
|
-
// src/components/ZairusAuth.tsx
|
|
206
|
-
import React4, { useState as useState2, useRef as useRef2, useEffect as useEffect2, Suspense } from "react";
|
|
207
|
-
import { useSearchParams } from "next/navigation";
|
|
208
|
-
import toast from "react-hot-toast";
|
|
209
|
-
import { useGoogleReCaptcha, GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
|
|
210
|
-
var InputSpinner = () => /* @__PURE__ */ React4.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React4.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React4.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
211
|
-
function AuthFormInner({
|
|
212
|
-
companyName,
|
|
213
|
-
workspaceLabel = "Workspace",
|
|
214
|
-
termsUrl = "https://retinalabs.company/terms-of-service",
|
|
215
|
-
privacyUrl = "https://retinalabs.company/privacy-policy",
|
|
216
|
-
requireNames = true,
|
|
217
|
-
requireOrganization = true,
|
|
218
|
-
useRecaptcha = false,
|
|
219
|
-
defaultRedirectPath = "/app",
|
|
220
|
-
onAuthRequest,
|
|
221
|
-
onVerifyOtp
|
|
222
|
-
}) {
|
|
223
|
-
const searchParams = useSearchParams();
|
|
224
|
-
const redirectUrl = searchParams.get("redirect") || defaultRedirectPath;
|
|
225
|
-
const captchaContext = useRecaptcha ? useGoogleReCaptcha() : null;
|
|
226
|
-
const [mode, setMode] = useState2("LOGIN");
|
|
227
|
-
const [step, setStep] = useState2("INPUT");
|
|
228
|
-
const getInitialSignupStep = () => {
|
|
229
|
-
if (requireNames) return "NAME";
|
|
230
|
-
if (requireOrganization) return "ORGANIZATION";
|
|
231
|
-
return "EMAIL_ID";
|
|
232
|
-
};
|
|
233
|
-
const [signupStep, setSignupStep] = useState2(getInitialSignupStep());
|
|
234
|
-
const [isSubmitting, setIsSubmitting] = useState2(false);
|
|
235
|
-
const [countdown, setCountdown] = useState2(0);
|
|
236
|
-
const [emailId, setEmailId] = useState2("");
|
|
237
|
-
const [firstName, setFirstName] = useState2("");
|
|
238
|
-
const [lastName, setLastName] = useState2("");
|
|
239
|
-
const [orgName, setOrgName] = useState2("");
|
|
240
|
-
const [agreedToTerms, setAgreedToTerms] = useState2(false);
|
|
241
|
-
const [otp, setOtp] = useState2(["", "", "", "", "", ""]);
|
|
242
|
-
const inputRefs = useRef2([]);
|
|
243
|
-
const cleanAlpha = (val) => val.replace(/[^a-zA-Z\s-]/g, "");
|
|
244
|
-
const cleanOrgName = (val) => val.replace(/[^a-zA-Z0-9\s]/g, "").substring(0, 50);
|
|
245
|
-
const cleanEmailId = (val) => val.toLowerCase().replace(/[^a-z0-9@._-]/g, "");
|
|
246
|
-
useEffect2(() => {
|
|
247
|
-
if (countdown > 0) {
|
|
248
|
-
const timer = setTimeout(() => setCountdown(countdown - 1), 1e3);
|
|
249
|
-
return () => clearTimeout(timer);
|
|
250
|
-
}
|
|
251
|
-
}, [countdown]);
|
|
252
|
-
const handleOtpChange = (index, value) => {
|
|
253
|
-
const cleanValue = value.replace(/[^0-9]/g, "");
|
|
254
|
-
if (!cleanValue && value !== "") return;
|
|
255
|
-
const newOtp = [...otp];
|
|
256
|
-
newOtp[index] = cleanValue.slice(-1);
|
|
257
|
-
setOtp(newOtp);
|
|
258
|
-
if (cleanValue && index < 5) {
|
|
259
|
-
inputRefs.current[index + 1]?.focus();
|
|
260
|
-
}
|
|
261
|
-
};
|
|
262
|
-
const handlePaste = (e) => {
|
|
263
|
-
e.preventDefault();
|
|
264
|
-
const pastedData = e.clipboardData.getData("text/plain");
|
|
265
|
-
const numbersOnly = pastedData.replace(/[^0-9]/g, "");
|
|
266
|
-
if (!numbersOnly) return;
|
|
267
|
-
const newOtp = [...otp];
|
|
268
|
-
const length = Math.min(numbersOnly.length, 6);
|
|
269
|
-
for (let i = 0; i < length; i++) {
|
|
270
|
-
newOtp[i] = numbersOnly[i];
|
|
271
|
-
}
|
|
272
|
-
setOtp(newOtp);
|
|
273
|
-
if (length < 6) {
|
|
274
|
-
inputRefs.current[length]?.focus();
|
|
275
|
-
} else {
|
|
276
|
-
inputRefs.current[5]?.focus();
|
|
277
|
-
verifyOtpCode(newOtp.join(""));
|
|
278
|
-
}
|
|
279
|
-
};
|
|
280
|
-
const handleAuthRequestSubmit = async (e) => {
|
|
281
|
-
if (e) e.preventDefault();
|
|
282
|
-
if (mode === "SIGNUP" && !agreedToTerms) {
|
|
283
|
-
toast.error("You must agree to the Terms and Privacy Policy.");
|
|
284
|
-
return;
|
|
285
|
-
}
|
|
286
|
-
if (isSubmitting || countdown > 0) return;
|
|
287
|
-
setIsSubmitting(true);
|
|
288
|
-
try {
|
|
289
|
-
let recaptchaToken = void 0;
|
|
290
|
-
if (useRecaptcha && captchaContext?.executeRecaptcha) {
|
|
291
|
-
recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
|
|
292
|
-
}
|
|
293
|
-
const res = await onAuthRequest({
|
|
294
|
-
email: emailId,
|
|
295
|
-
firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
|
|
296
|
-
lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
|
|
297
|
-
organizationName: mode === "SIGNUP" && requireOrganization ? orgName : void 0,
|
|
298
|
-
mode,
|
|
299
|
-
recaptchaToken
|
|
300
|
-
});
|
|
301
|
-
if (res.success) {
|
|
302
|
-
toast.success("Verification code sent");
|
|
303
|
-
setStep("OTP");
|
|
304
|
-
setCountdown(60);
|
|
305
|
-
} else {
|
|
306
|
-
toast.error(res.error || "Authentication failed.");
|
|
307
|
-
}
|
|
308
|
-
} catch {
|
|
309
|
-
toast.error("Service unavailable. Try again later.");
|
|
310
|
-
} finally {
|
|
311
|
-
setIsSubmitting(false);
|
|
312
|
-
}
|
|
313
|
-
};
|
|
314
|
-
const verifyOtpCode = async (codeToVerify) => {
|
|
315
|
-
if (codeToVerify.length !== 6 || isSubmitting) return;
|
|
316
|
-
setIsSubmitting(true);
|
|
317
|
-
try {
|
|
318
|
-
const res = await onVerifyOtp({ email: emailId, code: codeToVerify });
|
|
319
|
-
if (res.success) {
|
|
320
|
-
window.location.href = res.redirect || redirectUrl;
|
|
321
|
-
} else {
|
|
322
|
-
toast.error(res.error || "Invalid code.");
|
|
323
|
-
setOtp(["", "", "", "", "", ""]);
|
|
324
|
-
inputRefs.current[0]?.focus();
|
|
325
|
-
}
|
|
326
|
-
} catch {
|
|
327
|
-
toast.error("Verification failed.");
|
|
328
|
-
} finally {
|
|
329
|
-
setIsSubmitting(false);
|
|
330
|
-
}
|
|
331
|
-
};
|
|
332
|
-
const handleNextSignupStep = () => {
|
|
333
|
-
if (signupStep === "NAME") {
|
|
334
|
-
if (requireOrganization) setSignupStep("ORGANIZATION");
|
|
335
|
-
else setSignupStep("EMAIL_ID");
|
|
336
|
-
} else if (signupStep === "ORGANIZATION") {
|
|
337
|
-
setSignupStep("EMAIL_ID");
|
|
338
|
-
}
|
|
339
|
-
};
|
|
340
|
-
const isContinueDisabled = () => {
|
|
341
|
-
if (isSubmitting) return true;
|
|
342
|
-
if (mode === "LOGIN") return emailId.length < 3;
|
|
343
|
-
if (mode === "SIGNUP") {
|
|
344
|
-
if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
|
|
345
|
-
if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
|
|
346
|
-
if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
|
|
347
|
-
}
|
|
348
|
-
return false;
|
|
349
|
-
};
|
|
350
|
-
return /* @__PURE__ */ React4.createElement("div", { className: "w-full max-w-md mx-auto flex flex-col items-center gap-4 relative z-10 animate-in fade-in duration-300" }, /* @__PURE__ */ React4.createElement("div", { className: "w-full bg-neutral-900 border border-neutral-800 rounded-2xl overflow-hidden shadow-2xl" }, /* @__PURE__ */ React4.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ React4.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React4.createElement("div", { className: "mb-12 text-center mt-2" }, /* @__PURE__ */ React4.createElement("h2", { className: "text-xl text-white mb-2 tracking-tight " }, mode === "LOGIN" ? `${companyName} ${workspaceLabel}` : "Create Account"), /* @__PURE__ */ React4.createElement("div", { className: "text-[13px] text-neutral-400" }, mode === "LOGIN" ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, "Don't have an account? ", /* @__PURE__ */ React4.createElement("button", { type: "button", onClick: () => {
|
|
351
|
-
setMode("SIGNUP");
|
|
352
|
-
setSignupStep(getInitialSignupStep());
|
|
353
|
-
}, className: "text-white hover:text-neutral-300 transition-colors ml-1 " }, "Sign up")) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, "Already have an account? ", /* @__PURE__ */ React4.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-white hover:text-neutral-300 transition-colors ml-1 " }, "Log in")))), /* @__PURE__ */ React4.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
|
|
354
|
-
e.preventDefault();
|
|
355
|
-
if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
356
|
-
else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
|
|
357
|
-
else handleAuthRequestSubmit();
|
|
358
|
-
} }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React4.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React4.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "First Name"), /* @__PURE__ */ React4.createElement(
|
|
359
|
-
"input",
|
|
360
|
-
{
|
|
361
|
-
type: "text",
|
|
362
|
-
value: firstName,
|
|
363
|
-
onChange: (e) => setFirstName(cleanAlpha(e.target.value)),
|
|
364
|
-
required: true,
|
|
365
|
-
autoFocus: true,
|
|
366
|
-
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-800 text-white outline-none focus:border-white transition-all duration-300",
|
|
367
|
-
placeholder: "First name"
|
|
368
|
-
}
|
|
369
|
-
)), /* @__PURE__ */ React4.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React4.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "Last Name"), /* @__PURE__ */ React4.createElement(
|
|
370
|
-
"input",
|
|
371
|
-
{
|
|
372
|
-
type: "text",
|
|
373
|
-
value: lastName,
|
|
374
|
-
onChange: (e) => setLastName(cleanAlpha(e.target.value)),
|
|
375
|
-
required: true,
|
|
376
|
-
className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-800 text-white outline-none focus:border-white transition-all duration-300",
|
|
377
|
-
placeholder: "Last name"
|
|
378
|
-
}
|
|
379
|
-
))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React4.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React4.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "Organization Name"), /* @__PURE__ */ React4.createElement(
|
|
380
|
-
"input",
|
|
381
|
-
{
|
|
382
|
-
type: "text",
|
|
383
|
-
value: orgName,
|
|
384
|
-
onChange: (e) => setOrgName(cleanOrgName(e.target.value)),
|
|
385
|
-
required: true,
|
|
386
|
-
autoFocus: true,
|
|
387
|
-
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-800 text-white outline-none focus:border-white transition-all duration-300",
|
|
388
|
-
placeholder: "Acme Corporation"
|
|
389
|
-
}
|
|
390
|
-
))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ React4.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React4.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React4.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "Retina ID"), /* @__PURE__ */ React4.createElement(
|
|
391
|
-
"input",
|
|
392
|
-
{
|
|
393
|
-
type: "email",
|
|
394
|
-
value: emailId,
|
|
395
|
-
onChange: (e) => setEmailId(cleanEmailId(e.target.value)),
|
|
396
|
-
required: true,
|
|
397
|
-
autoFocus: true,
|
|
398
|
-
className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-800 text-white outline-none focus:border-white transition-all duration-300",
|
|
399
|
-
placeholder: "name@company.com"
|
|
400
|
-
}
|
|
401
|
-
)), mode === "SIGNUP" && /* @__PURE__ */ React4.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React4.createElement(
|
|
402
|
-
"input",
|
|
403
|
-
{
|
|
404
|
-
type: "checkbox",
|
|
405
|
-
id: "zairus-terms",
|
|
406
|
-
checked: agreedToTerms,
|
|
407
|
-
onChange: (e) => setAgreedToTerms(e.target.checked),
|
|
408
|
-
className: "mt-0.5 w-4 h-4 bg-neutral-800 border-neutral-700 rounded text-white focus:ring-white cursor-pointer",
|
|
409
|
-
required: true
|
|
410
|
-
}
|
|
411
|
-
), /* @__PURE__ */ React4.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-400 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React4.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-white hover:text-neutral-300 " }, "Terms of Service"), " and ", /* @__PURE__ */ React4.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-white hover:text-neutral-300 " }, "Privacy Policy"), "."))), /* @__PURE__ */ React4.createElement(
|
|
412
|
-
ThreeDActionButton,
|
|
413
|
-
{
|
|
414
|
-
type: "submit",
|
|
415
|
-
disabled: isContinueDisabled(),
|
|
416
|
-
isLoading: isSubmitting,
|
|
417
|
-
className: "w-full mt-10"
|
|
418
|
-
},
|
|
419
|
-
"Continue"
|
|
420
|
-
))), step === "OTP" && /* @__PURE__ */ React4.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React4.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ React4.createElement("h2", { className: "text-xl text-white mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React4.createElement("p", { className: "text-[13px] text-neutral-400" }, "Enter the code sent to ", /* @__PURE__ */ React4.createElement("br", null), /* @__PURE__ */ React4.createElement("span", { className: "text-white" }, emailId))), /* @__PURE__ */ React4.createElement("form", { className: "space-y-10", autoComplete: "off", onSubmit: (e) => {
|
|
421
|
-
e.preventDefault();
|
|
422
|
-
verifyOtpCode(otp.join(""));
|
|
423
|
-
} }, /* @__PURE__ */ React4.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React4.createElement(
|
|
424
|
-
"input",
|
|
425
|
-
{
|
|
426
|
-
key: index,
|
|
427
|
-
ref: (el) => {
|
|
428
|
-
inputRefs.current[index] = el;
|
|
429
|
-
},
|
|
430
|
-
type: "text",
|
|
431
|
-
inputMode: "numeric",
|
|
432
|
-
maxLength: 1,
|
|
433
|
-
value: digit,
|
|
434
|
-
onChange: (e) => handleOtpChange(index, e.target.value),
|
|
435
|
-
className: "w-8 h-8 text-center text-lg bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
|
|
436
|
-
}
|
|
437
|
-
))), /* @__PURE__ */ React4.createElement(
|
|
438
|
-
ThreeDActionButton,
|
|
439
|
-
{
|
|
440
|
-
type: "submit",
|
|
441
|
-
disabled: otp.join("").length < 6,
|
|
442
|
-
isLoading: isSubmitting,
|
|
443
|
-
className: "w-full"
|
|
444
|
-
},
|
|
445
|
-
"Verify Code"
|
|
446
|
-
))))), /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col items-center gap-1.5 animate-in slide-in-from-bottom-3 duration-500 delay-100 mt-4" }, /* @__PURE__ */ React4.createElement("div", { className: "flex items-center gap-2.5 px-3 py-1.5 bg-neutral-900 border border-neutral-800 rounded-full" }, /* @__PURE__ */ React4.createElement("div", { className: "w-5 h-5 bg-neutral-800 rounded-full flex items-center justify-center shrink-0 overflow-hidden relative" }, /* @__PURE__ */ React4.createElement(
|
|
447
|
-
"img",
|
|
448
|
-
{
|
|
449
|
-
src: "https://retinalabs.company/assets/images/retina.avif",
|
|
450
|
-
alt: "Retina Labs Logo",
|
|
451
|
-
className: "w-full h-full object-cover rounded-full",
|
|
452
|
-
onError: (e) => {
|
|
453
|
-
e.currentTarget.style.display = "none";
|
|
454
|
-
}
|
|
455
|
-
}
|
|
456
|
-
)), /* @__PURE__ */ React4.createElement("span", { className: "text-[11px] text-neutral-300 tracking-tight pr-1" }, "Retina Labs Company")), /* @__PURE__ */ React4.createElement("span", { className: "text-[8px] text-neutral-500 tracking-[0.25em]" }, "RC - 9235780")));
|
|
457
|
-
}
|
|
458
|
-
var ZairusAuth = (props) => {
|
|
459
|
-
if (props.useRecaptcha && props.recaptchaSiteKey) {
|
|
460
|
-
return /* @__PURE__ */ React4.createElement(GoogleReCaptchaProvider, { reCaptchaKey: props.recaptchaSiteKey }, /* @__PURE__ */ React4.createElement(Suspense, { fallback: /* @__PURE__ */ React4.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ React4.createElement(InputSpinner, null)) }, /* @__PURE__ */ React4.createElement(AuthFormInner, { ...props })));
|
|
461
|
-
}
|
|
462
|
-
return /* @__PURE__ */ React4.createElement(Suspense, { fallback: /* @__PURE__ */ React4.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ React4.createElement(InputSpinner, null)) }, /* @__PURE__ */ React4.createElement(AuthFormInner, { ...props }));
|
|
463
|
-
};
|
|
464
|
-
|
|
465
|
-
// src/components/PipleAuth.tsx
|
|
466
|
-
import React5, { useState as useState3, useRef as useRef3, useEffect as useEffect3, Suspense as Suspense2 } from "react";
|
|
467
|
-
import { useSearchParams as useSearchParams2 } from "next/navigation";
|
|
468
|
-
import toast2 from "react-hot-toast";
|
|
469
|
-
import { useGoogleReCaptcha as useGoogleReCaptcha2, GoogleReCaptchaProvider as GoogleReCaptchaProvider2 } from "react-google-recaptcha-v3";
|
|
470
|
-
var InputSpinner2 = () => /* @__PURE__ */ React5.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React5.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React5.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
471
|
-
function AuthFormInner2({
|
|
472
|
-
companyName,
|
|
473
|
-
workspaceLabel = "Workspace",
|
|
474
|
-
termsUrl = "https://aeona.finance/terms-of-service",
|
|
475
|
-
privacyUrl = "https://aeona.finance/privacy-policy",
|
|
476
|
-
requireNames = true,
|
|
477
|
-
requireOrganization = true,
|
|
478
|
-
useRecaptcha = false,
|
|
479
|
-
defaultRedirectPath = "/app",
|
|
480
|
-
onAuthRequest,
|
|
481
|
-
onVerifyOtp
|
|
482
|
-
}) {
|
|
483
|
-
const searchParams = useSearchParams2();
|
|
484
|
-
const redirectUrl = searchParams.get("redirect") || defaultRedirectPath;
|
|
485
|
-
const captchaContext = useRecaptcha ? useGoogleReCaptcha2() : null;
|
|
486
|
-
const [mode, setMode] = useState3("LOGIN");
|
|
487
|
-
const [step, setStep] = useState3("INPUT");
|
|
488
|
-
const getInitialSignupStep = () => {
|
|
489
|
-
if (requireNames) return "NAME";
|
|
490
|
-
if (requireOrganization) return "ORGANIZATION";
|
|
491
|
-
return "EMAIL_ID";
|
|
492
|
-
};
|
|
493
|
-
const [signupStep, setSignupStep] = useState3(getInitialSignupStep());
|
|
494
|
-
const [isSubmitting, setIsSubmitting] = useState3(false);
|
|
495
|
-
const [countdown, setCountdown] = useState3(0);
|
|
496
|
-
const [emailId, setEmailId] = useState3("");
|
|
497
|
-
const [firstName, setFirstName] = useState3("");
|
|
498
|
-
const [lastName, setLastName] = useState3("");
|
|
499
|
-
const [orgName, setOrgName] = useState3("");
|
|
500
|
-
const [agreedToTerms, setAgreedToTerms] = useState3(false);
|
|
501
|
-
const [otp, setOtp] = useState3(["", "", "", "", "", ""]);
|
|
502
|
-
const inputRefs = useRef3([]);
|
|
503
|
-
const cleanAlpha = (val) => val.replace(/[^a-zA-Z\s-]/g, "");
|
|
504
|
-
const cleanOrgName = (val) => val.replace(/[^a-zA-Z0-9\s]/g, "").substring(0, 50);
|
|
505
|
-
const cleanEmailId = (val) => val.toLowerCase().replace(/[^a-z0-9@._-]/g, "");
|
|
506
|
-
useEffect3(() => {
|
|
507
|
-
if (countdown > 0) {
|
|
508
|
-
const timer = setTimeout(() => setCountdown(countdown - 1), 1e3);
|
|
509
|
-
return () => clearTimeout(timer);
|
|
510
|
-
}
|
|
511
|
-
}, [countdown]);
|
|
512
|
-
const handleOtpChange = (index, value) => {
|
|
513
|
-
const cleanValue = value.replace(/[^0-9]/g, "");
|
|
514
|
-
if (!cleanValue && value !== "") return;
|
|
515
|
-
const newOtp = [...otp];
|
|
516
|
-
newOtp[index] = cleanValue.slice(-1);
|
|
517
|
-
setOtp(newOtp);
|
|
518
|
-
if (cleanValue && index < 5) {
|
|
519
|
-
inputRefs.current[index + 1]?.focus();
|
|
520
|
-
}
|
|
521
|
-
};
|
|
522
|
-
const handlePaste = (e) => {
|
|
523
|
-
e.preventDefault();
|
|
524
|
-
const pastedData = e.clipboardData.getData("text/plain");
|
|
525
|
-
const numbersOnly = pastedData.replace(/[^0-9]/g, "");
|
|
526
|
-
if (!numbersOnly) return;
|
|
527
|
-
const newOtp = [...otp];
|
|
528
|
-
const length = Math.min(numbersOnly.length, 6);
|
|
529
|
-
for (let i = 0; i < length; i++) {
|
|
530
|
-
newOtp[i] = numbersOnly[i];
|
|
531
|
-
}
|
|
532
|
-
setOtp(newOtp);
|
|
533
|
-
if (length < 6) {
|
|
534
|
-
inputRefs.current[length]?.focus();
|
|
535
|
-
} else {
|
|
536
|
-
inputRefs.current[5]?.focus();
|
|
537
|
-
verifyOtpCode(newOtp.join(""));
|
|
538
|
-
}
|
|
539
|
-
};
|
|
540
|
-
const handleAuthRequestSubmit = async (e) => {
|
|
541
|
-
if (e) e.preventDefault();
|
|
542
|
-
if (mode === "SIGNUP" && !agreedToTerms) {
|
|
543
|
-
toast2.error("You must agree to the Terms and Privacy Policy.");
|
|
544
|
-
return;
|
|
545
|
-
}
|
|
546
|
-
if (isSubmitting || countdown > 0) return;
|
|
547
|
-
setIsSubmitting(true);
|
|
548
|
-
try {
|
|
549
|
-
let recaptchaToken = void 0;
|
|
550
|
-
if (useRecaptcha && captchaContext?.executeRecaptcha) {
|
|
551
|
-
recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
|
|
552
|
-
}
|
|
553
|
-
const res = await onAuthRequest({
|
|
554
|
-
email: emailId,
|
|
555
|
-
firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
|
|
556
|
-
lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
|
|
557
|
-
organizationName: mode === "SIGNUP" && requireOrganization ? orgName : void 0,
|
|
558
|
-
mode,
|
|
559
|
-
recaptchaToken
|
|
560
|
-
});
|
|
561
|
-
if (res.success) {
|
|
562
|
-
toast2.success("Verification code sent");
|
|
563
|
-
setStep("OTP");
|
|
564
|
-
setCountdown(60);
|
|
565
|
-
} else {
|
|
566
|
-
toast2.error(res.error || "Authentication failed.");
|
|
567
|
-
}
|
|
568
|
-
} catch {
|
|
569
|
-
toast2.error("Service unavailable. Try again later.");
|
|
570
|
-
} finally {
|
|
571
|
-
setIsSubmitting(false);
|
|
572
|
-
}
|
|
573
|
-
};
|
|
574
|
-
const verifyOtpCode = async (codeToVerify) => {
|
|
575
|
-
if (codeToVerify.length !== 6 || isSubmitting) return;
|
|
576
|
-
setIsSubmitting(true);
|
|
577
|
-
try {
|
|
578
|
-
const res = await onVerifyOtp({ email: emailId, code: codeToVerify });
|
|
579
|
-
if (res.success) {
|
|
580
|
-
window.location.href = res.redirect || redirectUrl;
|
|
581
|
-
} else {
|
|
582
|
-
toast2.error(res.error || "Invalid code.");
|
|
583
|
-
setOtp(["", "", "", "", "", ""]);
|
|
584
|
-
inputRefs.current[0]?.focus();
|
|
585
|
-
}
|
|
586
|
-
} catch {
|
|
587
|
-
toast2.error("Verification failed.");
|
|
588
|
-
} finally {
|
|
589
|
-
setIsSubmitting(false);
|
|
590
|
-
}
|
|
591
|
-
};
|
|
592
|
-
const handleNextSignupStep = () => {
|
|
593
|
-
if (signupStep === "NAME") {
|
|
594
|
-
if (requireOrganization) setSignupStep("ORGANIZATION");
|
|
595
|
-
else setSignupStep("EMAIL_ID");
|
|
596
|
-
} else if (signupStep === "ORGANIZATION") {
|
|
597
|
-
setSignupStep("EMAIL_ID");
|
|
598
|
-
}
|
|
599
|
-
};
|
|
600
|
-
const isContinueDisabled = () => {
|
|
601
|
-
if (isSubmitting) return true;
|
|
602
|
-
if (mode === "LOGIN") return emailId.length < 3;
|
|
603
|
-
if (mode === "SIGNUP") {
|
|
604
|
-
if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
|
|
605
|
-
if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
|
|
606
|
-
if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
|
|
607
|
-
}
|
|
608
|
-
return false;
|
|
609
|
-
};
|
|
610
|
-
return /* @__PURE__ */ React5.createElement("div", { className: "w-full max-w-md mx-auto flex flex-col items-center gap-4 relative z-10 animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "w-full bg-neutral-900 rounded-2xl overflow-hidden shadow-2xl" }, /* @__PURE__ */ React5.createElement("div", { className: "p-8 md:p-12" }, step === "INPUT" && /* @__PURE__ */ React5.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "mb-12 text-center mt-2" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl text-white mb-2 tracking-tight " }, mode === "LOGIN" ? `${companyName} ${workspaceLabel}` : "Create Account"), /* @__PURE__ */ React5.createElement("div", { className: "text-[13px] text-neutral-400" }, mode === "LOGIN" ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, "Don't have an account? ", /* @__PURE__ */ React5.createElement("button", { type: "button", onClick: () => {
|
|
611
|
-
setMode("SIGNUP");
|
|
612
|
-
setSignupStep(getInitialSignupStep());
|
|
613
|
-
}, className: "text-white hover:text-neutral-300 transition-colors ml-1 " }, "Sign up")) : /* @__PURE__ */ React5.createElement(React5.Fragment, null, "Already have an account? ", /* @__PURE__ */ React5.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-white hover:text-neutral-300 transition-colors ml-1 " }, "Log in")))), /* @__PURE__ */ React5.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
|
|
614
|
-
e.preventDefault();
|
|
615
|
-
if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
616
|
-
else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
|
|
617
|
-
else handleAuthRequestSubmit();
|
|
618
|
-
} }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "First Name"), /* @__PURE__ */ React5.createElement(
|
|
619
|
-
"input",
|
|
620
|
-
{
|
|
621
|
-
type: "text",
|
|
622
|
-
value: firstName,
|
|
623
|
-
onChange: (e) => setFirstName(cleanAlpha(e.target.value)),
|
|
624
|
-
required: true,
|
|
625
|
-
autoFocus: true,
|
|
626
|
-
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-800 text-white outline-none focus:border-white transition-all duration-300",
|
|
627
|
-
placeholder: "First name"
|
|
628
|
-
}
|
|
629
|
-
)), /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "Last Name"), /* @__PURE__ */ React5.createElement(
|
|
630
|
-
"input",
|
|
631
|
-
{
|
|
632
|
-
type: "text",
|
|
633
|
-
value: lastName,
|
|
634
|
-
onChange: (e) => setLastName(cleanAlpha(e.target.value)),
|
|
635
|
-
required: true,
|
|
636
|
-
className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-800 text-white outline-none focus:border-white transition-all duration-300",
|
|
637
|
-
placeholder: "Last name"
|
|
638
|
-
}
|
|
639
|
-
))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "Organization Name"), /* @__PURE__ */ React5.createElement(
|
|
640
|
-
"input",
|
|
641
|
-
{
|
|
642
|
-
type: "text",
|
|
643
|
-
value: orgName,
|
|
644
|
-
onChange: (e) => setOrgName(cleanOrgName(e.target.value)),
|
|
645
|
-
required: true,
|
|
646
|
-
autoFocus: true,
|
|
647
|
-
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-800 text-white outline-none focus:border-white transition-all duration-300",
|
|
648
|
-
placeholder: "Acme Corporation"
|
|
649
|
-
}
|
|
650
|
-
))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ React5.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "Email ID"), /* @__PURE__ */ React5.createElement(
|
|
651
|
-
"input",
|
|
652
|
-
{
|
|
653
|
-
type: "email",
|
|
654
|
-
value: emailId,
|
|
655
|
-
onChange: (e) => setEmailId(cleanEmailId(e.target.value)),
|
|
656
|
-
required: true,
|
|
657
|
-
autoFocus: true,
|
|
658
|
-
className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-800 text-white outline-none focus:border-white transition-all duration-300",
|
|
659
|
-
placeholder: "name@company.com"
|
|
660
|
-
}
|
|
661
|
-
)), mode === "SIGNUP" && /* @__PURE__ */ React5.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React5.createElement(
|
|
662
|
-
"input",
|
|
663
|
-
{
|
|
664
|
-
type: "checkbox",
|
|
665
|
-
id: "zairus-terms",
|
|
666
|
-
checked: agreedToTerms,
|
|
667
|
-
onChange: (e) => setAgreedToTerms(e.target.checked),
|
|
668
|
-
className: "mt-0.5 w-4 h-4 bg-neutral-800 border-neutral-700 rounded text-white focus:ring-white cursor-pointer",
|
|
669
|
-
required: true
|
|
670
|
-
}
|
|
671
|
-
), /* @__PURE__ */ React5.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-400 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React5.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-white hover:text-neutral-300 " }, "Terms of Service"), " and ", /* @__PURE__ */ React5.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-white hover:text-neutral-300 " }, "Privacy Policy"), "."))), /* @__PURE__ */ React5.createElement(
|
|
672
|
-
ThreeDActionButton,
|
|
673
|
-
{
|
|
674
|
-
type: "submit",
|
|
675
|
-
disabled: isContinueDisabled(),
|
|
676
|
-
isLoading: isSubmitting,
|
|
677
|
-
className: "w-full mt-10"
|
|
678
|
-
},
|
|
679
|
-
"Continue"
|
|
680
|
-
))), step === "OTP" && /* @__PURE__ */ React5.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl text-white mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] text-neutral-400" }, "Enter the code sent to ", /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement("span", { className: "text-white" }, emailId))), /* @__PURE__ */ React5.createElement("form", { className: "space-y-10", autoComplete: "off", onSubmit: (e) => {
|
|
681
|
-
e.preventDefault();
|
|
682
|
-
verifyOtpCode(otp.join(""));
|
|
683
|
-
} }, /* @__PURE__ */ React5.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React5.createElement(
|
|
684
|
-
"input",
|
|
685
|
-
{
|
|
686
|
-
key: index,
|
|
687
|
-
ref: (el) => {
|
|
688
|
-
inputRefs.current[index] = el;
|
|
689
|
-
},
|
|
690
|
-
type: "text",
|
|
691
|
-
inputMode: "numeric",
|
|
692
|
-
maxLength: 1,
|
|
693
|
-
value: digit,
|
|
694
|
-
onChange: (e) => handleOtpChange(index, e.target.value),
|
|
695
|
-
className: "w-8 h-8 text-center text-lg bg-transparent border-b-2 border-neutral-800 text-white outline-none focus:border-white transition-all duration-300"
|
|
696
|
-
}
|
|
697
|
-
))), /* @__PURE__ */ React5.createElement(
|
|
698
|
-
ThreeDActionButton,
|
|
699
|
-
{
|
|
700
|
-
type: "submit",
|
|
701
|
-
disabled: otp.join("").length < 6,
|
|
702
|
-
isLoading: isSubmitting,
|
|
703
|
-
className: "w-full"
|
|
704
|
-
},
|
|
705
|
-
"Verify Code"
|
|
706
|
-
))))));
|
|
707
|
-
}
|
|
708
|
-
var PipleAuth = (props) => {
|
|
709
|
-
if (props.useRecaptcha && props.recaptchaSiteKey) {
|
|
710
|
-
return /* @__PURE__ */ React5.createElement(GoogleReCaptchaProvider2, { reCaptchaKey: props.recaptchaSiteKey }, /* @__PURE__ */ React5.createElement(Suspense2, { fallback: /* @__PURE__ */ React5.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner2, null)) }, /* @__PURE__ */ React5.createElement(AuthFormInner2, { ...props })));
|
|
711
|
-
}
|
|
712
|
-
return /* @__PURE__ */ React5.createElement(Suspense2, { fallback: /* @__PURE__ */ React5.createElement("div", { className: "h-64 flex items-center justify-center" }, /* @__PURE__ */ React5.createElement(InputSpinner2, null)) }, /* @__PURE__ */ React5.createElement(AuthFormInner2, { ...props }));
|
|
713
|
-
};
|
|
714
|
-
|
|
715
226
|
// src/components/Header.tsx
|
|
716
|
-
import
|
|
227
|
+
import React4, { useState as useState2, useEffect as useEffect2, useRef as useRef2 } from "react";
|
|
717
228
|
import Link2 from "next/link";
|
|
718
229
|
import Image from "next/image";
|
|
719
230
|
import { usePathname } from "next/navigation";
|
|
720
231
|
var NavLink = ({
|
|
721
232
|
href,
|
|
722
233
|
children,
|
|
723
|
-
className = ""
|
|
234
|
+
className = "",
|
|
235
|
+
isDarkTheme
|
|
724
236
|
}) => {
|
|
725
237
|
const pathname = usePathname();
|
|
726
238
|
const isActive = pathname === href;
|
|
727
|
-
const activeClass = "text-white";
|
|
728
|
-
const inactiveClass = "text-neutral-400 hover:text-white";
|
|
729
|
-
return /* @__PURE__ */
|
|
239
|
+
const activeClass = isDarkTheme ? "text-white" : "text-neutral-900 font-medium";
|
|
240
|
+
const inactiveClass = isDarkTheme ? "text-neutral-400 hover:text-white" : "text-neutral-500 hover:text-neutral-900";
|
|
241
|
+
return /* @__PURE__ */ React4.createElement(
|
|
730
242
|
Link2,
|
|
731
243
|
{
|
|
732
244
|
href,
|
|
@@ -745,31 +257,75 @@ var Header = ({
|
|
|
745
257
|
hideHeaderText = false,
|
|
746
258
|
compact = false
|
|
747
259
|
}) => {
|
|
260
|
+
const headerRef = useRef2(null);
|
|
261
|
+
const [isDarkTheme, setIsDarkTheme] = useState2(true);
|
|
262
|
+
useEffect2(() => {
|
|
263
|
+
const checkBackgroundLuminance = () => {
|
|
264
|
+
if (!headerRef.current) return;
|
|
265
|
+
const rect = headerRef.current.getBoundingClientRect();
|
|
266
|
+
const x = rect.left + rect.width / 2;
|
|
267
|
+
const y = rect.top + rect.height / 2;
|
|
268
|
+
const elementsAtPoint = document.elementsFromPoint(x, y);
|
|
269
|
+
let foundDarkBackground = true;
|
|
270
|
+
for (const el of elementsAtPoint) {
|
|
271
|
+
if (headerRef.current.contains(el)) continue;
|
|
272
|
+
const style = window.getComputedStyle(el);
|
|
273
|
+
const bg = style.backgroundColor;
|
|
274
|
+
if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
|
|
275
|
+
const rgbMatch = bg.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
|
|
276
|
+
if (rgbMatch) {
|
|
277
|
+
const r = parseInt(rgbMatch[1], 10);
|
|
278
|
+
const g = parseInt(rgbMatch[2], 10);
|
|
279
|
+
const b = parseInt(rgbMatch[3], 10);
|
|
280
|
+
const brightness = Math.round((r * 299 + g * 587 + b * 114) / 1e3);
|
|
281
|
+
foundDarkBackground = brightness < 128;
|
|
282
|
+
break;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}
|
|
286
|
+
setIsDarkTheme(foundDarkBackground);
|
|
287
|
+
};
|
|
288
|
+
checkBackgroundLuminance();
|
|
289
|
+
window.addEventListener("scroll", checkBackgroundLuminance, { passive: true });
|
|
290
|
+
window.addEventListener("resize", checkBackgroundLuminance, { passive: true });
|
|
291
|
+
return () => {
|
|
292
|
+
window.removeEventListener("scroll", checkBackgroundLuminance);
|
|
293
|
+
window.removeEventListener("resize", checkBackgroundLuminance);
|
|
294
|
+
};
|
|
295
|
+
}, []);
|
|
748
296
|
const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
|
|
749
297
|
const hasBrandSection = showLogo || !hideHeaderText;
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
},
|
|
767
|
-
|
|
768
|
-
|
|
298
|
+
const headerBgClass = isDarkTheme ? "bg-black/40" : "bg-white/40";
|
|
299
|
+
const brandTitleClass = isDarkTheme ? "text-white" : "text-neutral-900";
|
|
300
|
+
const brandSubtitleClass = isDarkTheme ? "text-neutral-400" : "text-neutral-600";
|
|
301
|
+
const shouldInvertLogo = isDarkTheme ? invert : !invert;
|
|
302
|
+
return (
|
|
303
|
+
// Upgraded to 'fixed' so the smart scroll detection actually follows the user down the page
|
|
304
|
+
/* @__PURE__ */ React4.createElement("div", { className: "fixed 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", ref: headerRef }, /* @__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(
|
|
305
|
+
Image,
|
|
306
|
+
{
|
|
307
|
+
src: logoSrc,
|
|
308
|
+
alt: `${companyName} Logo`,
|
|
309
|
+
width: 40,
|
|
310
|
+
height: 40,
|
|
311
|
+
className: `object-contain w-8 h-auto transition-all duration-300 ${shouldInvertLogo ? "invert" : ""}`,
|
|
312
|
+
priority: true
|
|
313
|
+
}
|
|
314
|
+
), !hideHeaderText && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col justify-center transition-colors duration-300" }, /* @__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(
|
|
315
|
+
NavLink,
|
|
316
|
+
{
|
|
317
|
+
key: index,
|
|
318
|
+
href: link.href,
|
|
319
|
+
isDarkTheme,
|
|
320
|
+
className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
|
|
321
|
+
},
|
|
322
|
+
link.label
|
|
323
|
+
))))))
|
|
324
|
+
);
|
|
769
325
|
};
|
|
770
326
|
|
|
771
327
|
// src/components/Footer.tsx
|
|
772
|
-
import
|
|
328
|
+
import React5, { useState as useState3 } from "react";
|
|
773
329
|
import Link3 from "next/link";
|
|
774
330
|
import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react";
|
|
775
331
|
var Footer = ({
|
|
@@ -779,46 +335,46 @@ var Footer = ({
|
|
|
779
335
|
copyrightText,
|
|
780
336
|
topSection
|
|
781
337
|
}) => {
|
|
782
|
-
const [openCol, setOpenCol] =
|
|
338
|
+
const [openCol, setOpenCol] = useState3(null);
|
|
783
339
|
const toggleColumn = (idx) => {
|
|
784
340
|
setOpenCol(openCol === idx ? null : idx);
|
|
785
341
|
};
|
|
786
|
-
return /* @__PURE__ */
|
|
342
|
+
return /* @__PURE__ */ React5.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ React5.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ React5.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ React5.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16 mb-12 text-left" }, /* @__PURE__ */ React5.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-4 mb-4" }, /* @__PURE__ */ React5.createElement("img", { src: "https://retinalabs.company/assets/images/ndpr.avif", alt: "NDPR", className: "w-28 h-auto object-contain filter grayscale opacity-80" }), /* @__PURE__ */ React5.createElement("img", { src: "https://retinalabs.company/assets/images/gdpr.avif", alt: "GDPR", className: "w-12 h-12 object-contain filter grayscale opacity-80" })), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("p", { className: "text-[11px] text-neutral-600 leading-relaxed pr-4" }, description))), /* @__PURE__ */ React5.createElement("div", { className: "w-full lg:flex-1 lg:max-w-2xl" }, /* @__PURE__ */ React5.createElement("div", { className: "hidden md:grid grid-cols-2 gap-x-16 lg:gap-x-24 gap-y-12" }, columns.map((col, idx) => /* @__PURE__ */ React5.createElement("div", { key: idx, className: "flex flex-col" }, /* @__PURE__ */ React5.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 " }, col.title), /* @__PURE__ */ React5.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500" }, col.links.map((link, lIdx) => /* @__PURE__ */ React5.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ React5.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors block truncate" }, link.label) : /* @__PURE__ */ React5.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors block truncate" }, link.label))))))), /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col md:hidden w-full border-t border-neutral-100 mt-4" }, columns.map((col, idx) => {
|
|
787
343
|
const isOpen = openCol === idx;
|
|
788
|
-
return /* @__PURE__ */
|
|
344
|
+
return /* @__PURE__ */ React5.createElement("div", { key: idx, className: "border-b border-neutral-100" }, /* @__PURE__ */ React5.createElement(
|
|
789
345
|
"button",
|
|
790
346
|
{
|
|
791
347
|
onClick: () => toggleColumn(idx),
|
|
792
348
|
className: "w-full flex items-center justify-between py-5 text-left outline-none"
|
|
793
349
|
},
|
|
794
|
-
/* @__PURE__ */
|
|
795
|
-
/* @__PURE__ */
|
|
350
|
+
/* @__PURE__ */ React5.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black " }, col.title),
|
|
351
|
+
/* @__PURE__ */ React5.createElement(
|
|
796
352
|
"svg",
|
|
797
353
|
{
|
|
798
|
-
className: `w-4 h-4 text-neutral-
|
|
354
|
+
className: `w-4 h-4 text-neutral-400 transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`,
|
|
799
355
|
fill: "none",
|
|
800
356
|
viewBox: "0 0 24 24",
|
|
801
357
|
stroke: "currentColor"
|
|
802
358
|
},
|
|
803
|
-
/* @__PURE__ */
|
|
359
|
+
/* @__PURE__ */ React5.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
|
|
804
360
|
)
|
|
805
|
-
), /* @__PURE__ */
|
|
806
|
-
})))), /* @__PURE__ */
|
|
361
|
+
), /* @__PURE__ */ React5.createElement("div", { className: `grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] pb-6 opacity-100" : "grid-rows-[0fr] opacity-0"}` }, /* @__PURE__ */ React5.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React5.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500 pt-2" }, col.links.map((link, lIdx) => /* @__PURE__ */ React5.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ React5.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors" }, link.label) : /* @__PURE__ */ React5.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))));
|
|
362
|
+
})))), /* @__PURE__ */ React5.createElement("div", { className: "pt-8 mt-4 flex flex-col-reverse md:flex-row justify-between items-start md:items-center gap-6 relative z-20" }, /* @__PURE__ */ React5.createElement("p", { className: "text-[11px] text-neutral-400 tracking-widest text-left" }, copyrightText), socialLinks && socialLinks.length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-6" }, socialLinks.map((social, idx) => /* @__PURE__ */ React5.createElement(
|
|
807
363
|
"a",
|
|
808
364
|
{
|
|
809
365
|
key: idx,
|
|
810
366
|
href: social.href,
|
|
811
367
|
target: "_blank",
|
|
812
368
|
rel: "noopener noreferrer",
|
|
813
|
-
className: "text-neutral-
|
|
369
|
+
className: "text-neutral-400 hover:text-black transition-colors",
|
|
814
370
|
"aria-label": social.name
|
|
815
371
|
},
|
|
816
|
-
/* @__PURE__ */
|
|
372
|
+
/* @__PURE__ */ React5.createElement(HugeiconsIcon2, { icon: social.icon, size: 20 })
|
|
817
373
|
))))))));
|
|
818
374
|
};
|
|
819
375
|
|
|
820
376
|
// src/components/HeroSection.tsx
|
|
821
|
-
import
|
|
377
|
+
import React6, { useState as useState4, useEffect as useEffect3, useRef as useRef3 } from "react";
|
|
822
378
|
import Link4 from "next/link";
|
|
823
379
|
import Image2 from "next/image";
|
|
824
380
|
var HeroSection = ({
|
|
@@ -839,9 +395,9 @@ var HeroSection = ({
|
|
|
839
395
|
bgVideoSrc,
|
|
840
396
|
bgImageSrc
|
|
841
397
|
}) => {
|
|
842
|
-
const [isAnimating, setIsAnimating] =
|
|
843
|
-
const titleRef =
|
|
844
|
-
|
|
398
|
+
const [isAnimating, setIsAnimating] = useState4(false);
|
|
399
|
+
const titleRef = useRef3(null);
|
|
400
|
+
useEffect3(() => {
|
|
845
401
|
const observer = new IntersectionObserver(
|
|
846
402
|
([entry]) => {
|
|
847
403
|
if (entry.isIntersecting) {
|
|
@@ -859,7 +415,7 @@ var HeroSection = ({
|
|
|
859
415
|
}
|
|
860
416
|
return () => observer.disconnect();
|
|
861
417
|
}, []);
|
|
862
|
-
return /* @__PURE__ */
|
|
418
|
+
return /* @__PURE__ */ React6.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-neutral-100" }, /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 w-full h-full z-0 overflow-hidden" }, bgVideoSrc ? /* @__PURE__ */ React6.createElement(
|
|
863
419
|
"video",
|
|
864
420
|
{
|
|
865
421
|
src: bgVideoSrc,
|
|
@@ -868,62 +424,62 @@ var HeroSection = ({
|
|
|
868
424
|
loop: true,
|
|
869
425
|
muted: true,
|
|
870
426
|
playsInline: true,
|
|
871
|
-
className: "absolute inset-0 w-full h-full object-cover z-0"
|
|
427
|
+
className: "absolute inset-0 w-full h-full object-cover z-0 opacity-80"
|
|
872
428
|
}
|
|
873
|
-
) : bgImageSrc ? /* @__PURE__ */
|
|
429
|
+
) : bgImageSrc ? /* @__PURE__ */ React6.createElement(
|
|
874
430
|
Image2,
|
|
875
431
|
{
|
|
876
432
|
src: bgImageSrc,
|
|
877
433
|
alt: "Hero Background",
|
|
878
434
|
fill: true,
|
|
879
435
|
priority: true,
|
|
880
|
-
className: "object-cover z-0"
|
|
436
|
+
className: "object-cover z-0 opacity-80"
|
|
881
437
|
}
|
|
882
|
-
) : null, /* @__PURE__ */
|
|
438
|
+
) : null, /* @__PURE__ */ React6.createElement(
|
|
883
439
|
"div",
|
|
884
440
|
{
|
|
885
441
|
className: "absolute inset-0 z-10 opacity-30 mix-blend-overlay pointer-events-none",
|
|
886
442
|
style: {
|
|
887
|
-
backgroundImage: `linear-gradient(110deg, rgba(255,255,255,0.
|
|
443
|
+
backgroundImage: `linear-gradient(110deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 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+PGZlRnVuY0IgdHlwZT0nbGluZWFyJyBzbG9wZT0nMC40JyBpbnRlcmNlcHQ9JzAuMycvPjxmZUZ1bmNBIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAuMTUnIGludGVyY2VwdD0nMCcvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPScjZDFkNWRiJy8+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2JydXNoZWQpJyBvcGFjaXR5PScwLjgnLz48L3N2Zz4=")`,
|
|
888
444
|
backgroundSize: "cover",
|
|
889
445
|
backgroundPosition: "center"
|
|
890
446
|
}
|
|
891
447
|
}
|
|
892
|
-
), /* @__PURE__ */
|
|
448
|
+
), /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-10" }), /* @__PURE__ */ React6.createElement(
|
|
893
449
|
"div",
|
|
894
450
|
{
|
|
895
451
|
className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-10",
|
|
896
452
|
style: {
|
|
897
|
-
backgroundImage: "radial-gradient(circle at center, rgba(
|
|
453
|
+
backgroundImage: "radial-gradient(circle at center, rgba(0,0,0,0.15) 1px, transparent 1px)",
|
|
898
454
|
backgroundSize: "32px 32px"
|
|
899
455
|
}
|
|
900
456
|
}
|
|
901
|
-
), /* @__PURE__ */
|
|
457
|
+
), /* @__PURE__ */ React6.createElement(
|
|
902
458
|
"div",
|
|
903
459
|
{
|
|
904
|
-
className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-[0.
|
|
460
|
+
className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-[0.05] mix-blend-overlay",
|
|
905
461
|
style: {
|
|
906
462
|
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")`
|
|
907
463
|
}
|
|
908
464
|
}
|
|
909
|
-
), /* @__PURE__ */
|
|
465
|
+
), /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-neutral-100 to-transparent z-10 pointer-events-none" })), /* @__PURE__ */ React6.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__ */ React6.createElement(
|
|
910
466
|
"h1",
|
|
911
467
|
{
|
|
912
468
|
ref: titleRef,
|
|
913
|
-
className: `text-4xl sm:text-5xl lg:text-7xl font-light mb-6 text-white tracking-tight leading-[1.05] max-w-4xl
|
|
469
|
+
className: `text-4xl sm:text-5xl lg:text-7xl font-light mb-6 text-white tracking-tight leading-[1.05] max-w-4xl`,
|
|
914
470
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
915
471
|
},
|
|
916
472
|
titlePrefix,
|
|
917
473
|
" ",
|
|
918
|
-
/* @__PURE__ */
|
|
919
|
-
), subtitle && /* @__PURE__ */
|
|
474
|
+
/* @__PURE__ */ React6.createElement("span", { className: "font-medium gradient-text" }, highlightText)
|
|
475
|
+
), subtitle && /* @__PURE__ */ React6.createElement("p", { className: "text-[14px] md:text-[16px] text-neutral-600 max-w-xl mx-auto mb-10 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ React6.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 && /* @__PURE__ */ React6.createElement("div", { className: "w-full sm:w-60 flex justify-center *:w-full" }, /* @__PURE__ */ React6.createElement(ThreeDButton, { href: ctaHref }, ctaText)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React6.createElement(
|
|
920
476
|
Link4,
|
|
921
477
|
{
|
|
922
478
|
href: secondaryCtaHref,
|
|
923
|
-
className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3
|
|
479
|
+
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-black/60 backdrop-blur-md text-center text-white text-xs hover:bg-black/80 outline-none transition-all"
|
|
924
480
|
},
|
|
925
481
|
secondaryCtaText
|
|
926
|
-
)), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */
|
|
482
|
+
)), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ React6.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-500 mb-5 " }, appsText), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-90" }, appLogos.map((logo, idx) => /* @__PURE__ */ React6.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default" }, /* @__PURE__ */ React6.createElement(
|
|
927
483
|
Image2,
|
|
928
484
|
{
|
|
929
485
|
src: logo.src,
|
|
@@ -936,12 +492,12 @@ var HeroSection = ({
|
|
|
936
492
|
};
|
|
937
493
|
|
|
938
494
|
// src/components/AppBento2.tsx
|
|
939
|
-
import
|
|
495
|
+
import React7, { useState as useState5, useEffect as useEffect4, useRef as useRef4 } from "react";
|
|
940
496
|
import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
|
|
941
497
|
var AppBento2 = ({ tagline, headline, features }) => {
|
|
942
|
-
const [isAnimating, setIsAnimating] =
|
|
943
|
-
const titleRef =
|
|
944
|
-
|
|
498
|
+
const [isAnimating, setIsAnimating] = useState5(false);
|
|
499
|
+
const titleRef = useRef4(null);
|
|
500
|
+
useEffect4(() => {
|
|
945
501
|
const observer = new IntersectionObserver(
|
|
946
502
|
([entry]) => {
|
|
947
503
|
if (entry.isIntersecting) {
|
|
@@ -959,66 +515,66 @@ var AppBento2 = ({ tagline, headline, features }) => {
|
|
|
959
515
|
}
|
|
960
516
|
return () => observer.disconnect();
|
|
961
517
|
}, []);
|
|
962
|
-
return /* @__PURE__ */
|
|
518
|
+
return /* @__PURE__ */ React7.createElement("div", { className: "w-full py-16" }, /* @__PURE__ */ React7.createElement("div", { className: "w-full flex justify-center px-4" }, /* @__PURE__ */ React7.createElement("div", { className: "max-w-6xl w-full" }, /* @__PURE__ */ React7.createElement("div", { className: "relative overflow-hidden mb-12 text-left" }, /* @__PURE__ */ React7.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React7.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 block mb-4 " }, tagline), /* @__PURE__ */ React7.createElement(
|
|
963
519
|
"h2",
|
|
964
520
|
{
|
|
965
521
|
ref: titleRef,
|
|
966
|
-
className: `text-3xl
|
|
522
|
+
className: ` text-3xl tracking-tight text-black leading-[1.1] ${isAnimating ? "" : ""}`,
|
|
967
523
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
968
524
|
},
|
|
969
525
|
headline
|
|
970
|
-
))), /* @__PURE__ */
|
|
971
|
-
const
|
|
972
|
-
const
|
|
973
|
-
const
|
|
526
|
+
))), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
|
|
527
|
+
const isWhite = i === 0;
|
|
528
|
+
const isBlack = i === 1;
|
|
529
|
+
const isNeutral = i === 2;
|
|
974
530
|
const getBgStyle = () => {
|
|
975
|
-
if (
|
|
976
|
-
if (
|
|
977
|
-
if (
|
|
978
|
-
return "bg-neutral-
|
|
531
|
+
if (isWhite) return "bg-white";
|
|
532
|
+
if (isBlack) return "bg-black";
|
|
533
|
+
if (isNeutral) return "bg-neutral-200";
|
|
534
|
+
return "bg-neutral-200";
|
|
979
535
|
};
|
|
980
536
|
const getShadowStyle = () => {
|
|
981
|
-
if (
|
|
982
|
-
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.
|
|
983
|
-
inset 0 -3px 0 0 rgba(0, 0, 0, 0.
|
|
984
|
-
0 4px 0 0 #
|
|
985
|
-
0 12px 24px rgba(0, 0, 0, 0.
|
|
537
|
+
if (isBlack) return `
|
|
538
|
+
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
|
|
539
|
+
inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
|
|
540
|
+
0 4px 0 0 #0c0c0c,
|
|
541
|
+
0 12px 24px rgba(0, 0, 0, 0.1)
|
|
986
542
|
`;
|
|
987
543
|
return "none";
|
|
988
544
|
};
|
|
989
|
-
const textColor = "text-white";
|
|
990
|
-
const subTextColor = "text-neutral-
|
|
991
|
-
const labelColor = "text-neutral-500";
|
|
992
|
-
return /* @__PURE__ */
|
|
545
|
+
const textColor = isBlack ? "text-white" : "text-black";
|
|
546
|
+
const subTextColor = isBlack ? "text-neutral-300" : "text-neutral-600";
|
|
547
|
+
const labelColor = isBlack ? "text-neutral-400" : "text-neutral-500";
|
|
548
|
+
return /* @__PURE__ */ React7.createElement(
|
|
993
549
|
"div",
|
|
994
550
|
{
|
|
995
551
|
key: i,
|
|
996
552
|
className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-500 group text-left ${getBgStyle()} ${f.size}`,
|
|
997
553
|
style: { boxShadow: getShadowStyle() }
|
|
998
554
|
},
|
|
999
|
-
/* @__PURE__ */
|
|
555
|
+
/* @__PURE__ */ React7.createElement(
|
|
1000
556
|
"div",
|
|
1001
557
|
{
|
|
1002
558
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
1003
559
|
style: { 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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }
|
|
1004
560
|
}
|
|
1005
561
|
),
|
|
1006
|
-
|
|
1007
|
-
/* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
562
|
+
isBlack && /* @__PURE__ */ React7.createElement("span", { className: "absolute inset-0 rounded-2xl bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none z-10" }),
|
|
563
|
+
/* @__PURE__ */ React7.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ React7.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBlack ? "text-white/5" : "text-black/5"}` }, /* @__PURE__ */ React7.createElement(HugeiconsIcon3, { icon: f.icon, size: 180 }))),
|
|
564
|
+
/* @__PURE__ */ React7.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ React7.createElement("span", { className: `text-[9px] tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ React7.createElement("div", { className: `p-2 rounded-full transition-colors ${isBlack ? "bg-white/10" : "bg-white/50 backdrop-blur-sm"}` }, /* @__PURE__ */ React7.createElement(HugeiconsIcon3, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ React7.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React7.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ React7.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
|
|
1009
565
|
);
|
|
1010
566
|
})))));
|
|
1011
567
|
};
|
|
1012
568
|
|
|
1013
569
|
// src/components/FeatureScroll.tsx
|
|
1014
|
-
import
|
|
570
|
+
import React8, { useRef as useRef5, useState as useState6, useEffect as useEffect5 } from "react";
|
|
1015
571
|
import Image3 from "next/image";
|
|
1016
572
|
import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
|
|
1017
573
|
import { ArrowLeft01Icon, ArrowRight01Icon, Loading03Icon as Loading03Icon2 } from "@hugeicons/core-free-icons";
|
|
1018
574
|
var FeatureCard = ({ feature, bgImage }) => {
|
|
1019
|
-
const [isBgLoading, setIsBgLoading] =
|
|
1020
|
-
const [isFgLoading, setIsFgLoading] =
|
|
1021
|
-
return /* @__PURE__ */
|
|
575
|
+
const [isBgLoading, setIsBgLoading] = useState6(true);
|
|
576
|
+
const [isFgLoading, setIsFgLoading] = useState6(!!feature.image);
|
|
577
|
+
return /* @__PURE__ */ React8.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__ */ React8.createElement("div", { className: "relative w-full aspect-16/10 bg-neutral-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React8.createElement(
|
|
1022
578
|
Image3,
|
|
1023
579
|
{
|
|
1024
580
|
src: bgImage,
|
|
@@ -1031,7 +587,7 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
1031
587
|
${isBgLoading ? "blur-xl scale-110" : "blur-0 scale-100"}
|
|
1032
588
|
`
|
|
1033
589
|
}
|
|
1034
|
-
), /* @__PURE__ */
|
|
590
|
+
), /* @__PURE__ */ React8.createElement(
|
|
1035
591
|
"div",
|
|
1036
592
|
{
|
|
1037
593
|
className: "absolute inset-0 w-full h-full pointer-events-none z-0 opacity-[0.25] mix-blend-overlay",
|
|
@@ -1039,7 +595,7 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
1039
595
|
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")`
|
|
1040
596
|
}
|
|
1041
597
|
}
|
|
1042
|
-
), isFgLoading && feature.image && /* @__PURE__ */
|
|
598
|
+
), isFgLoading && feature.image && /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-50/50 backdrop-blur-sm transition-opacity duration-300" }, /* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: Loading03Icon2, size: 32, className: "animate-spin text-neutral-400" })), feature.image && /* @__PURE__ */ React8.createElement("div", { className: "absolute -bottom-6 -right-6 w-[85%] h-[85%] z-10 transition-transform duration-700 ease-out group-hover:-translate-x-2 group-hover:-translate-y-2" }, /* @__PURE__ */ React8.createElement(
|
|
1043
599
|
Image3,
|
|
1044
600
|
{
|
|
1045
601
|
src: feature.image,
|
|
@@ -1048,16 +604,16 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
1048
604
|
sizes: "(max-width: 768px) 90vw, 600px",
|
|
1049
605
|
onLoad: () => setIsFgLoading(false),
|
|
1050
606
|
className: `
|
|
1051
|
-
object-cover object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.
|
|
607
|
+
object-cover object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.06)] transition-all duration-700 ease-out
|
|
1052
608
|
${isFgLoading ? "opacity-0 blur-xl" : "opacity-100 blur-0"}
|
|
1053
609
|
`
|
|
1054
610
|
}
|
|
1055
|
-
))), /* @__PURE__ */
|
|
611
|
+
))), /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col text-left pr-4" }, /* @__PURE__ */ React8.createElement("h3", { className: " text-xl tracking-tight text-black mb-2" }, feature.title), /* @__PURE__ */ React8.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 max-w-[90%]" }, feature.desc)));
|
|
1056
612
|
};
|
|
1057
613
|
var FeatureScroll = ({ tagline, headline, features }) => {
|
|
1058
|
-
const scrollRef =
|
|
1059
|
-
const [canScrollLeft, setCanScrollLeft] =
|
|
1060
|
-
const [canScrollRight, setCanScrollRight] =
|
|
614
|
+
const scrollRef = useRef5(null);
|
|
615
|
+
const [canScrollLeft, setCanScrollLeft] = useState6(false);
|
|
616
|
+
const [canScrollRight, setCanScrollRight] = useState6(true);
|
|
1061
617
|
const checkScroll = () => {
|
|
1062
618
|
if (scrollRef.current) {
|
|
1063
619
|
const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
|
|
@@ -1065,7 +621,7 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
1065
621
|
setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 2);
|
|
1066
622
|
}
|
|
1067
623
|
};
|
|
1068
|
-
|
|
624
|
+
useEffect5(() => {
|
|
1069
625
|
checkScroll();
|
|
1070
626
|
window.addEventListener("resize", checkScroll);
|
|
1071
627
|
return () => window.removeEventListener("resize", checkScroll);
|
|
@@ -1081,53 +637,53 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
1081
637
|
"https://retinalabs.company/assets/images/bg_6.avif",
|
|
1082
638
|
"https://retinalabs.company/assets/images/bg_1.avif"
|
|
1083
639
|
];
|
|
1084
|
-
return /* @__PURE__ */
|
|
640
|
+
return /* @__PURE__ */ React8.createElement("section", { className: "py-24 w-full flex justify-center relative z-10 overflow-hidden" }, /* @__PURE__ */ React8.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12" }, /* @__PURE__ */ React8.createElement("div", { className: "relative z-10 text-left" }, /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 block mb-4" }, tagline), /* @__PURE__ */ React8.createElement("h2", { className: " text-3xl tracking-tight text-black leading-[1.05]" }, headline)), /* @__PURE__ */ React8.createElement("div", { className: "hidden md:flex items-center gap-3" }, /* @__PURE__ */ React8.createElement(
|
|
1085
641
|
"button",
|
|
1086
642
|
{
|
|
1087
643
|
onClick: () => scroll("left"),
|
|
1088
644
|
disabled: !canScrollLeft,
|
|
1089
|
-
className: "p-4 border border-neutral-
|
|
645
|
+
className: "p-4 border border-neutral-200 rounded-full text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:hover:border-neutral-200 disabled:hover:text-neutral-500 disabled:cursor-not-allowed transition-all outline-none",
|
|
1090
646
|
"aria-label": "Previous feature"
|
|
1091
647
|
},
|
|
1092
|
-
/* @__PURE__ */
|
|
1093
|
-
), /* @__PURE__ */
|
|
648
|
+
/* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: ArrowLeft01Icon, size: 20 })
|
|
649
|
+
), /* @__PURE__ */ React8.createElement(
|
|
1094
650
|
"button",
|
|
1095
651
|
{
|
|
1096
652
|
onClick: () => scroll("right"),
|
|
1097
653
|
disabled: !canScrollRight,
|
|
1098
|
-
className: "p-4 border border-neutral-
|
|
654
|
+
className: "p-4 border border-neutral-200 rounded-full text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:hover:border-neutral-200 disabled:hover:text-neutral-500 disabled:cursor-not-allowed transition-all outline-none",
|
|
1099
655
|
"aria-label": "Next feature"
|
|
1100
656
|
},
|
|
1101
|
-
/* @__PURE__ */
|
|
1102
|
-
))), /* @__PURE__ */
|
|
657
|
+
/* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: ArrowRight01Icon, size: 20 })
|
|
658
|
+
))), /* @__PURE__ */ React8.createElement(
|
|
1103
659
|
"div",
|
|
1104
660
|
{
|
|
1105
661
|
ref: scrollRef,
|
|
1106
662
|
onScroll: checkScroll,
|
|
1107
663
|
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"
|
|
1108
664
|
},
|
|
1109
|
-
features.slice(0, 3).map((feature, idx) => /* @__PURE__ */
|
|
1110
|
-
), /* @__PURE__ */
|
|
665
|
+
features.slice(0, 3).map((feature, idx) => /* @__PURE__ */ React8.createElement(FeatureCard, { key: idx, feature, bgImage: bgImages[idx] }))
|
|
666
|
+
), /* @__PURE__ */ React8.createElement("div", { className: "flex md:hidden items-center justify-center gap-4 mt-2" }, /* @__PURE__ */ React8.createElement(
|
|
1111
667
|
"button",
|
|
1112
668
|
{
|
|
1113
669
|
onClick: () => scroll("left"),
|
|
1114
670
|
disabled: !canScrollLeft,
|
|
1115
|
-
className: "p-4 border border-neutral-
|
|
671
|
+
className: "p-4 border border-neutral-200 rounded-full text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 transition-all outline-none"
|
|
1116
672
|
},
|
|
1117
|
-
/* @__PURE__ */
|
|
1118
|
-
), /* @__PURE__ */
|
|
673
|
+
/* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: ArrowLeft01Icon, size: 20 })
|
|
674
|
+
), /* @__PURE__ */ React8.createElement(
|
|
1119
675
|
"button",
|
|
1120
676
|
{
|
|
1121
677
|
onClick: () => scroll("right"),
|
|
1122
678
|
disabled: !canScrollRight,
|
|
1123
|
-
className: "p-4 border border-neutral-
|
|
679
|
+
className: "p-4 border border-neutral-200 rounded-full text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 transition-all outline-none"
|
|
1124
680
|
},
|
|
1125
|
-
/* @__PURE__ */
|
|
681
|
+
/* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: ArrowRight01Icon, size: 20 })
|
|
1126
682
|
))));
|
|
1127
683
|
};
|
|
1128
684
|
|
|
1129
685
|
// src/components/PlatformFeatures.tsx
|
|
1130
|
-
import
|
|
686
|
+
import React9 from "react";
|
|
1131
687
|
import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react";
|
|
1132
688
|
var PlatformFeatures = ({
|
|
1133
689
|
tagline,
|
|
@@ -1135,20 +691,20 @@ var PlatformFeatures = ({
|
|
|
1135
691
|
description,
|
|
1136
692
|
features
|
|
1137
693
|
}) => {
|
|
1138
|
-
return /* @__PURE__ */
|
|
694
|
+
return /* @__PURE__ */ React9.createElement("section", { className: "w-full flex justify-center mb-15 relative z-10" }, /* @__PURE__ */ React9.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col items-start mb-16 relative z-10" }, /* @__PURE__ */ React9.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 block mb-4" }, tagline), /* @__PURE__ */ React9.createElement("h2", { className: "text-3xl tracking-tight text-black leading-[1.05] mb-6" }, headline), /* @__PURE__ */ React9.createElement("p", { className: "text-[15px] leading-[1.8] text-neutral-600 max-w-2xl" }, description)), /* @__PURE__ */ React9.createElement("div", { className: "w-full h-px bg-neutral-100 mb-16", "aria-hidden": "true" }), /* @__PURE__ */ React9.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12" }, features.map((feature, idx) => /* @__PURE__ */ React9.createElement(
|
|
1139
695
|
"div",
|
|
1140
696
|
{
|
|
1141
697
|
key: idx,
|
|
1142
698
|
className: "flex flex-col group animate-in fade-in slide-in-from-bottom-4 duration-700 fill-mode-both",
|
|
1143
699
|
style: { animationDelay: feature.delay || "0ms" }
|
|
1144
700
|
},
|
|
1145
|
-
/* @__PURE__ */
|
|
1146
|
-
/* @__PURE__ */
|
|
701
|
+
/* @__PURE__ */ React9.createElement("div", { className: "flex flex-row items-center gap-4 mb-4" }, /* @__PURE__ */ React9.createElement("div", { className: "w-14 h-14 shrink-0 rounded-xl border border-neutral-200 flex items-center justify-center text-neutral-600 transition-colors duration-300" }, /* @__PURE__ */ React9.createElement(HugeiconsIcon5, { icon: feature.icon, size: 24 })), /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React9.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400 mb-0.5" }, feature.label || "CAPABILITY"), /* @__PURE__ */ React9.createElement("h3", { className: "text-xl tracking-tight text-black" }, feature.title))),
|
|
702
|
+
/* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 pr-4" }, feature.desc))
|
|
1147
703
|
)))));
|
|
1148
704
|
};
|
|
1149
705
|
|
|
1150
706
|
// src/components/ManagedDocument.tsx
|
|
1151
|
-
import
|
|
707
|
+
import React10, { useState as useState7, useEffect as useEffect6, useRef as useRef6 } from "react";
|
|
1152
708
|
var ManagedDocument = ({
|
|
1153
709
|
tagline,
|
|
1154
710
|
title,
|
|
@@ -1156,9 +712,9 @@ var ManagedDocument = ({
|
|
|
1156
712
|
contactText,
|
|
1157
713
|
contactEmail
|
|
1158
714
|
}) => {
|
|
1159
|
-
const [isAnimating, setIsAnimating] =
|
|
1160
|
-
const titleRef =
|
|
1161
|
-
|
|
715
|
+
const [isAnimating, setIsAnimating] = useState7(false);
|
|
716
|
+
const titleRef = useRef6(null);
|
|
717
|
+
useEffect6(() => {
|
|
1162
718
|
const observer = new IntersectionObserver(
|
|
1163
719
|
([entry]) => {
|
|
1164
720
|
if (entry.isIntersecting) {
|
|
@@ -1178,19 +734,19 @@ var ManagedDocument = ({
|
|
|
1178
734
|
}, []);
|
|
1179
735
|
return (
|
|
1180
736
|
// Outer layout wrapper (takes up available space, adds padding)
|
|
1181
|
-
/* @__PURE__ */
|
|
737
|
+
/* @__PURE__ */ React10.createElement("div", { className: "grow pt-28 px-3 md:px-8 w-full flex justify-center z-10 relative" }, /* @__PURE__ */ React10.createElement("div", { className: "relative bg-white rounded-2xl w-full max-w-7xl mx-auto overflow-hidden" }, /* @__PURE__ */ React10.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React10.createElement("div", { className: "relative px-5 md:px-12 py-8 md:py-10" }, tagline && /* @__PURE__ */ React10.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 text-left block " }, tagline), /* @__PURE__ */ React10.createElement(
|
|
1182
738
|
"h1",
|
|
1183
739
|
{
|
|
1184
740
|
ref: titleRef,
|
|
1185
|
-
className: `text-3xl mt-4 text-
|
|
741
|
+
className: ` text-3xl mt-4 text-black tracking-tight text-left ${isAnimating ? "" : ""}`,
|
|
1186
742
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
1187
743
|
},
|
|
1188
744
|
title
|
|
1189
|
-
)), sections.map((section, index) => /* @__PURE__ */
|
|
745
|
+
)), sections.map((section, index) => /* @__PURE__ */ React10.createElement("div", { key: index, className: "relative px-5 md:px-12 py-8 md:py-10" }, section.heading && /* @__PURE__ */ React10.createElement("p", { className: " text-[11px] tracking-[0.2em] text-black mb-4 text-left " }, section.heading), section.paragraphs && section.paragraphs.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "text-[14px] leading-[1.8] text-neutral-700 space-y-4 text-left font-light" }, section.paragraphs.map((text, pIndex) => /* @__PURE__ */ React10.createElement("p", { key: pIndex }, text))), section.quote && /* @__PURE__ */ React10.createElement("div", { className: `border-neutral-100 border rounded-xl p-6 ${section.paragraphs && section.paragraphs.length > 0 ? "mt-6" : ""}` }, /* @__PURE__ */ React10.createElement("p", { className: "text-neutral-900 text-[14px] md:text-[14px] leading-relaxed" }, '"', section.quote, '"')))), (contactText || contactEmail) && /* @__PURE__ */ React10.createElement("div", { className: "relative px-5 md:px-12 py-8 md:py-10 pb-12 md:pb-14" }, /* @__PURE__ */ React10.createElement("p", { className: "text-[11px] text-neutral-600 text-left" }, contactText, contactEmail && /* @__PURE__ */ React10.createElement(
|
|
1190
746
|
"a",
|
|
1191
747
|
{
|
|
1192
748
|
href: `mailto:${contactEmail}`,
|
|
1193
|
-
className: "text-
|
|
749
|
+
className: "text-black decoration-black decoration-2 underline-offset-4 ml-1 transition-colors"
|
|
1194
750
|
},
|
|
1195
751
|
contactEmail
|
|
1196
752
|
))))))
|
|
@@ -1198,18 +754,18 @@ var ManagedDocument = ({
|
|
|
1198
754
|
};
|
|
1199
755
|
|
|
1200
756
|
// src/components/ManagedContactBlock.tsx
|
|
1201
|
-
import
|
|
757
|
+
import React11, { useState as useState8, useEffect as useEffect7 } from "react";
|
|
1202
758
|
import { HugeiconsIcon as HugeiconsIcon6 } from "@hugeicons/react";
|
|
1203
759
|
var SecureEmail = ({ user, domain, className }) => {
|
|
1204
|
-
const [isMounted, setIsMounted] =
|
|
1205
|
-
|
|
760
|
+
const [isMounted, setIsMounted] = useState8(false);
|
|
761
|
+
useEffect7(() => {
|
|
1206
762
|
setIsMounted(true);
|
|
1207
763
|
}, []);
|
|
1208
764
|
if (!isMounted) {
|
|
1209
|
-
return /* @__PURE__ */
|
|
765
|
+
return /* @__PURE__ */ React11.createElement("span", { className, style: { opacity: 0 } }, "Loading");
|
|
1210
766
|
}
|
|
1211
767
|
const email = `${user}@${domain}`;
|
|
1212
|
-
return /* @__PURE__ */
|
|
768
|
+
return /* @__PURE__ */ React11.createElement("a", { href: `mailto:${email}`, className }, email);
|
|
1213
769
|
};
|
|
1214
770
|
var ManagedContactBlock = ({
|
|
1215
771
|
tagline,
|
|
@@ -1218,7 +774,7 @@ var ManagedContactBlock = ({
|
|
|
1218
774
|
emails,
|
|
1219
775
|
socials
|
|
1220
776
|
}) => {
|
|
1221
|
-
return /* @__PURE__ */
|
|
777
|
+
return /* @__PURE__ */ React11.createElement("div", { className: "grow pt-28 pb-20 px-4 md:px-8 w-full flex justify-center z-10 relative" }, /* @__PURE__ */ React11.createElement("div", { className: "relative bg-white rounded-2xl w-full max-w-7xl mx-auto overflow-hidden" }, /* @__PURE__ */ React11.createElement(
|
|
1222
778
|
"div",
|
|
1223
779
|
{
|
|
1224
780
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
@@ -1227,51 +783,51 @@ var ManagedContactBlock = ({
|
|
|
1227
783
|
backgroundRepeat: "repeat"
|
|
1228
784
|
}
|
|
1229
785
|
}
|
|
1230
|
-
), /* @__PURE__ */
|
|
786
|
+
), /* @__PURE__ */ React11.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React11.createElement("div", { className: "relative px-8 md:px-12 py-10" }, tagline && /* @__PURE__ */ React11.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 text-left block " }, tagline), /* @__PURE__ */ React11.createElement("h1", { className: " text-3xl mt-4 text-black tracking-tight text-left" }, title)), /* @__PURE__ */ React11.createElement("div", { className: "relative px-8 md:px-12 py-8 pb-14" }, /* @__PURE__ */ React11.createElement("div", { className: "flex flex-wrap gap-12 lg:gap-16 w-full" }, company && /* @__PURE__ */ React11.createElement("div", { className: "flex-1 min-w-65 space-y-6" }, /* @__PURE__ */ React11.createElement("p", { className: "text-[11px] tracking-[0.2em] text-black mb-4 " }, "Contact Details"), /* @__PURE__ */ React11.createElement("div", { className: "space-y-3 text-[13px] text-neutral-600 leading-[1.8]" }, company.name && /* @__PURE__ */ React11.createElement("p", { className: "text-black" }, company.name), company.lines && company.lines.map((line, idx) => /* @__PURE__ */ React11.createElement("p", { key: idx }, line)), company.phone && /* @__PURE__ */ React11.createElement("p", { className: "pt-2" }, /* @__PURE__ */ React11.createElement(
|
|
1231
787
|
"a",
|
|
1232
788
|
{
|
|
1233
789
|
href: `tel:${company.phone.replace(/\s+/g, "")}`,
|
|
1234
|
-
className: "transition-colors hover:text-
|
|
790
|
+
className: "transition-colors hover:text-black"
|
|
1235
791
|
},
|
|
1236
792
|
company.phone
|
|
1237
|
-
)))), emails && emails.length > 0 && /* @__PURE__ */
|
|
793
|
+
)))), emails && emails.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "flex-1 min-w-65 space-y-6" }, /* @__PURE__ */ React11.createElement("p", { className: "text-[11px] tracking-[0.2em] text-black mb-4 " }, "Email Directory"), /* @__PURE__ */ React11.createElement("div", { className: "space-y-6 text-[13px]" }, emails.map((email, idx) => /* @__PURE__ */ React11.createElement("div", { key: idx }, /* @__PURE__ */ React11.createElement("p", { className: "text-[11px] tracking-[0.2em] mb-1.5 text-neutral-500 " }, email.label), /* @__PURE__ */ React11.createElement(
|
|
1238
794
|
SecureEmail,
|
|
1239
795
|
{
|
|
1240
796
|
user: email.user,
|
|
1241
797
|
domain: email.domain,
|
|
1242
|
-
className: "text-neutral-
|
|
798
|
+
className: "text-neutral-600 transition-colors hover:text-black"
|
|
1243
799
|
}
|
|
1244
|
-
))))), socials && socials.length > 0 && /* @__PURE__ */
|
|
800
|
+
))))), socials && socials.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "flex-1 min-w-65 space-y-6" }, /* @__PURE__ */ React11.createElement("p", { className: "text-[11px] tracking-[0.2em] text-black mb-4 " }, "Find Us Online"), /* @__PURE__ */ React11.createElement("div", { className: "flex flex-col space-y-5 pt-1" }, socials.map((social, idx) => /* @__PURE__ */ React11.createElement(
|
|
1245
801
|
"a",
|
|
1246
802
|
{
|
|
1247
803
|
key: idx,
|
|
1248
804
|
href: social.href,
|
|
1249
805
|
target: "_blank",
|
|
1250
806
|
rel: "noopener noreferrer",
|
|
1251
|
-
className: "flex items-center gap-3 transition-colors group text-neutral-
|
|
807
|
+
className: "flex items-center gap-3 transition-colors group text-neutral-600 hover:text-black",
|
|
1252
808
|
"aria-label": social.label
|
|
1253
809
|
},
|
|
1254
|
-
/* @__PURE__ */
|
|
1255
|
-
/* @__PURE__ */
|
|
810
|
+
/* @__PURE__ */ React11.createElement(HugeiconsIcon6, { icon: social.icon, size: 18 }),
|
|
811
|
+
/* @__PURE__ */ React11.createElement("span", { className: "text-[13px]" }, social.label)
|
|
1256
812
|
)))))))));
|
|
1257
813
|
};
|
|
1258
814
|
|
|
1259
815
|
// src/components/ManagedPricingBlock.tsx
|
|
1260
|
-
import
|
|
816
|
+
import React12, { useState as useState9, useEffect as useEffect8, useRef as useRef7 } from "react";
|
|
1261
817
|
import Link5 from "next/link";
|
|
1262
818
|
import Image4 from "next/image";
|
|
1263
|
-
var CheckIcon = ({ className = "" }) => /* @__PURE__ */
|
|
1264
|
-
var CrossIcon = ({ className = "" }) => /* @__PURE__ */
|
|
819
|
+
var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React12.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
820
|
+
var CrossIcon = ({ className = "" }) => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ React12.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
|
|
1265
821
|
var ManagedPricingBlock = ({
|
|
1266
822
|
tagline,
|
|
1267
823
|
title,
|
|
1268
824
|
plans = [],
|
|
1269
825
|
tabs
|
|
1270
826
|
}) => {
|
|
1271
|
-
const [isAnimating, setIsAnimating] =
|
|
1272
|
-
const [activeTabIndex, setActiveTabIndex] =
|
|
1273
|
-
const titleRef =
|
|
1274
|
-
|
|
827
|
+
const [isAnimating, setIsAnimating] = useState9(false);
|
|
828
|
+
const [activeTabIndex, setActiveTabIndex] = useState9(0);
|
|
829
|
+
const titleRef = useRef7(null);
|
|
830
|
+
useEffect8(() => {
|
|
1275
831
|
const observer = new IntersectionObserver(
|
|
1276
832
|
([entry]) => {
|
|
1277
833
|
if (entry.isIntersecting) {
|
|
@@ -1291,79 +847,79 @@ var ManagedPricingBlock = ({
|
|
|
1291
847
|
}, []);
|
|
1292
848
|
const hasTabs = tabs && tabs.length > 0;
|
|
1293
849
|
const currentPlans = hasTabs ? tabs[activeTabIndex].plans : plans;
|
|
1294
|
-
return /* @__PURE__ */
|
|
850
|
+
return /* @__PURE__ */ React12.createElement("div", { className: "grow pt-10 pb-20 px-4 md:px-8 w-full flex justify-center z-10 relative" }, /* @__PURE__ */ React12.createElement("div", { className: "w-full max-w-5xl mx-auto flex flex-col items-center" }, /* @__PURE__ */ React12.createElement("div", { className: "w-full flex flex-col items-center text-center mb-10 sm:mb-12" }, tagline && /* @__PURE__ */ React12.createElement("span", { className: "text-[9px] tracking-[0.4em] text-black block " }, tagline), /* @__PURE__ */ React12.createElement(
|
|
1295
851
|
"h1",
|
|
1296
852
|
{
|
|
1297
853
|
ref: titleRef,
|
|
1298
|
-
className: `text-2xl sm:text-3xl mt-3 text-
|
|
854
|
+
className: `text-2xl sm:text-3xl mt-3 text-black tracking-tight ${isAnimating ? "" : ""}`,
|
|
1299
855
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
1300
856
|
},
|
|
1301
857
|
title
|
|
1302
|
-
)), hasTabs && /* @__PURE__ */
|
|
858
|
+
)), hasTabs && /* @__PURE__ */ React12.createElement("div", { className: "flex items-center justify-center mb-8 sm:mb-10 w-full animate-in fade-in duration-300 px-2" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center bg-white rounded-full p-1 sm:p-1.5 max-w-full overflow-x-auto custom-scrollbar" }, tabs.map((tab, idx) => {
|
|
1303
859
|
const isActive = activeTabIndex === idx;
|
|
1304
|
-
return /* @__PURE__ */
|
|
860
|
+
return /* @__PURE__ */ React12.createElement(
|
|
1305
861
|
"button",
|
|
1306
862
|
{
|
|
1307
863
|
key: idx,
|
|
1308
864
|
onClick: () => setActiveTabIndex(idx),
|
|
1309
|
-
className: `px-4 sm:px-6 py-1.5 sm:py-2 rounded-full text-[11px] sm:text-xs transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-
|
|
865
|
+
className: `px-4 sm:px-6 py-1.5 sm:py-2 rounded-full text-[11px] sm:text-xs transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-50 text-black " : "text-neutral-500 hover:text-black hover:bg-neutral-50/50 "}`
|
|
1310
866
|
},
|
|
1311
867
|
tab.label
|
|
1312
868
|
);
|
|
1313
|
-
}))), /* @__PURE__ */
|
|
869
|
+
}))), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-3xl animate-in slide-in-from-bottom-2 fade-in duration-500" }, currentPlans.map((plan, planIdx) => /* @__PURE__ */ React12.createElement(
|
|
1314
870
|
"div",
|
|
1315
871
|
{
|
|
1316
872
|
key: `${activeTabIndex}-${planIdx}`,
|
|
1317
|
-
className: `bg-
|
|
873
|
+
className: `bg-white rounded-3xl p-6 flex flex-col relative overflow-hidden transition-all duration-300 ${plan.isPremium ? "" : ""}`
|
|
1318
874
|
},
|
|
1319
|
-
/* @__PURE__ */
|
|
875
|
+
/* @__PURE__ */ React12.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React12.createElement("span", { className: "text-black text-base block mb-1" }, plan.name), /* @__PURE__ */ React12.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ React12.createElement("h3", { className: "text-3xl font-light text-black" }, plan.price), plan.period && /* @__PURE__ */ React12.createElement("span", { className: "text-xs text-neutral-500" }, plan.period)), /* @__PURE__ */ React12.createElement("p", { className: "text-xs text-neutral-500 mt-2 min-h-8" }, plan.description), plan.showApps && plan.appLogos && plan.appLogos.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-2 mt-4" }, plan.appLogos.map((logo, logoIdx) => /* @__PURE__ */ React12.createElement(
|
|
1320
876
|
"div",
|
|
1321
877
|
{
|
|
1322
878
|
key: logoIdx,
|
|
1323
879
|
className: "relative w-5 h-5 overflow-hidden flex items-center justify-center shrink-0"
|
|
1324
880
|
},
|
|
1325
|
-
/* @__PURE__ */
|
|
881
|
+
/* @__PURE__ */ React12.createElement(
|
|
1326
882
|
Image4,
|
|
1327
883
|
{
|
|
1328
884
|
src: logo.src,
|
|
1329
885
|
alt: logo.alt,
|
|
1330
886
|
width: 16,
|
|
1331
887
|
height: 16,
|
|
1332
|
-
className: "object-contain
|
|
888
|
+
className: "object-contain"
|
|
1333
889
|
}
|
|
1334
890
|
)
|
|
1335
891
|
)))),
|
|
1336
|
-
plan.isPremium ? /* @__PURE__ */
|
|
892
|
+
plan.isPremium ? /* @__PURE__ */ React12.createElement(ThreeDButton, { href: plan.ctaHref, className: "mb-6 w-full" }, plan.ctaText) : /* @__PURE__ */ React12.createElement(
|
|
1337
893
|
Link5,
|
|
1338
894
|
{
|
|
1339
895
|
href: plan.ctaHref,
|
|
1340
|
-
className: "w-full py-2
|
|
896
|
+
className: "w-full py-2 px-5 rounded-full border border-neutral-100 text-center text-black text-xs hover:bg-neutral-50 transition-colors mb-6 outline-none block"
|
|
1341
897
|
},
|
|
1342
898
|
plan.ctaText
|
|
1343
899
|
),
|
|
1344
|
-
/* @__PURE__ */
|
|
900
|
+
/* @__PURE__ */ React12.createElement("div", { className: "flex flex-col gap-3" }, plan.features.map((feature, featureIdx) => {
|
|
1345
901
|
const isAvailable = feature.value !== false;
|
|
1346
902
|
const valueText = typeof feature.value === "string" ? feature.value : "";
|
|
1347
|
-
return /* @__PURE__ */
|
|
903
|
+
return /* @__PURE__ */ React12.createElement("div", { key: featureIdx, className: "flex items-center gap-2.5 min-w-0" }, isAvailable ? /* @__PURE__ */ React12.createElement(CheckIcon, null) : /* @__PURE__ */ React12.createElement(CrossIcon, null), /* @__PURE__ */ React12.createElement("span", { className: `text-xs truncate ${isAvailable ? "text-neutral-800" : "text-neutral-400"}` }, feature.name, valueText && /* @__PURE__ */ React12.createElement("span", { className: "text-neutral-500 ml-1" }, "(", valueText, ")")));
|
|
1348
904
|
}))
|
|
1349
905
|
)))));
|
|
1350
906
|
};
|
|
1351
907
|
|
|
1352
908
|
// src/components/ManagedBoardBlock.tsx
|
|
1353
|
-
import
|
|
909
|
+
import React13 from "react";
|
|
1354
910
|
import Image5 from "next/image";
|
|
1355
911
|
import { HugeiconsIcon as HugeiconsIcon7 } from "@hugeicons/react";
|
|
1356
912
|
import { TwitterIcon, LinkedinIcon } from "@hugeicons/core-free-icons";
|
|
1357
|
-
var MemberSocialLink = ({ href, icon, label, name }) => /* @__PURE__ */
|
|
913
|
+
var MemberSocialLink = ({ href, icon, label, name }) => /* @__PURE__ */ React13.createElement(
|
|
1358
914
|
"a",
|
|
1359
915
|
{
|
|
1360
916
|
href,
|
|
1361
917
|
target: "_blank",
|
|
1362
918
|
rel: "noopener noreferrer",
|
|
1363
|
-
className: "text-neutral-
|
|
919
|
+
className: "text-neutral-400 hover:text-black transition-colors",
|
|
1364
920
|
"aria-label": `${name} on ${label}`
|
|
1365
921
|
},
|
|
1366
|
-
/* @__PURE__ */
|
|
922
|
+
/* @__PURE__ */ React13.createElement(HugeiconsIcon7, { icon, size: 16 })
|
|
1367
923
|
);
|
|
1368
924
|
var ManagedBoardBlock = ({
|
|
1369
925
|
tagline,
|
|
@@ -1372,7 +928,7 @@ var ManagedBoardBlock = ({
|
|
|
1372
928
|
contactText,
|
|
1373
929
|
contactEmail
|
|
1374
930
|
}) => {
|
|
1375
|
-
return /* @__PURE__ */
|
|
931
|
+
return /* @__PURE__ */ React13.createElement("div", { className: "grow pt-28 pb-20 px-3 md:px-8 w-full flex justify-center z-10 relative" }, /* @__PURE__ */ React13.createElement("div", { className: "relative w-full mx-auto overflow-hidden max-w-7xl" }, /* @__PURE__ */ React13.createElement(
|
|
1376
932
|
"div",
|
|
1377
933
|
{
|
|
1378
934
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
@@ -1381,7 +937,7 @@ var ManagedBoardBlock = ({
|
|
|
1381
937
|
backgroundRepeat: "repeat"
|
|
1382
938
|
}
|
|
1383
939
|
}
|
|
1384
|
-
), /* @__PURE__ */
|
|
940
|
+
), /* @__PURE__ */ React13.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React13.createElement("div", { className: "relative px-5 md:px-12 py-8 md:py-10" }, tagline && /* @__PURE__ */ React13.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 text-left block " }, tagline), /* @__PURE__ */ React13.createElement("h1", { className: " text-3xl mt-4 text-black tracking-tight text-left" }, title)), /* @__PURE__ */ React13.createElement("div", { className: "relative px-5 md:px-12 py-4 md:py-8" }, /* @__PURE__ */ React13.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-8" }, members.map((member, idx) => /* @__PURE__ */ React13.createElement("div", { key: idx, className: "relative p-6 md:p-8 rounded-2xl bg-white flex flex-col transition-all group" }, /* @__PURE__ */ React13.createElement("div", { className: "flex items-start space-x-4 md:space-x-5 mb-5 md:mb-6" }, /* @__PURE__ */ React13.createElement("div", { className: "relative w-14 h-14 md:w-16 md:h-16 shrink-0 bg-white overflow-hidden rounded-xl" }, /* @__PURE__ */ React13.createElement(
|
|
1385
941
|
Image5,
|
|
1386
942
|
{
|
|
1387
943
|
src: member.imageSrc,
|
|
@@ -1390,7 +946,7 @@ var ManagedBoardBlock = ({
|
|
|
1390
946
|
sizes: "(max-width: 768px) 56px, 64px",
|
|
1391
947
|
className: "object-cover grayscale opacity-100 transition-opacity"
|
|
1392
948
|
}
|
|
1393
|
-
)), /* @__PURE__ */
|
|
949
|
+
)), /* @__PURE__ */ React13.createElement("div", { className: "pt-1" }, /* @__PURE__ */ React13.createElement("h3", { className: " text-[14px] md:text-[15px] text-black tracking-tight" }, member.name), /* @__PURE__ */ React13.createElement("p", { className: "text-[11px] tracking-[0.2em] text-neutral-500 mt-1.5 " }, member.title))), /* @__PURE__ */ React13.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 text-left grow mb-8" }, member.bio), /* @__PURE__ */ React13.createElement("div", { className: "space-y-6 mt-auto" }, /* @__PURE__ */ React13.createElement("div", { className: "w-full *:w-full" }, /* @__PURE__ */ React13.createElement(ThreeDButton, { href: member.website }, "Visit Website")), /* @__PURE__ */ React13.createElement("div", { className: "flex space-x-4 pt-5" }, member.twitterHandle && member.twitterHandle.length > 0 && /* @__PURE__ */ React13.createElement(
|
|
1394
950
|
MemberSocialLink,
|
|
1395
951
|
{
|
|
1396
952
|
href: `https://x.com/${member.twitterHandle}`,
|
|
@@ -1398,7 +954,7 @@ var ManagedBoardBlock = ({
|
|
|
1398
954
|
label: "X",
|
|
1399
955
|
name: member.name
|
|
1400
956
|
}
|
|
1401
|
-
), member.linkedinHandle && member.linkedinHandle.length > 0 && /* @__PURE__ */
|
|
957
|
+
), member.linkedinHandle && member.linkedinHandle.length > 0 && /* @__PURE__ */ React13.createElement(
|
|
1402
958
|
MemberSocialLink,
|
|
1403
959
|
{
|
|
1404
960
|
href: member.linkedinHandle,
|
|
@@ -1406,38 +962,28 @@ var ManagedBoardBlock = ({
|
|
|
1406
962
|
label: "LinkedIn",
|
|
1407
963
|
name: member.name
|
|
1408
964
|
}
|
|
1409
|
-
))))))), (contactText || contactEmail) && /* @__PURE__ */
|
|
965
|
+
))))))), (contactText || contactEmail) && /* @__PURE__ */ React13.createElement("div", { className: "relative px-5 md:px-12 py-8 md:py-10 pb-12 md:pb-14" }, /* @__PURE__ */ React13.createElement("p", { className: "text-[11px] text-neutral-600 text-left" }, contactText, contactEmail && /* @__PURE__ */ React13.createElement("a", { href: `mailto:${contactEmail}`, className: "text-black decoration-black decoration-2 underline-offset-4 ml-1 transition-colors" }, contactEmail))))));
|
|
1410
966
|
};
|
|
1411
967
|
|
|
1412
968
|
// src/components/ManagedNotFoundBlock.tsx
|
|
1413
|
-
import
|
|
1414
|
-
import Link6 from "next/link";
|
|
969
|
+
import React14 from "react";
|
|
1415
970
|
var ManagedNotFoundBlock = ({
|
|
1416
971
|
title = "404 - Page Not Found",
|
|
1417
|
-
description = "The page you are looking for does not exist or has been moved."
|
|
1418
|
-
backLinkText = "Go back to Homepage",
|
|
1419
|
-
backLinkHref = "/"
|
|
972
|
+
description = "The page you are looking for does not exist or has been moved."
|
|
1420
973
|
}) => {
|
|
1421
|
-
return /* @__PURE__ */
|
|
974
|
+
return /* @__PURE__ */ React14.createElement("main", { className: "min-h-screen flex items-center justify-center relative z-20 bg-transparent" }, /* @__PURE__ */ React14.createElement("div", { className: "p-6 w-full max-w-md mx-auto text-center" }, /* @__PURE__ */ React14.createElement("div", { className: "mb-8 flex justify-center" }, /* @__PURE__ */ React14.createElement(
|
|
1422
975
|
"svg",
|
|
1423
976
|
{
|
|
1424
977
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1425
978
|
viewBox: "0 0 24 24",
|
|
1426
|
-
className: "w-12 h-12 fill-neutral-
|
|
1427
|
-
},
|
|
1428
|
-
/* @__PURE__ */ React16.createElement("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" })
|
|
1429
|
-
)), /* @__PURE__ */ React16.createElement("h1", { className: "text-xl md:text-3xl text-white tracking-tight mb-4" }, title), /* @__PURE__ */ React16.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-400 mb-12" }, description), /* @__PURE__ */ React16.createElement(
|
|
1430
|
-
Link6,
|
|
1431
|
-
{
|
|
1432
|
-
href: backLinkHref,
|
|
1433
|
-
className: "inline-flex items-center justify-center px-8 py-2.5 border border-neutral-800 text-white transition-colors rounded-full text-[11px] tracking-widest outline-none"
|
|
979
|
+
className: "w-12 h-12 fill-neutral-100"
|
|
1434
980
|
},
|
|
1435
|
-
|
|
1436
|
-
)));
|
|
981
|
+
/* @__PURE__ */ React14.createElement("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" })
|
|
982
|
+
)), /* @__PURE__ */ React14.createElement("h1", { className: " text-xl md:text-3xl text-black tracking-tight mb-4" }, title), /* @__PURE__ */ React14.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 mb-12" }, description)));
|
|
1437
983
|
};
|
|
1438
984
|
|
|
1439
985
|
// src/components/PageSpinner.tsx
|
|
1440
|
-
import
|
|
986
|
+
import React15 from "react";
|
|
1441
987
|
import { HugeiconsIcon as HugeiconsIcon8 } from "@hugeicons/react";
|
|
1442
988
|
import { Loading03Icon as Loading03Icon3 } from "@hugeicons/core-free-icons";
|
|
1443
989
|
var PageSpinner = ({
|
|
@@ -1447,22 +993,22 @@ var PageSpinner = ({
|
|
|
1447
993
|
}) => {
|
|
1448
994
|
return (
|
|
1449
995
|
// z-[100] ensures it sits above absolute headers and modals
|
|
1450
|
-
/* @__PURE__ */
|
|
996
|
+
/* @__PURE__ */ React15.createElement("div", { className: `fixed inset-0 z-100 flex flex-col items-center justify-center w-full h-full pointer-events-none ${className}` }, /* @__PURE__ */ React15.createElement(
|
|
1451
997
|
HugeiconsIcon8,
|
|
1452
998
|
{
|
|
1453
999
|
icon: Loading03Icon3,
|
|
1454
1000
|
size,
|
|
1455
|
-
className: `animate-spin
|
|
1001
|
+
className: `animate-spin mb-4 ${iconClassName}`
|
|
1456
1002
|
}
|
|
1457
1003
|
))
|
|
1458
1004
|
);
|
|
1459
1005
|
};
|
|
1460
1006
|
|
|
1461
1007
|
// src/components/ManagedToaster.tsx
|
|
1462
|
-
import
|
|
1008
|
+
import React16 from "react";
|
|
1463
1009
|
import { Toaster } from "react-hot-toast";
|
|
1464
1010
|
var ManagedToaster = () => {
|
|
1465
|
-
return /* @__PURE__ */
|
|
1011
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1466
1012
|
Toaster,
|
|
1467
1013
|
{
|
|
1468
1014
|
position: "top-right",
|
|
@@ -1494,7 +1040,7 @@ var ManagedToaster = () => {
|
|
|
1494
1040
|
};
|
|
1495
1041
|
|
|
1496
1042
|
// src/components/ManagedNewsletterSplitBlock.tsx
|
|
1497
|
-
import
|
|
1043
|
+
import React17 from "react";
|
|
1498
1044
|
import Image6 from "next/image";
|
|
1499
1045
|
var ManagedNewsletterSplitBlock = ({
|
|
1500
1046
|
tagline,
|
|
@@ -1508,7 +1054,7 @@ var ManagedNewsletterSplitBlock = ({
|
|
|
1508
1054
|
ctaHref = "/contact-us",
|
|
1509
1055
|
children
|
|
1510
1056
|
}) => {
|
|
1511
|
-
return /* @__PURE__ */
|
|
1057
|
+
return /* @__PURE__ */ React17.createElement("div", { className: "grow flex flex-col md:flex-row relative w-full pt-32 md:pt-0" }, /* @__PURE__ */ React17.createElement("div", { className: "hidden md:block md:w-1/2 relative min-h-screen overflow-hidden" }, /* @__PURE__ */ React17.createElement(
|
|
1512
1058
|
Image6,
|
|
1513
1059
|
{
|
|
1514
1060
|
src: imageSrc,
|
|
@@ -1518,23 +1064,23 @@ var ManagedNewsletterSplitBlock = ({
|
|
|
1518
1064
|
className: "object-cover object-top grayscale opacity-60",
|
|
1519
1065
|
quality: 100
|
|
1520
1066
|
}
|
|
1521
|
-
), /* @__PURE__ */
|
|
1067
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1522
1068
|
"div",
|
|
1523
1069
|
{
|
|
1524
1070
|
className: "absolute inset-0 z-10 pointer-events-none",
|
|
1525
1071
|
style: {
|
|
1526
|
-
background: "linear-gradient(to right, rgba(
|
|
1072
|
+
background: "linear-gradient(to right, rgba(255,255,255,0) 30%, #ffffff 100%)"
|
|
1527
1073
|
}
|
|
1528
1074
|
}
|
|
1529
|
-
), /* @__PURE__ */
|
|
1075
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1530
1076
|
"div",
|
|
1531
1077
|
{
|
|
1532
1078
|
className: "absolute inset-x-0 bottom-0 h-40 z-10 pointer-events-none",
|
|
1533
1079
|
style: {
|
|
1534
|
-
background: "linear-gradient(to bottom, rgba(
|
|
1080
|
+
background: "linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%)"
|
|
1535
1081
|
}
|
|
1536
1082
|
}
|
|
1537
|
-
)), /* @__PURE__ */
|
|
1083
|
+
)), /* @__PURE__ */ React17.createElement("div", { className: "w-full md:w-1/2 flex mt-22 flex-col items-center justify-center p-4 md:p-12 relative z-20" }, /* @__PURE__ */ React17.createElement("div", { className: "relative w-full max-w-lg p-8 md:p-12 text-center md:text-left transition-all duration-700 ease-out" }, /* @__PURE__ */ React17.createElement(
|
|
1538
1084
|
"div",
|
|
1539
1085
|
{
|
|
1540
1086
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
@@ -1543,18 +1089,18 @@ var ManagedNewsletterSplitBlock = ({
|
|
|
1543
1089
|
backgroundRepeat: "repeat"
|
|
1544
1090
|
}
|
|
1545
1091
|
}
|
|
1546
|
-
), /* @__PURE__ */
|
|
1092
|
+
), /* @__PURE__ */ React17.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React17.createElement("div", { className: "mb-10 border-b border-neutral-100 pb-8 text-center md:text-left" }, tagline && /* @__PURE__ */ React17.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 " }, tagline), /* @__PURE__ */ React17.createElement("h1", { className: " text-3xl mt-4 text-black tracking-tight mb-4" }, title), subtitle && /* @__PURE__ */ React17.createElement("p", { className: "text-[11px] tracking-[0.2em] text-neutral-500 " }, subtitle)), /* @__PURE__ */ React17.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 mb-10 text-center md:text-left" }, description), children && /* @__PURE__ */ React17.createElement("div", { className: "mb-8 text-left" }, children), /* @__PURE__ */ React17.createElement("div", { className: "text-center md:text-left mt-10 space-y-6" }, dividerText && /* @__PURE__ */ React17.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React17.createElement("div", { className: "grow h-px bg-neutral-100" }), /* @__PURE__ */ React17.createElement("span", { className: "shrink mx-4 text-[11px] tracking-[0.2em] text-neutral-400 " }, dividerText), /* @__PURE__ */ React17.createElement("div", { className: "grow h-px bg-neutral-100" })), ctaText && ctaHref && /* @__PURE__ */ React17.createElement("div", { className: "w-full *:w-full" }, /* @__PURE__ */ React17.createElement(
|
|
1547
1093
|
ThreeDButton,
|
|
1548
1094
|
{
|
|
1549
1095
|
href: ctaHref,
|
|
1550
|
-
className: "py-
|
|
1096
|
+
className: "py-3 tracking-widest text-[11px]"
|
|
1551
1097
|
},
|
|
1552
1098
|
ctaText
|
|
1553
1099
|
)))))));
|
|
1554
1100
|
};
|
|
1555
1101
|
|
|
1556
1102
|
// src/components/ReusableInputs.tsx
|
|
1557
|
-
import
|
|
1103
|
+
import React18 from "react";
|
|
1558
1104
|
var TextInput = ({
|
|
1559
1105
|
label,
|
|
1560
1106
|
value,
|
|
@@ -1565,7 +1111,7 @@ var TextInput = ({
|
|
|
1565
1111
|
readOnly,
|
|
1566
1112
|
type = "text",
|
|
1567
1113
|
onClick
|
|
1568
|
-
}) => /* @__PURE__ */
|
|
1114
|
+
}) => /* @__PURE__ */ React18.createElement("div", { className: "space-y-2 flex-1 w-full", onClick }, label && /* @__PURE__ */ React18.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, label), /* @__PURE__ */ React18.createElement(
|
|
1569
1115
|
"input",
|
|
1570
1116
|
{
|
|
1571
1117
|
type,
|
|
@@ -1576,7 +1122,7 @@ var TextInput = ({
|
|
|
1576
1122
|
readOnly,
|
|
1577
1123
|
autoComplete: "off",
|
|
1578
1124
|
spellCheck: "false",
|
|
1579
|
-
className: `w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-
|
|
1125
|
+
className: `w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-100 text-black transition-all outline-none focus:border-black disabled:opacity-50 ${readOnly ? "cursor-pointer" : ""}`
|
|
1580
1126
|
}
|
|
1581
1127
|
));
|
|
1582
1128
|
var NumberInput = ({
|
|
@@ -1586,7 +1132,7 @@ var NumberInput = ({
|
|
|
1586
1132
|
placeholder,
|
|
1587
1133
|
maxLength,
|
|
1588
1134
|
disabled
|
|
1589
|
-
}) => /* @__PURE__ */
|
|
1135
|
+
}) => /* @__PURE__ */ React18.createElement("div", { className: "space-y-2 flex-1 w-full" }, label && /* @__PURE__ */ React18.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, label), /* @__PURE__ */ React18.createElement(
|
|
1590
1136
|
"input",
|
|
1591
1137
|
{
|
|
1592
1138
|
type: "text",
|
|
@@ -1599,19 +1145,19 @@ var NumberInput = ({
|
|
|
1599
1145
|
disabled,
|
|
1600
1146
|
autoComplete: "off",
|
|
1601
1147
|
spellCheck: "false",
|
|
1602
|
-
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-
|
|
1148
|
+
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-100 text-black transition-all outline-none focus:border-black disabled:opacity-50"
|
|
1603
1149
|
}
|
|
1604
1150
|
));
|
|
1605
1151
|
|
|
1606
1152
|
// src/components/PortfolioHero.tsx
|
|
1607
|
-
import
|
|
1608
|
-
import
|
|
1153
|
+
import React19, { useEffect as useEffect9, useRef as useRef8 } from "react";
|
|
1154
|
+
import Link6 from "next/link";
|
|
1609
1155
|
import Image7 from "next/image";
|
|
1610
1156
|
import { HugeiconsIcon as HugeiconsIcon9 } from "@hugeicons/react";
|
|
1611
1157
|
import { ArrowRight01Icon as ArrowRight01Icon2 } from "@hugeicons/core-free-icons";
|
|
1612
1158
|
var useScrollAnimation = () => {
|
|
1613
|
-
const elementRef =
|
|
1614
|
-
|
|
1159
|
+
const elementRef = useRef8(null);
|
|
1160
|
+
useEffect9(() => {
|
|
1615
1161
|
const el = elementRef.current;
|
|
1616
1162
|
if (!el) return;
|
|
1617
1163
|
const observer = new IntersectionObserver(
|
|
@@ -1647,13 +1193,13 @@ var PortfolioHero = ({
|
|
|
1647
1193
|
secondaryCtaHref
|
|
1648
1194
|
}) => {
|
|
1649
1195
|
const heroContentRef = useScrollAnimation();
|
|
1650
|
-
return /* @__PURE__ */
|
|
1196
|
+
return /* @__PURE__ */ React19.createElement("section", { className: "pt-44 md:pt-52 pb-16 px-6 md:px-12 flex flex-col relative overflow-hidden z-10 w-full" }, /* @__PURE__ */ React19.createElement(
|
|
1651
1197
|
"div",
|
|
1652
1198
|
{
|
|
1653
1199
|
ref: heroContentRef,
|
|
1654
1200
|
className: "w-full opacity-0 translate-y-5 transition-all duration-1000 ease-out relative z-10"
|
|
1655
1201
|
},
|
|
1656
|
-
/* @__PURE__ */
|
|
1202
|
+
/* @__PURE__ */ React19.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center gap-5 sm:gap-8 mb-10" }, /* @__PURE__ */ React19.createElement("div", { className: "relative w-20 h-20 sm:w-32 sm:h-32 rounded-full overflow-hidden border border-neutral-100 shrink-0 shadow-sm" }, /* @__PURE__ */ React19.createElement(
|
|
1657
1203
|
Image7,
|
|
1658
1204
|
{
|
|
1659
1205
|
src: imageSrc,
|
|
@@ -1664,38 +1210,38 @@ var PortfolioHero = ({
|
|
|
1664
1210
|
sizes: "(max-width: 640px) 80px, 128px",
|
|
1665
1211
|
quality: 100
|
|
1666
1212
|
}
|
|
1667
|
-
)), /* @__PURE__ */
|
|
1213
|
+
)), /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col text-left" }, /* @__PURE__ */ React19.createElement("h1", { className: " text-3xl sm:text-5xl lg:text-6xl tracking-tight text-black leading-none mb-3" }, name), socialLabel && /* @__PURE__ */ React19.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 " }, socialLabel), socialLinkText && socialLinkHref && /* @__PURE__ */ React19.createElement(
|
|
1668
1214
|
"a",
|
|
1669
1215
|
{
|
|
1670
1216
|
href: socialLinkHref,
|
|
1671
1217
|
target: "_blank",
|
|
1672
1218
|
rel: "noopener noreferrer",
|
|
1673
|
-
className: "text-[11px] md:text-[14px] text-
|
|
1219
|
+
className: "text-[11px] md:text-[14px] text-black hover:text-neutral-500 transition-colors mt-1 underline underline-offset-4 decoration-neutral-300"
|
|
1674
1220
|
},
|
|
1675
1221
|
socialLinkText
|
|
1676
1222
|
))),
|
|
1677
|
-
/* @__PURE__ */
|
|
1678
|
-
/* @__PURE__ */
|
|
1223
|
+
/* @__PURE__ */ React19.createElement("p", { className: "text-[13px] leading-[1.8] max-w-4xl mb-12 text-neutral-600" }, bio),
|
|
1224
|
+
/* @__PURE__ */ React19.createElement("div", { className: "flex flex-col sm:flex-row gap-4 w-full sm:w-auto" }, primaryCtaText && primaryCtaHref && /* @__PURE__ */ React19.createElement("div", { className: "w-full sm:w-auto *:w-full" }, /* @__PURE__ */ React19.createElement(
|
|
1679
1225
|
ThreeDButton,
|
|
1680
1226
|
{
|
|
1681
1227
|
href: primaryCtaHref,
|
|
1682
|
-
className: "py-
|
|
1228
|
+
className: "py-3 tracking-widest text-[11px]"
|
|
1683
1229
|
},
|
|
1684
1230
|
primaryCtaText
|
|
1685
|
-
)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */
|
|
1686
|
-
|
|
1231
|
+
)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React19.createElement(
|
|
1232
|
+
Link6,
|
|
1687
1233
|
{
|
|
1688
1234
|
href: secondaryCtaHref,
|
|
1689
|
-
className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em]
|
|
1235
|
+
className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em] rounded-full px-8 py-3.5 bg-neutral-200 transition-colors text-black hover:bg-neutral-200 outline-none"
|
|
1690
1236
|
},
|
|
1691
1237
|
secondaryCtaText,
|
|
1692
|
-
/* @__PURE__ */
|
|
1238
|
+
/* @__PURE__ */ React19.createElement(HugeiconsIcon9, { icon: ArrowRight01Icon2, size: 16 })
|
|
1693
1239
|
))
|
|
1694
1240
|
));
|
|
1695
1241
|
};
|
|
1696
1242
|
|
|
1697
1243
|
// src/components/GifFeatureCard.tsx
|
|
1698
|
-
import
|
|
1244
|
+
import React20, { useState as useState10 } from "react";
|
|
1699
1245
|
import Image8 from "next/image";
|
|
1700
1246
|
import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react";
|
|
1701
1247
|
import { Loading03Icon as Loading03Icon4 } from "@hugeicons/core-free-icons";
|
|
@@ -1706,20 +1252,20 @@ var GifFeatureCard = ({
|
|
|
1706
1252
|
alt = "Feature animation",
|
|
1707
1253
|
className = "aspect-video"
|
|
1708
1254
|
}) => {
|
|
1709
|
-
const [isLoading, setIsLoading] =
|
|
1710
|
-
return /* @__PURE__ */
|
|
1255
|
+
const [isLoading, setIsLoading] = useState10(true);
|
|
1256
|
+
return /* @__PURE__ */ React20.createElement("div", { className: `relative w-full bg-black overflow-hidden shadow-2xl ${className}` }, isLoading && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-black" }, /* @__PURE__ */ React20.createElement(
|
|
1711
1257
|
HugeiconsIcon10,
|
|
1712
1258
|
{
|
|
1713
1259
|
icon: Loading03Icon4,
|
|
1714
1260
|
size: 32,
|
|
1715
1261
|
className: "animate-spin text-white"
|
|
1716
1262
|
}
|
|
1717
|
-
)), /* @__PURE__ */
|
|
1263
|
+
)), /* @__PURE__ */ React20.createElement(
|
|
1718
1264
|
"div",
|
|
1719
1265
|
{
|
|
1720
1266
|
className: `absolute inset-0 z-0 transition-all duration-1000 ease-out ${isLoading ? "scale-105 blur-2xl opacity-0" : "scale-100 blur-0 opacity-100"}`
|
|
1721
1267
|
},
|
|
1722
|
-
/* @__PURE__ */
|
|
1268
|
+
/* @__PURE__ */ React20.createElement(
|
|
1723
1269
|
Image8,
|
|
1724
1270
|
{
|
|
1725
1271
|
src: gifSrc,
|
|
@@ -1730,1204 +1276,16 @@ var GifFeatureCard = ({
|
|
|
1730
1276
|
className: "object-cover object-center pointer-events-none"
|
|
1731
1277
|
}
|
|
1732
1278
|
)
|
|
1733
|
-
), /* @__PURE__ */
|
|
1279
|
+
), /* @__PURE__ */ React20.createElement(
|
|
1734
1280
|
"div",
|
|
1735
1281
|
{
|
|
1736
1282
|
className: "absolute inset-x-0 bottom-0 h-1/2 sm:h-2/3 bg-linear-to-t from-black/95 via-black/40 to-transparent z-10 pointer-events-none transition-opacity duration-700"
|
|
1737
1283
|
}
|
|
1738
|
-
), /* @__PURE__ */
|
|
1739
|
-
};
|
|
1740
|
-
|
|
1741
|
-
// src/components/UniversalSidebar.tsx
|
|
1742
|
-
import React23, { useState as useState12, useEffect as useEffect11 } from "react";
|
|
1743
|
-
import Link8 from "next/link";
|
|
1744
|
-
import toast3 from "react-hot-toast";
|
|
1745
|
-
import { HugeiconsIcon as HugeiconsIcon11 } from "@hugeicons/react";
|
|
1746
|
-
import {
|
|
1747
|
-
SidebarLeft01Icon,
|
|
1748
|
-
CancelCircleIcon,
|
|
1749
|
-
LogoutCircle02Icon,
|
|
1750
|
-
ArrowLeft01Icon as ArrowLeft01Icon2,
|
|
1751
|
-
ArrowRight01Icon as ArrowRight01Icon3,
|
|
1752
|
-
Notification01Icon
|
|
1753
|
-
} from "@hugeicons/core-free-icons";
|
|
1754
|
-
var ButtonSpinner = () => /* @__PURE__ */ React23.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React23.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React23.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
1755
|
-
var formatNotifDate = (d) => {
|
|
1756
|
-
const date = new Date(d);
|
|
1757
|
-
return date.toLocaleDateString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
|
|
1758
|
-
};
|
|
1759
|
-
var UniversalSidebar = ({
|
|
1760
|
-
navItems,
|
|
1761
|
-
currentPath,
|
|
1762
|
-
isMobileOpen,
|
|
1763
|
-
closeMobile,
|
|
1764
|
-
openMobile,
|
|
1765
|
-
onNavClick,
|
|
1766
|
-
userName = "Profile",
|
|
1767
|
-
userTag,
|
|
1768
|
-
userInitials = "U",
|
|
1769
|
-
web3Address,
|
|
1770
|
-
web3Avatar,
|
|
1771
|
-
notifications,
|
|
1772
|
-
unreadNotificationsCount = 0,
|
|
1773
|
-
notificationPage = 1,
|
|
1774
|
-
notificationTotalPages = 1,
|
|
1775
|
-
onNotificationPageChange,
|
|
1776
|
-
onNotificationClick,
|
|
1777
|
-
showBackButton = false,
|
|
1778
|
-
backUrl = "/app",
|
|
1779
|
-
showLogoutAction = false,
|
|
1780
|
-
onLogout,
|
|
1781
|
-
showInterceptDialog = false,
|
|
1782
|
-
onCancelIntercept,
|
|
1783
|
-
onConfirmIntercept,
|
|
1784
|
-
interceptTitle = "Discard Changes",
|
|
1785
|
-
interceptMessage = "Are you sure you want to leave? All unsaved changes will be lost."
|
|
1786
|
-
}) => {
|
|
1787
|
-
const [isCollapsed, setIsCollapsed] = useState12(false);
|
|
1788
|
-
const [showLogoutDialog, setShowLogoutDialog] = useState12(false);
|
|
1789
|
-
const [isLoggingOut, setIsLoggingOut] = useState12(false);
|
|
1790
|
-
const [showNotifDialog, setShowNotifDialog] = useState12(false);
|
|
1791
|
-
const [selectedNotif, setSelectedNotif] = useState12(null);
|
|
1792
|
-
useEffect11(() => {
|
|
1793
|
-
if (isMobileOpen) {
|
|
1794
|
-
closeMobile();
|
|
1795
|
-
}
|
|
1796
|
-
}, [currentPath]);
|
|
1797
|
-
const hasActiveMatch = navItems.some(
|
|
1798
|
-
(item) => item.path === "/mod" || item.path === "/app" ? currentPath === item.path : currentPath === item.path || currentPath?.startsWith(`${item.path}/`)
|
|
1799
|
-
);
|
|
1800
|
-
const handleLogoutInitiation = async () => {
|
|
1801
|
-
if (isLoggingOut || !onLogout) return;
|
|
1802
|
-
setIsLoggingOut(true);
|
|
1803
|
-
try {
|
|
1804
|
-
await onLogout();
|
|
1805
|
-
} catch (error) {
|
|
1806
|
-
setIsLoggingOut(false);
|
|
1807
|
-
setShowLogoutDialog(false);
|
|
1808
|
-
}
|
|
1809
|
-
};
|
|
1810
|
-
const handleCopyWallet = () => {
|
|
1811
|
-
if (web3Address) {
|
|
1812
|
-
navigator.clipboard.writeText(web3Address);
|
|
1813
|
-
toast3.success("Address copied");
|
|
1814
|
-
}
|
|
1815
|
-
};
|
|
1816
|
-
const HeaderActions = () => /* @__PURE__ */ React23.createElement("div", { className: "flex items-center gap-2 pointer-events-auto" }, web3Address && /* @__PURE__ */ React23.createElement(
|
|
1817
|
-
"div",
|
|
1818
|
-
{
|
|
1819
|
-
onClick: handleCopyWallet,
|
|
1820
|
-
className: "flex items-center gap-2 bg-neutral-900 rounded-full p-1 pr-3 cursor-pointer transition-colors",
|
|
1821
|
-
title: "Copy Address"
|
|
1822
|
-
},
|
|
1823
|
-
web3Avatar ? /* @__PURE__ */ React23.createElement("img", { src: web3Avatar, alt: "Avatar", className: "w-6 h-6 rounded-full bg-neutral-800 object-cover shrink-0" }) : /* @__PURE__ */ React23.createElement("div", { className: "w-6 h-6 rounded-full bg-neutral-800 flex items-center justify-center text-[9px] text-white shrink-0" }, userInitials.substring(0, 2)),
|
|
1824
|
-
/* @__PURE__ */ React23.createElement("span", { className: "text-[11px] text-white truncate max-w-20 sm:max-w-37.5" }, web3Address)
|
|
1825
|
-
), notifications !== void 0 && /* @__PURE__ */ React23.createElement(
|
|
1826
|
-
"button",
|
|
1827
|
-
{
|
|
1828
|
-
onClick: () => {
|
|
1829
|
-
setShowNotifDialog(true);
|
|
1830
|
-
setSelectedNotif(null);
|
|
1831
|
-
},
|
|
1832
|
-
className: "relative w-8 h-8 shrink-0 bg-neutral-900 rounded-full flex items-center justify-center text-neutral-400 hover:text-white transition-all duration-300 outline-none"
|
|
1833
|
-
},
|
|
1834
|
-
/* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: Notification01Icon, size: 14 }),
|
|
1835
|
-
unreadNotificationsCount > 0 && /* @__PURE__ */ React23.createElement("span", { className: "absolute top-2 right-2.5 w-2 h-2 bg-blue-500 rounded-full border border-neutral-900" })
|
|
1836
|
-
), showBackButton && /* @__PURE__ */ React23.createElement(
|
|
1837
|
-
Link8,
|
|
1838
|
-
{
|
|
1839
|
-
href: backUrl,
|
|
1840
|
-
className: "w-10 h-10 shrink-0 bg-neutral-900 rounded-full flex items-center justify-center text-neutral-400 hover:text-white transition-all duration-300 outline-none",
|
|
1841
|
-
"aria-label": "Go Back"
|
|
1842
|
-
},
|
|
1843
|
-
/* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: ArrowLeft01Icon2, size: 18 })
|
|
1844
|
-
));
|
|
1845
|
-
return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement("div", { className: "md:hidden fixed top-0 left-0 w-full h-16 bg-black/50 backdrop-blur-md z-40 flex items-center justify-between px-4 " }, /* @__PURE__ */ React23.createElement(
|
|
1846
|
-
"button",
|
|
1847
|
-
{
|
|
1848
|
-
onClick: openMobile,
|
|
1849
|
-
className: `w-10 h-10 bg-neutral-900 rounded-full flex items-center justify-center text-white transition-all duration-300 outline-none ${isMobileOpen ? "opacity-0 pointer-events-none scale-90" : "opacity-100 scale-100"}`,
|
|
1850
|
-
"aria-label": "Open Menu"
|
|
1851
|
-
},
|
|
1852
|
-
/* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: SidebarLeft01Icon, size: 18 })
|
|
1853
|
-
), /* @__PURE__ */ React23.createElement(HeaderActions, null)), /* @__PURE__ */ React23.createElement("div", { className: "hidden md:flex fixed top-0 right-0 w-full backdrop-blur-sm justify-end px-8 pt-6 pb-4 bg-transparent z-40 pointer-events-none" }, /* @__PURE__ */ React23.createElement(HeaderActions, null)), /* @__PURE__ */ React23.createElement(
|
|
1854
|
-
"div",
|
|
1855
|
-
{
|
|
1856
|
-
className: `fixed inset-0 bg-black/60 shadow-2xl transition-opacity duration-300 md:hidden z-90 ${isMobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
|
|
1857
|
-
onClick: closeMobile
|
|
1858
|
-
}
|
|
1859
|
-
), /* @__PURE__ */ React23.createElement(
|
|
1860
|
-
"aside",
|
|
1861
|
-
{
|
|
1862
|
-
className: `
|
|
1863
|
-
fixed md:relative rounded-2xl top-4 md:top-0 md:my-4 left-4 md:left-0 md:ml-4 h-[calc(100dvh-2rem)] bg-neutral-900
|
|
1864
|
-
transition-all duration-300 ease-in-out shrink-0 flex flex-col z-100 md:z-50
|
|
1865
|
-
${isMobileOpen ? "translate-x-0" : "translate-x-[-120%] md:translate-x-0"}
|
|
1866
|
-
${isCollapsed ? "md:w-16 w-64" : "w-64"}
|
|
1867
|
-
`
|
|
1868
|
-
},
|
|
1869
|
-
/* @__PURE__ */ React23.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ React23.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ React23.createElement("div", { className: "w-9 h-9 border border-neutral-700 rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ React23.createElement("h3", { className: "text-[10px] text-white tracking-wider" }, userInitials.substring(0, 2))), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ React23.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ React23.createElement("span", { className: "text-[13px] text-white leading-none truncate tracking-wide mb-1" }, userName), userTag && /* @__PURE__ */ React23.createElement("span", { className: "text-[9px] text-neutral-500 truncate tracking-[0.2em] leading-none " }, userTag))), /* @__PURE__ */ React23.createElement("div", { className: "md:hidden flex shrink-0" }, /* @__PURE__ */ React23.createElement(
|
|
1870
|
-
"button",
|
|
1871
|
-
{
|
|
1872
|
-
onClick: closeMobile,
|
|
1873
|
-
className: "text-neutral-500 hover:text-white transition-colors outline-none",
|
|
1874
|
-
"aria-label": "Close Menu"
|
|
1875
|
-
},
|
|
1876
|
-
/* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: CancelCircleIcon, size: 20 })
|
|
1877
|
-
))),
|
|
1878
|
-
/* @__PURE__ */ React23.createElement("nav", { className: "flex-1 py-2 flex flex-col gap-1.5 px-3 overflow-y-auto custom-scrollbar mt-2" }, navItems.map((item, index) => {
|
|
1879
|
-
const isExactOrSubMatch = item.path === "/mod" || item.path === "/app" ? currentPath === item.path : currentPath === item.path || currentPath?.startsWith(`${item.path}/`);
|
|
1880
|
-
const isCurrentRoute = isExactOrSubMatch || !hasActiveMatch && index === 0;
|
|
1881
|
-
return /* @__PURE__ */ React23.createElement(
|
|
1882
|
-
Link8,
|
|
1883
|
-
{
|
|
1884
|
-
key: item.name,
|
|
1885
|
-
href: item.path,
|
|
1886
|
-
onClick: (e) => onNavClick ? onNavClick(e, item.path) : void 0,
|
|
1887
|
-
className: `flex items-center gap-3 px-3 py-2 rounded-full transition-all outline-none group shrink-0 ${isCurrentRoute ? "bg-neutral-800 text-white" : "text-neutral-400 hover:text-white /50"}`,
|
|
1888
|
-
title: isCollapsed && !isMobileOpen ? item.name : void 0
|
|
1889
|
-
},
|
|
1890
|
-
/* @__PURE__ */ React23.createElement(
|
|
1891
|
-
HugeiconsIcon11,
|
|
1892
|
-
{
|
|
1893
|
-
icon: item.icon,
|
|
1894
|
-
size: 18,
|
|
1895
|
-
className: `shrink-0 transition-colors ${isCurrentRoute ? "text-white" : "text-neutral-500 group-hover:text-white"}`
|
|
1896
|
-
}
|
|
1897
|
-
),
|
|
1898
|
-
(!isCollapsed || isMobileOpen) && /* @__PURE__ */ React23.createElement("span", { className: "text-xs tracking-wide truncate" }, item.name)
|
|
1899
|
-
);
|
|
1900
|
-
})),
|
|
1901
|
-
/* @__PURE__ */ React23.createElement("div", { className: "p-4 shrink-0 flex flex-col gap-2" }, showLogoutAction && /* @__PURE__ */ React23.createElement("div", { className: `flex gap-2 px-1 pb-2 ${isCollapsed && !isMobileOpen ? "flex-col items-center" : "items-center"}` }, /* @__PURE__ */ React23.createElement(
|
|
1902
|
-
"button",
|
|
1903
|
-
{
|
|
1904
|
-
onClick: () => setShowLogoutDialog(true),
|
|
1905
|
-
className: "w-8 h-8 shrink-0 rounded-full bg-neutral-800 flex items-center justify-center text-neutral-400 hover:text-white transition-all outline-none",
|
|
1906
|
-
title: "Secure Logout"
|
|
1907
|
-
},
|
|
1908
|
-
/* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: LogoutCircle02Icon, size: 16 })
|
|
1909
|
-
)), /* @__PURE__ */ React23.createElement("div", { className: "hidden md:block" }, /* @__PURE__ */ React23.createElement(
|
|
1910
|
-
"button",
|
|
1911
|
-
{
|
|
1912
|
-
onClick: () => setIsCollapsed(!isCollapsed),
|
|
1913
|
-
className: "flex items-center justify-center md:justify-start gap-3 w-full p-2.5 rounded-full text-neutral-400 hover:text-white transition-colors outline-none"
|
|
1914
|
-
},
|
|
1915
|
-
/* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-500" }),
|
|
1916
|
-
!isCollapsed && /* @__PURE__ */ React23.createElement("span", { className: "text-xs " }, "Collapse")
|
|
1917
|
-
)))
|
|
1918
|
-
), showNotifDialog && /* @__PURE__ */ React23.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React23.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ React23.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 0 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-[80vh] max-h-[80vh]" }, /* @__PURE__ */ React23.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, selectedNotif ? /* @__PURE__ */ React23.createElement("button", { onClick: () => setSelectedNotif(null), className: "text-neutral-500 hover:text-white transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest " }, /* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: ArrowLeft01Icon2, size: 14 }), " Back") : /* @__PURE__ */ React23.createElement("h3", { className: "text-[15px] text-white tracking-tight " }, "Notifications"), /* @__PURE__ */ React23.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-500 hover:text-white transition-colors outline-none" }, /* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: CancelCircleIcon, size: 18 }))), /* @__PURE__ */ React23.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ React23.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ React23.createElement("h4", { className: "text-[14px] text-white mb-1" }, selectedNotif.title), /* @__PURE__ */ React23.createElement("span", { className: "text-[10px] text-neutral-500 tracking-widest mb-4 block" }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ React23.createElement("p", { className: "text-[12px] text-neutral-400 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ React23.createElement("div", { className: "flex flex-col " }, notifications?.length === 0 ? /* @__PURE__ */ React23.createElement("div", { className: "p-8 text-center text-xs text-neutral-500" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ React23.createElement(
|
|
1919
|
-
"div",
|
|
1920
|
-
{
|
|
1921
|
-
key: notif.id,
|
|
1922
|
-
onClick: () => {
|
|
1923
|
-
setSelectedNotif(notif);
|
|
1924
|
-
onNotificationClick?.(notif);
|
|
1925
|
-
},
|
|
1926
|
-
className: "p-3 flex items-start gap-3 cursor-pointer transition-colors"
|
|
1927
|
-
},
|
|
1928
|
-
/* @__PURE__ */ React23.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ React23.createElement("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full" }) : /* @__PURE__ */ React23.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
|
|
1929
|
-
/* @__PURE__ */ React23.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ React23.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-400" : "text-white"}` }, notif.title), /* @__PURE__ */ React23.createElement("p", { className: "text-[11px] text-neutral-500 truncate mt-0.5" }, notif.message), /* @__PURE__ */ React23.createElement("span", { className: "text-[9px] text-neutral-600 tracking-widest mt-2 block" }, formatNotifDate(notif.createdAt)))
|
|
1930
|
-
)))), !selectedNotif && /* @__PURE__ */ React23.createElement("div", { className: "p-4 flex items-center justify-between shrink-0" }, /* @__PURE__ */ React23.createElement("span", { className: "text-[10px] text-neutral-500 tracking-widest " }, "Page ", notificationPage, " of ", notificationTotalPages === 0 ? 1 : notificationTotalPages), /* @__PURE__ */ React23.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React23.createElement(
|
|
1931
|
-
"button",
|
|
1932
|
-
{
|
|
1933
|
-
disabled: notificationPage <= 1,
|
|
1934
|
-
onClick: () => onNotificationPageChange?.(notificationPage - 1),
|
|
1935
|
-
className: "w-7 h-7 flex items-center justify-center rounded-full border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none hover:text-white transition-colors"
|
|
1936
|
-
},
|
|
1937
|
-
/* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: ArrowLeft01Icon2, size: 12 })
|
|
1938
|
-
), /* @__PURE__ */ React23.createElement(
|
|
1939
|
-
"button",
|
|
1940
|
-
{
|
|
1941
|
-
disabled: notificationPage >= notificationTotalPages || notificationTotalPages === 0,
|
|
1942
|
-
onClick: () => onNotificationPageChange?.(notificationPage + 1),
|
|
1943
|
-
className: "w-7 h-7 flex items-center justify-center rounded-full border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none hover:text-white transition-colors"
|
|
1944
|
-
},
|
|
1945
|
-
/* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: ArrowRight01Icon3, size: 12 })
|
|
1946
|
-
))))), showLogoutDialog && showLogoutAction && /* @__PURE__ */ React23.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React23.createElement(
|
|
1947
|
-
"div",
|
|
1948
|
-
{
|
|
1949
|
-
className: "absolute inset-0 bg-black/60",
|
|
1950
|
-
onClick: () => !isLoggingOut && setShowLogoutDialog(false)
|
|
1951
|
-
}
|
|
1952
|
-
), /* @__PURE__ */ React23.createElement("div", { className: "relative w-72 bg-neutral-900 rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React23.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React23.createElement("h3", { className: "text-[17px] text-white tracking-tight mb-1" }, "Secure Logout"), /* @__PURE__ */ React23.createElement("p", { className: "text-[11px] text-neutral-400 leading-snug mt-2" }, "Are you sure you want to log out? You will need to authenticate to return.")), /* @__PURE__ */ React23.createElement("div", { className: "w-full flex " }, /* @__PURE__ */ React23.createElement(
|
|
1953
|
-
"button",
|
|
1954
|
-
{
|
|
1955
|
-
onClick: () => setShowLogoutDialog(false),
|
|
1956
|
-
disabled: isLoggingOut,
|
|
1957
|
-
className: "flex-1 py-3 text-[13px] text-neutral-400 hover:text-white transition-colors disabled:opacity-50 outline-none"
|
|
1958
|
-
},
|
|
1959
|
-
"Cancel"
|
|
1960
|
-
), /* @__PURE__ */ React23.createElement(
|
|
1961
|
-
"button",
|
|
1962
|
-
{
|
|
1963
|
-
onClick: handleLogoutInitiation,
|
|
1964
|
-
disabled: isLoggingOut,
|
|
1965
|
-
className: "flex-1 py-3 text-[13px] text-red-400 hover:text-red-300 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
|
|
1966
|
-
},
|
|
1967
|
-
isLoggingOut ? /* @__PURE__ */ React23.createElement(ButtonSpinner, null) : "Log Out"
|
|
1968
|
-
)))), showInterceptDialog && /* @__PURE__ */ React23.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React23.createElement(
|
|
1969
|
-
"div",
|
|
1970
|
-
{
|
|
1971
|
-
className: "absolute inset-0 bg-black/60",
|
|
1972
|
-
onClick: onCancelIntercept
|
|
1973
|
-
}
|
|
1974
|
-
), /* @__PURE__ */ React23.createElement("div", { className: "relative w-72 bg-neutral-900 rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React23.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React23.createElement("h3", { className: "text-[17px] text-white tracking-tight mb-1" }, interceptTitle), /* @__PURE__ */ React23.createElement("p", { className: "text-[11px] text-neutral-400 leading-snug mt-2" }, interceptMessage)), /* @__PURE__ */ React23.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React23.createElement(
|
|
1975
|
-
"button",
|
|
1976
|
-
{
|
|
1977
|
-
onClick: onCancelIntercept,
|
|
1978
|
-
className: "flex-1 py-3 text-[13px] text-neutral-400 hover:text-white transition-colors outline-none"
|
|
1979
|
-
},
|
|
1980
|
-
"Cancel"
|
|
1981
|
-
), /* @__PURE__ */ React23.createElement(
|
|
1982
|
-
"button",
|
|
1983
|
-
{
|
|
1984
|
-
onClick: onConfirmIntercept,
|
|
1985
|
-
className: "flex-1 py-3 text-[13px] text-white transition-colors flex justify-center items-center outline-none"
|
|
1986
|
-
},
|
|
1987
|
-
"Leave"
|
|
1988
|
-
)))));
|
|
1989
|
-
};
|
|
1990
|
-
|
|
1991
|
-
// src/components/UniversalOrganizationPage.tsx
|
|
1992
|
-
import React25, { useState as useState14, useEffect as useEffect12 } from "react";
|
|
1993
|
-
import toast4 from "react-hot-toast";
|
|
1994
|
-
|
|
1995
|
-
// src/components/Banner.tsx
|
|
1996
|
-
import React24, { useState as useState13 } from "react";
|
|
1997
|
-
import { HugeiconsIcon as HugeiconsIcon12 } from "@hugeicons/react";
|
|
1998
|
-
import {
|
|
1999
|
-
Alert02Icon,
|
|
2000
|
-
CheckmarkBadge01Icon,
|
|
2001
|
-
InformationCircleIcon,
|
|
2002
|
-
Cancel01Icon
|
|
2003
|
-
} from "@hugeicons/core-free-icons";
|
|
2004
|
-
var Banner = ({
|
|
2005
|
-
title,
|
|
2006
|
-
message,
|
|
2007
|
-
type,
|
|
2008
|
-
icon,
|
|
2009
|
-
isDismissible = true,
|
|
2010
|
-
onDismiss,
|
|
2011
|
-
action
|
|
2012
|
-
}) => {
|
|
2013
|
-
const [isVisible, setIsVisible] = useState13(true);
|
|
2014
|
-
if (!isVisible) return null;
|
|
2015
|
-
const handleDismiss = () => {
|
|
2016
|
-
setIsVisible(false);
|
|
2017
|
-
if (onDismiss) onDismiss();
|
|
2018
|
-
};
|
|
2019
|
-
const config = {
|
|
2020
|
-
success: {
|
|
2021
|
-
bg: "bg-emerald-50",
|
|
2022
|
-
iconColor: "text-emerald-600",
|
|
2023
|
-
titleColor: "text-emerald-900",
|
|
2024
|
-
msgColor: "text-emerald-700",
|
|
2025
|
-
defaultIcon: CheckmarkBadge01Icon,
|
|
2026
|
-
closeHover: "hover:bg-emerald-100 text-emerald-500"
|
|
2027
|
-
},
|
|
2028
|
-
warning: {
|
|
2029
|
-
bg: "bg-amber-50",
|
|
2030
|
-
iconColor: "text-amber-600",
|
|
2031
|
-
titleColor: "text-amber-900",
|
|
2032
|
-
msgColor: "text-amber-700",
|
|
2033
|
-
defaultIcon: InformationCircleIcon,
|
|
2034
|
-
closeHover: "hover:bg-amber-100 text-amber-500"
|
|
2035
|
-
},
|
|
2036
|
-
alert: {
|
|
2037
|
-
bg: "bg-red-50",
|
|
2038
|
-
iconColor: "text-red-600",
|
|
2039
|
-
titleColor: "text-red-900",
|
|
2040
|
-
msgColor: "text-red-700",
|
|
2041
|
-
defaultIcon: Alert02Icon,
|
|
2042
|
-
closeHover: "hover:bg-red-100 text-red-500"
|
|
2043
|
-
}
|
|
2044
|
-
};
|
|
2045
|
-
const currentConfig = config[type];
|
|
2046
|
-
const IconToUse = icon || currentConfig.defaultIcon;
|
|
2047
|
-
return /* @__PURE__ */ React24.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ React24.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, /* @__PURE__ */ React24.createElement("h4", { className: `text-sm tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ React24.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ React24.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ React24.createElement(
|
|
2048
|
-
"button",
|
|
2049
|
-
{
|
|
2050
|
-
onClick: handleDismiss,
|
|
2051
|
-
className: `absolute top-3 right-3 p-1.5 rounded-full transition-colors outline-none shrink-0 ${currentConfig.closeHover}`,
|
|
2052
|
-
"aria-label": "Dismiss banner"
|
|
2053
|
-
},
|
|
2054
|
-
/* @__PURE__ */ React24.createElement(HugeiconsIcon12, { icon: Cancel01Icon, size: 16 })
|
|
2055
|
-
));
|
|
2056
|
-
};
|
|
2057
|
-
|
|
2058
|
-
// src/components/UniversalOrganizationPage.tsx
|
|
2059
|
-
import { HugeiconsIcon as HugeiconsIcon13 } from "@hugeicons/react";
|
|
2060
|
-
import {
|
|
2061
|
-
CircleLock02Icon
|
|
2062
|
-
} from "@hugeicons/core-free-icons";
|
|
2063
|
-
var InputSpinner3 = () => /* @__PURE__ */ React25.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React25.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React25.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
2064
|
-
var UniversalOrganizationPage = ({
|
|
2065
|
-
initialOrgName,
|
|
2066
|
-
initialSlug,
|
|
2067
|
-
initialUsername,
|
|
2068
|
-
orgId,
|
|
2069
|
-
isReadOnly = false,
|
|
2070
|
-
slugPrefixUrl = ".aeona.eth",
|
|
2071
|
-
bannerProps,
|
|
2072
|
-
onSaveConfiguration,
|
|
2073
|
-
onCheckSlugAvailability
|
|
2074
|
-
}) => {
|
|
2075
|
-
const resolvedInitialUsername = initialUsername || initialSlug;
|
|
2076
|
-
const [web3Name, setWeb3Name] = useState14(initialOrgName);
|
|
2077
|
-
const [username, setUsername] = useState14(resolvedInitialUsername);
|
|
2078
|
-
const [slug, setSlug] = useState14(initialSlug);
|
|
2079
|
-
const [isCheckingSlug, setIsCheckingSlug] = useState14(false);
|
|
2080
|
-
const [slugAvailable, setSlugAvailable] = useState14(null);
|
|
2081
|
-
const [isSubmitting, setIsSubmitting] = useState14(false);
|
|
2082
|
-
useEffect12(() => {
|
|
2083
|
-
setWeb3Name(initialOrgName || "");
|
|
2084
|
-
setSlug(initialSlug || "");
|
|
2085
|
-
setUsername(initialUsername || initialSlug || "");
|
|
2086
|
-
}, [initialOrgName, initialSlug, initialUsername]);
|
|
2087
|
-
const handleWeb3NameChange = (val) => {
|
|
2088
|
-
setWeb3Name(val.replace(/[^a-zA-Z0-9\s-]/g, "").substring(0, 50));
|
|
2089
|
-
};
|
|
2090
|
-
const handleUsernameChange = (val) => {
|
|
2091
|
-
setUsername(val.toLowerCase().replace(/[^a-z0-9-]/g, "").substring(0, 30));
|
|
2092
|
-
};
|
|
2093
|
-
const handleSlugChange = (val) => {
|
|
2094
|
-
setSlug(val.toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/-+/g, "-").substring(0, 50));
|
|
2095
|
-
};
|
|
2096
|
-
useEffect12(() => {
|
|
2097
|
-
if (!slug || slug === initialSlug) {
|
|
2098
|
-
setSlugAvailable(null);
|
|
2099
|
-
setIsCheckingSlug(false);
|
|
2100
|
-
return;
|
|
2101
|
-
}
|
|
2102
|
-
if (slug.length < 3) {
|
|
2103
|
-
setSlugAvailable(false);
|
|
2104
|
-
setIsCheckingSlug(false);
|
|
2105
|
-
return;
|
|
2106
|
-
}
|
|
2107
|
-
setIsCheckingSlug(true);
|
|
2108
|
-
setSlugAvailable(null);
|
|
2109
|
-
const checkTimer = setTimeout(async () => {
|
|
2110
|
-
try {
|
|
2111
|
-
const res = await onCheckSlugAvailability(slug);
|
|
2112
|
-
setSlugAvailable(res.available);
|
|
2113
|
-
} catch (error) {
|
|
2114
|
-
setSlugAvailable(null);
|
|
2115
|
-
} finally {
|
|
2116
|
-
setIsCheckingSlug(false);
|
|
2117
|
-
}
|
|
2118
|
-
}, 1500);
|
|
2119
|
-
return () => clearTimeout(checkTimer);
|
|
2120
|
-
}, [slug, initialSlug, onCheckSlugAvailability]);
|
|
2121
|
-
const handleSave = async (e) => {
|
|
2122
|
-
e.preventDefault();
|
|
2123
|
-
if (isSubmitting || isCheckingSlug || isReadOnly) return;
|
|
2124
|
-
if (slug !== initialSlug && slugAvailable === false) {
|
|
2125
|
-
toast4.error("Please select an available profile address handles.");
|
|
2126
|
-
return;
|
|
2127
|
-
}
|
|
2128
|
-
setIsSubmitting(true);
|
|
2129
|
-
try {
|
|
2130
|
-
const payload = {
|
|
2131
|
-
organizationId: orgId,
|
|
2132
|
-
organizationName: web3Name !== initialOrgName ? web3Name : void 0,
|
|
2133
|
-
slug: slug !== initialSlug ? slug : void 0,
|
|
2134
|
-
username: username !== resolvedInitialUsername ? username : void 0
|
|
2135
|
-
};
|
|
2136
|
-
const responseData = await onSaveConfiguration(payload);
|
|
2137
|
-
if (responseData.success) {
|
|
2138
|
-
toast4.success("Web3 profile identity updated successfully.");
|
|
2139
|
-
setTimeout(() => window.location.reload(), 1e3);
|
|
2140
|
-
} else {
|
|
2141
|
-
toast4.error(responseData.error || "Failed to update your identity profile.");
|
|
2142
|
-
setIsSubmitting(false);
|
|
2143
|
-
}
|
|
2144
|
-
} catch (error) {
|
|
2145
|
-
toast4.error("Service unavailable. Try again later.");
|
|
2146
|
-
setIsSubmitting(false);
|
|
2147
|
-
}
|
|
2148
|
-
};
|
|
2149
|
-
const hasChanges = web3Name !== initialOrgName || slug !== initialSlug || username !== resolvedInitialUsername;
|
|
2150
|
-
const isSaveDisabled = isSubmitting || isReadOnly || isCheckingSlug || !hasChanges || web3Name.length < 3 || slug.length < 3 || username.length < 3 || slug !== initialSlug && slugAvailable === false;
|
|
2151
|
-
return /* @__PURE__ */ React25.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-5xl rounded-2xl p-6 bg-neutral-900 fade-in duration-300" }, /* @__PURE__ */ React25.createElement(ManagedToaster, null), /* @__PURE__ */ React25.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement("h1", { className: "text-white text-xl mb-1 tracking-tight" }, "Public Profile"), /* @__PURE__ */ React25.createElement("p", { className: "text-xs text-neutral-400" }, "Manage your financial payment handle identifiers and global public cryptographic signature identity details.")), isReadOnly && /* @__PURE__ */ React25.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-800 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: CircleLock02Icon, size: 18, className: "text-current" }))), bannerProps && /* @__PURE__ */ React25.createElement(Banner, { ...bannerProps }), /* @__PURE__ */ React25.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React25.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React25.createElement(
|
|
2152
|
-
TextInput,
|
|
2153
|
-
{
|
|
2154
|
-
label: "Display Name",
|
|
2155
|
-
value: web3Name,
|
|
2156
|
-
onChange: handleWeb3NameChange,
|
|
2157
|
-
disabled: isReadOnly || isSubmitting,
|
|
2158
|
-
placeholder: "Sovereign User",
|
|
2159
|
-
maxLength: 50
|
|
2160
|
-
}
|
|
2161
|
-
), /* @__PURE__ */ React25.createElement(
|
|
2162
|
-
TextInput,
|
|
2163
|
-
{
|
|
2164
|
-
label: "Digital Identity",
|
|
2165
|
-
value: username,
|
|
2166
|
-
onChange: handleUsernameChange,
|
|
2167
|
-
disabled: isReadOnly || isSubmitting,
|
|
2168
|
-
placeholder: "sovereignuser",
|
|
2169
|
-
maxLength: 30
|
|
2170
|
-
}
|
|
2171
|
-
), /* @__PURE__ */ React25.createElement("div", { className: "space-y-2 relative w-full" }, /* @__PURE__ */ React25.createElement("label", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block" }, "Wallet Username"), /* @__PURE__ */ React25.createElement("div", { className: "flex items-center relative w-full border-b border-neutral-800 focus-within:border-white transition-all" }, /* @__PURE__ */ React25.createElement(
|
|
2172
|
-
"input",
|
|
2173
|
-
{
|
|
2174
|
-
type: "text",
|
|
2175
|
-
value: slug,
|
|
2176
|
-
disabled: isReadOnly || isSubmitting,
|
|
2177
|
-
onChange: (e) => handleSlugChange(e.target.value),
|
|
2178
|
-
spellCheck: "false",
|
|
2179
|
-
autoComplete: "off",
|
|
2180
|
-
className: "w-full px-2 py-3 text-sm bg-transparent text-white outline-none disabled:opacity-50 disabled:cursor-not-allowed",
|
|
2181
|
-
placeholder: "sovereign-user-handle"
|
|
2182
|
-
}
|
|
2183
|
-
), /* @__PURE__ */ React25.createElement("span", { className: "text-neutral-500 text-sm py-3 pr-8 shrink-0 whitespace-nowrap" }, slugPrefixUrl), /* @__PURE__ */ React25.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ React25.createElement(InputSpinner3, null), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ React25.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-900/50" }, /* @__PURE__ */ React25.createElement("svg", { className: "w-2 h-2 text-red-500", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React25.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === true && /* @__PURE__ */ React25.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-900/50" }, /* @__PURE__ */ React25.createElement("svg", { className: "w-2 h-2 text-green-500", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React25.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ React25.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ React25.createElement(
|
|
2184
|
-
ThreeDActionButton,
|
|
2185
|
-
{
|
|
2186
|
-
type: "submit",
|
|
2187
|
-
disabled: isSaveDisabled,
|
|
2188
|
-
isLoading: isSubmitting,
|
|
2189
|
-
className: "min-w-32"
|
|
2190
|
-
},
|
|
2191
|
-
"Save Changes"
|
|
2192
|
-
), hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ React25.createElement(
|
|
2193
|
-
"button",
|
|
2194
|
-
{
|
|
2195
|
-
type: "button",
|
|
2196
|
-
onClick: () => {
|
|
2197
|
-
setWeb3Name(initialOrgName);
|
|
2198
|
-
setSlug(initialSlug);
|
|
2199
|
-
setUsername(resolvedInitialUsername);
|
|
2200
|
-
},
|
|
2201
|
-
className: "text-[11px] tracking-widest text-neutral-500 hover:text-white transition-colors outline-none"
|
|
2202
|
-
},
|
|
2203
|
-
"Cancel"
|
|
2204
|
-
)))));
|
|
2205
|
-
};
|
|
2206
|
-
|
|
2207
|
-
// src/components/UniversalProfileSettings.tsx
|
|
2208
|
-
import React26, { useState as useState15, useEffect as useEffect13 } from "react";
|
|
2209
|
-
import toast5 from "react-hot-toast";
|
|
2210
|
-
import { HugeiconsIcon as HugeiconsIcon14 } from "@hugeicons/react";
|
|
2211
|
-
import {
|
|
2212
|
-
CircleLock02Icon as CircleLock02Icon2,
|
|
2213
|
-
CancelCircleIcon as CancelCircleIcon2,
|
|
2214
|
-
Loading03Icon as Loading03Icon5,
|
|
2215
|
-
LockKeyIcon
|
|
2216
|
-
} from "@hugeicons/core-free-icons";
|
|
2217
|
-
var UniversalProfileSettings = ({
|
|
2218
|
-
initialFirstName,
|
|
2219
|
-
initialLastName,
|
|
2220
|
-
email,
|
|
2221
|
-
accountStatus = "GOOD",
|
|
2222
|
-
memberSince,
|
|
2223
|
-
isReadOnly = false,
|
|
2224
|
-
bannerProps,
|
|
2225
|
-
hasPin = false,
|
|
2226
|
-
isPinLoading = false,
|
|
2227
|
-
onSavePin,
|
|
2228
|
-
onSaveProfile
|
|
2229
|
-
}) => {
|
|
2230
|
-
const [firstName, setFirstName] = useState15(initialFirstName);
|
|
2231
|
-
const [lastName, setLastName] = useState15(initialLastName);
|
|
2232
|
-
const [isSubmitting, setIsSubmitting] = useState15(false);
|
|
2233
|
-
const [isPinModalOpen, setIsPinModalOpen] = useState15(false);
|
|
2234
|
-
const [oldPin, setOldPin] = useState15("");
|
|
2235
|
-
const [newPin, setNewPin] = useState15("");
|
|
2236
|
-
const [confirmPin, setConfirmPin] = useState15("");
|
|
2237
|
-
const [isPinSubmitting, setIsPinSubmitting] = useState15(false);
|
|
2238
|
-
useEffect13(() => {
|
|
2239
|
-
setFirstName(initialFirstName || "");
|
|
2240
|
-
setLastName(initialLastName || "");
|
|
2241
|
-
}, [initialFirstName, initialLastName]);
|
|
2242
|
-
const handleFirstNameChange = (val) => {
|
|
2243
|
-
setFirstName(val.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50));
|
|
2244
|
-
};
|
|
2245
|
-
const handleLastNameChange = (val) => {
|
|
2246
|
-
setLastName(val.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50));
|
|
2247
|
-
};
|
|
2248
|
-
const handleSave = async (e) => {
|
|
2249
|
-
e.preventDefault();
|
|
2250
|
-
if (isSubmitting || isReadOnly) return;
|
|
2251
|
-
setIsSubmitting(true);
|
|
2252
|
-
try {
|
|
2253
|
-
const res = await onSaveProfile({ firstName, lastName });
|
|
2254
|
-
if (res.success) {
|
|
2255
|
-
toast5.success("Profile updated successfully.");
|
|
2256
|
-
setTimeout(() => window.location.reload(), 1e3);
|
|
2257
|
-
} else {
|
|
2258
|
-
toast5.error(res.error || "Uh oh! Something went wrong.");
|
|
2259
|
-
setIsSubmitting(false);
|
|
2260
|
-
}
|
|
2261
|
-
} catch (error) {
|
|
2262
|
-
toast5.error("Uh oh! Something went wrong.");
|
|
2263
|
-
setIsSubmitting(false);
|
|
2264
|
-
}
|
|
2265
|
-
};
|
|
2266
|
-
const closePinModal = () => {
|
|
2267
|
-
if (isPinSubmitting) return;
|
|
2268
|
-
setIsPinModalOpen(false);
|
|
2269
|
-
setOldPin("");
|
|
2270
|
-
setNewPin("");
|
|
2271
|
-
setConfirmPin("");
|
|
2272
|
-
};
|
|
2273
|
-
const handlePinInput = (val, setter) => {
|
|
2274
|
-
setter(val.replace(/\D/g, "").substring(0, 4));
|
|
2275
|
-
};
|
|
2276
|
-
const handlePinSubmit = async (e) => {
|
|
2277
|
-
e.preventDefault();
|
|
2278
|
-
if (!onSavePin) return;
|
|
2279
|
-
if (hasPin && oldPin.length !== 4) return toast5.error("Old PIN must be exactly 4 digits.");
|
|
2280
|
-
if (newPin.length !== 4) return toast5.error("New PIN must be exactly 4 digits.");
|
|
2281
|
-
if (newPin !== confirmPin) return toast5.error("New PINs do not match.");
|
|
2282
|
-
setIsPinSubmitting(true);
|
|
2283
|
-
try {
|
|
2284
|
-
const action = hasPin ? "change_pin" : "create_pin";
|
|
2285
|
-
const res = await onSavePin({
|
|
2286
|
-
action,
|
|
2287
|
-
oldPin: hasPin ? oldPin : void 0,
|
|
2288
|
-
newPin
|
|
2289
|
-
});
|
|
2290
|
-
if (res.success) {
|
|
2291
|
-
toast5.success(res.message || "PIN updated successfully.");
|
|
2292
|
-
closePinModal();
|
|
2293
|
-
} else {
|
|
2294
|
-
toast5.error(res.error || "Failed to update PIN.");
|
|
2295
|
-
}
|
|
2296
|
-
} catch (error) {
|
|
2297
|
-
toast5.error("Uh oh! Something went wrong.");
|
|
2298
|
-
} finally {
|
|
2299
|
-
setIsPinSubmitting(false);
|
|
2300
|
-
}
|
|
2301
|
-
};
|
|
2302
|
-
const hasChanges = firstName !== initialFirstName || lastName !== initialLastName;
|
|
2303
|
-
const isSaveDisabled = isSubmitting || isReadOnly || !hasChanges || firstName.trim().length === 0 || lastName.trim().length === 0;
|
|
2304
|
-
return /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col max-w-5xl rounded-2xl p-6 bg-neutral-900 gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ React26.createElement(ManagedToaster, null), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React26.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React26.createElement("h1", { className: "text-white text-xl mb-1 truncate tracking-tight" }, "Personal Settings"), /* @__PURE__ */ React26.createElement("p", { className: "text-xs text-neutral-400 truncate" }, "Manage your personal account profile.")), isReadOnly && /* @__PURE__ */ React26.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-800 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: CircleLock02Icon2, size: 18, className: "text-current" }))), bannerProps && /* @__PURE__ */ React26.createElement(Banner, { ...bannerProps }), /* @__PURE__ */ React26.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React26.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ React26.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React26.createElement(
|
|
2305
|
-
TextInput,
|
|
2306
|
-
{
|
|
2307
|
-
label: "First Name",
|
|
2308
|
-
value: firstName,
|
|
2309
|
-
onChange: handleFirstNameChange,
|
|
2310
|
-
disabled: isReadOnly || isSubmitting,
|
|
2311
|
-
placeholder: "System"
|
|
2312
|
-
}
|
|
2313
|
-
)), /* @__PURE__ */ React26.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React26.createElement(
|
|
2314
|
-
TextInput,
|
|
2315
|
-
{
|
|
2316
|
-
label: "Last Name",
|
|
2317
|
-
value: lastName,
|
|
2318
|
-
onChange: handleLastNameChange,
|
|
2319
|
-
disabled: isReadOnly || isSubmitting,
|
|
2320
|
-
placeholder: "Admin"
|
|
2321
|
-
}
|
|
2322
|
-
))), /* @__PURE__ */ React26.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ React26.createElement(
|
|
2323
|
-
TextInput,
|
|
2324
|
-
{
|
|
2325
|
-
label: "Email ID",
|
|
2326
|
-
value: email,
|
|
2327
|
-
onChange: () => {
|
|
2328
|
-
},
|
|
2329
|
-
disabled: true
|
|
2330
|
-
}
|
|
2331
|
-
), /* @__PURE__ */ React26.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 truncate" }, "To change your email address, please contact support.")), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4" }, /* @__PURE__ */ React26.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ React26.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React26.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Account Status"), /* @__PURE__ */ React26.createElement("span", { className: "text-xs text-white block truncate" }, accountStatus)), /* @__PURE__ */ React26.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React26.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em] block truncate" }, "Member Since"), /* @__PURE__ */ React26.createElement("span", { className: "text-xs text-white block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A")), /* @__PURE__ */ React26.createElement("div", { className: "min-w-0 pl-4" }, /* @__PURE__ */ React26.createElement(
|
|
2332
|
-
"button",
|
|
2333
|
-
{
|
|
2334
|
-
type: "button",
|
|
2335
|
-
onClick: () => setIsPinModalOpen(true),
|
|
2336
|
-
"aria-label": "PIN Settings",
|
|
2337
|
-
className: "w-9 h-9 flex items-center justify-center border border-neutral-700 rounded-full text-white transition-colors outline-none"
|
|
2338
|
-
},
|
|
2339
|
-
/* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: LockKeyIcon, size: 17, className: "text-white" })
|
|
2340
|
-
))), /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col-reverse sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto shrink-0" }, hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ React26.createElement(
|
|
2341
|
-
"button",
|
|
2342
|
-
{
|
|
2343
|
-
type: "button",
|
|
2344
|
-
onClick: () => {
|
|
2345
|
-
setFirstName(initialFirstName);
|
|
2346
|
-
setLastName(initialLastName);
|
|
2347
|
-
},
|
|
2348
|
-
className: "text-[11px] tracking-widest text-neutral-500 hover:text-white transition-colors w-full sm:w-auto py-2 sm:py-0 outline-none"
|
|
2349
|
-
},
|
|
2350
|
-
"Cancel"
|
|
2351
|
-
), /* @__PURE__ */ React26.createElement(
|
|
2352
|
-
ThreeDActionButton,
|
|
2353
|
-
{
|
|
2354
|
-
type: "submit",
|
|
2355
|
-
disabled: isSaveDisabled,
|
|
2356
|
-
isLoading: isSubmitting,
|
|
2357
|
-
className: "min-w-32 w-full sm:w-auto"
|
|
2358
|
-
},
|
|
2359
|
-
"Save Changes"
|
|
2360
|
-
))))), isPinModalOpen && /* @__PURE__ */ React26.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React26.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: closePinModal }), /* @__PURE__ */ React26.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React26.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React26.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, hasPin ? "Change PIN" : "Create PIN"), /* @__PURE__ */ React26.createElement("button", { onClick: closePinModal, disabled: isPinSubmitting, className: "text-neutral-500 hover:text-white transition-colors outline-none disabled:opacity-50" }, /* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React26.createElement("div", { className: "p-6" }, isPinLoading ? /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col items-center justify-center py-10" }, /* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: Loading03Icon5, size: 28, className: "animate-spin text-neutral-500 mb-4" })) : /* @__PURE__ */ React26.createElement("form", { onSubmit: handlePinSubmit, className: "flex flex-col gap-6" }, hasPin && /* @__PURE__ */ React26.createElement(
|
|
2361
|
-
TextInput,
|
|
2362
|
-
{
|
|
2363
|
-
type: "password",
|
|
2364
|
-
label: "Old PIN",
|
|
2365
|
-
maxLength: 4,
|
|
2366
|
-
disabled: isPinSubmitting,
|
|
2367
|
-
value: oldPin,
|
|
2368
|
-
onChange: (val) => handlePinInput(val, setOldPin),
|
|
2369
|
-
placeholder: "\u2022\u2022\u2022\u2022"
|
|
2370
|
-
}
|
|
2371
|
-
), /* @__PURE__ */ React26.createElement(
|
|
2372
|
-
TextInput,
|
|
2373
|
-
{
|
|
2374
|
-
type: "password",
|
|
2375
|
-
label: hasPin ? "New PIN" : "Enter 4-Digit PIN",
|
|
2376
|
-
maxLength: 4,
|
|
2377
|
-
disabled: isPinSubmitting,
|
|
2378
|
-
value: newPin,
|
|
2379
|
-
onChange: (val) => handlePinInput(val, setNewPin),
|
|
2380
|
-
placeholder: "\u2022\u2022\u2022\u2022"
|
|
2381
|
-
}
|
|
2382
|
-
), /* @__PURE__ */ React26.createElement(
|
|
2383
|
-
TextInput,
|
|
2384
|
-
{
|
|
2385
|
-
type: "password",
|
|
2386
|
-
label: "Retype New PIN",
|
|
2387
|
-
maxLength: 4,
|
|
2388
|
-
disabled: isPinSubmitting,
|
|
2389
|
-
value: confirmPin,
|
|
2390
|
-
onChange: (val) => handlePinInput(val, setConfirmPin),
|
|
2391
|
-
placeholder: "\u2022\u2022\u2022\u2022"
|
|
2392
|
-
}
|
|
2393
|
-
), /* @__PURE__ */ React26.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React26.createElement(
|
|
2394
|
-
ThreeDActionButton,
|
|
2395
|
-
{
|
|
2396
|
-
type: "submit",
|
|
2397
|
-
disabled: isPinSubmitting || newPin.length !== 4 || confirmPin.length !== 4 || hasPin && oldPin.length !== 4,
|
|
2398
|
-
isLoading: isPinSubmitting,
|
|
2399
|
-
className: "w-full py-3"
|
|
2400
|
-
},
|
|
2401
|
-
hasPin ? "Update PIN" : "Set PIN"
|
|
2402
|
-
)))))));
|
|
2403
|
-
};
|
|
2404
|
-
|
|
2405
|
-
// src/components/UniversalErrorView.tsx
|
|
2406
|
-
import React27 from "react";
|
|
2407
|
-
import { HugeiconsIcon as HugeiconsIcon15 } from "@hugeicons/react";
|
|
2408
|
-
import { ConfusedIcon } from "@hugeicons/core-free-icons";
|
|
2409
|
-
var UniversalErrorView = ({
|
|
2410
|
-
isBooting,
|
|
2411
|
-
isLoading,
|
|
2412
|
-
activeData,
|
|
2413
|
-
activeError,
|
|
2414
|
-
envName,
|
|
2415
|
-
onRetry,
|
|
2416
|
-
returnUrl = "/app",
|
|
2417
|
-
returnLabel = "Return to Workspace"
|
|
2418
|
-
}) => {
|
|
2419
|
-
if (isBooting || isLoading && !activeData) {
|
|
2420
|
-
return /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-center h-screen w-full bg-black" }, /* @__PURE__ */ React27.createElement(PageSpinner, null));
|
|
2421
|
-
}
|
|
2422
|
-
if (!isLoading && (!activeData || activeError)) {
|
|
2423
|
-
const errorString = typeof activeError === "string" ? activeError : JSON.stringify(activeError || "");
|
|
2424
|
-
const errorMsg = errorString.toLowerCase();
|
|
2425
|
-
const isPermissionError = errorMsg.includes("forbidden") || errorMsg.includes("unauthorized") || errorMsg.includes("permission");
|
|
2426
|
-
const isNetworkError = errorMsg.includes("network") || errorMsg.includes("connection") || errorMsg.includes("fetch");
|
|
2427
|
-
const isNotFoundError = errorMsg.includes("not found") || errorMsg.includes("404") || errorMsg.includes("does not exist") || !activeData && !isPermissionError && !isNetworkError;
|
|
2428
|
-
const apiMessage = typeof activeError === "string" && activeError.trim() !== "" ? activeError : null;
|
|
2429
|
-
let title = "Oops Connection Error";
|
|
2430
|
-
let description = apiMessage || `We could not load your request. Please check your connection and try again.`;
|
|
2431
|
-
let IconComponent = ConfusedIcon;
|
|
2432
|
-
if (isNotFoundError) {
|
|
2433
|
-
title = "Oops its not your fault";
|
|
2434
|
-
description = apiMessage || `We could not reach the ${envName} you just loaded. Our team has been notified.`;
|
|
2435
|
-
} else if (isPermissionError) {
|
|
2436
|
-
title = "Access Restricted";
|
|
2437
|
-
description = apiMessage || `You have insufficient permissions to view this ${envName}. Please contact your administrator.`;
|
|
2438
|
-
}
|
|
2439
|
-
return /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-full px-4 bg-black animate-in fade-in duration-500" }, /* @__PURE__ */ React27.createElement("div", { className: "mb-4 flex justify-center" }, /* @__PURE__ */ React27.createElement(HugeiconsIcon15, { icon: IconComponent, size: 48, className: "text-neutral-600" })), /* @__PURE__ */ React27.createElement("h2", { className: "text-lg text-white tracking-tight" }, title), /* @__PURE__ */ React27.createElement("p", { className: "text-xs mt-2 mb-8 text-neutral-400 max-w-sm text-center leading-relaxed" }, description), /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full justify-center sm:w-auto" }, isNotFoundError || isPermissionError ? /* @__PURE__ */ React27.createElement(
|
|
2440
|
-
"button",
|
|
2441
|
-
{
|
|
2442
|
-
onClick: () => window.location.href = returnUrl,
|
|
2443
|
-
className: "px-6 py-2 text-white border border-neutral-700 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
|
|
2444
|
-
},
|
|
2445
|
-
returnLabel
|
|
2446
|
-
) : (
|
|
2447
|
-
// Soft errors (Network timeouts) allow them to retry or optionally retreat
|
|
2448
|
-
/* @__PURE__ */ React27.createElement(React27.Fragment, null, envName.toLowerCase().includes("application") && /* @__PURE__ */ React27.createElement(
|
|
2449
|
-
"button",
|
|
2450
|
-
{
|
|
2451
|
-
onClick: () => window.location.href = returnUrl,
|
|
2452
|
-
className: "px-6 py-2 bg-transparent border border-neutral-700 text-neutral-400 hover:text-white rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
|
|
2453
|
-
},
|
|
2454
|
-
"Back Home"
|
|
2455
|
-
), /* @__PURE__ */ React27.createElement(
|
|
2456
|
-
"button",
|
|
2457
|
-
{
|
|
2458
|
-
onClick: onRetry,
|
|
2459
|
-
className: "px-6 py-2 bg-white text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize"
|
|
2460
|
-
},
|
|
2461
|
-
"Refresh ",
|
|
2462
|
-
envName
|
|
2463
|
-
))
|
|
2464
|
-
)));
|
|
2465
|
-
}
|
|
2466
|
-
return null;
|
|
2467
|
-
};
|
|
2468
|
-
|
|
2469
|
-
// src/components/UniversalTransactionPage.tsx
|
|
2470
|
-
import React28, { useState as useState16, useEffect as useEffect14, useRef as useRef10 } from "react";
|
|
2471
|
-
import { HugeiconsIcon as HugeiconsIcon16 } from "@hugeicons/react";
|
|
2472
|
-
import toast6 from "react-hot-toast";
|
|
2473
|
-
import {
|
|
2474
|
-
ArrowLeft01Icon as ArrowLeft01Icon3,
|
|
2475
|
-
ArrowRight01Icon as ArrowRight01Icon4,
|
|
2476
|
-
Loading03Icon as Loading03Icon6,
|
|
2477
|
-
ArrowDownRight01Icon,
|
|
2478
|
-
ArrowUpRight01Icon,
|
|
2479
|
-
Search01Icon,
|
|
2480
|
-
SearchList02Icon,
|
|
2481
|
-
ListSettingIcon,
|
|
2482
|
-
CancelCircleIcon as CancelCircleIcon3
|
|
2483
|
-
} from "@hugeicons/core-free-icons";
|
|
2484
|
-
var PageSpinner2 = () => /* @__PURE__ */ React28.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: Loading03Icon6, size: 32, className: "animate-spin mb-4 text-white" }));
|
|
2485
|
-
var formatDate = (dateInput) => {
|
|
2486
|
-
const d = new Date(dateInput);
|
|
2487
|
-
const day = d.getDate();
|
|
2488
|
-
const month = d.toLocaleString("en-US", { month: "short" });
|
|
2489
|
-
const year = d.getFullYear();
|
|
2490
|
-
return `${day} ${month} ${year}`;
|
|
2491
|
-
};
|
|
2492
|
-
var formatTime = (dateInput) => {
|
|
2493
|
-
return new Date(dateInput).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
|
|
2494
|
-
};
|
|
2495
|
-
var truncateAddress = (address) => {
|
|
2496
|
-
if (!address || address.length < 12) return address;
|
|
2497
|
-
return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
|
|
2498
|
-
};
|
|
2499
|
-
var UniversalTransactionPage = ({
|
|
2500
|
-
headerTitle,
|
|
2501
|
-
headerDescription,
|
|
2502
|
-
hideControls = false,
|
|
2503
|
-
hideBalanceAmounts = false,
|
|
2504
|
-
hidePagination = false,
|
|
2505
|
-
transactions,
|
|
2506
|
-
isLoading,
|
|
2507
|
-
currentPage,
|
|
2508
|
-
totalPages,
|
|
2509
|
-
onPageChange,
|
|
2510
|
-
searchQuery,
|
|
2511
|
-
onSearchChange,
|
|
2512
|
-
activeDirectionFilter,
|
|
2513
|
-
onDirectionFilterChange,
|
|
2514
|
-
activeTypeFilter,
|
|
2515
|
-
onTypeFilterChange,
|
|
2516
|
-
onReportTransaction,
|
|
2517
|
-
onGenerateReceipt
|
|
2518
|
-
}) => {
|
|
2519
|
-
const [selectedTransaction, setSelectedTransaction] = useState16(null);
|
|
2520
|
-
const [isGeneratingReceipt, setIsGeneratingReceipt] = useState16(false);
|
|
2521
|
-
const [localSearchQuery, setLocalSearchQuery] = useState16(searchQuery);
|
|
2522
|
-
const [isTyping, setIsTyping] = useState16(false);
|
|
2523
|
-
const [isDirectionModalOpen, setIsDirectionModalOpen] = useState16(false);
|
|
2524
|
-
const [isTypeModalOpen, setIsTypeModalOpen] = useState16(false);
|
|
2525
|
-
const directionDropdownRef = useRef10(null);
|
|
2526
|
-
const typeDropdownRef = useRef10(null);
|
|
2527
|
-
useEffect14(() => {
|
|
2528
|
-
function handleClickOutside(event) {
|
|
2529
|
-
if (directionDropdownRef.current && !directionDropdownRef.current.contains(event.target)) {
|
|
2530
|
-
setIsDirectionModalOpen(false);
|
|
2531
|
-
}
|
|
2532
|
-
if (typeDropdownRef.current && !typeDropdownRef.current.contains(event.target)) {
|
|
2533
|
-
setIsTypeModalOpen(false);
|
|
2534
|
-
}
|
|
2535
|
-
}
|
|
2536
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
2537
|
-
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2538
|
-
}, []);
|
|
2539
|
-
useEffect14(() => {
|
|
2540
|
-
setIsTyping(true);
|
|
2541
|
-
const handler = setTimeout(() => {
|
|
2542
|
-
onSearchChange(localSearchQuery);
|
|
2543
|
-
setIsTyping(false);
|
|
2544
|
-
}, 600);
|
|
2545
|
-
return () => clearTimeout(handler);
|
|
2546
|
-
}, [localSearchQuery, onSearchChange]);
|
|
2547
|
-
useEffect14(() => {
|
|
2548
|
-
if (searchQuery === "" && localSearchQuery !== "") {
|
|
2549
|
-
setLocalSearchQuery("");
|
|
2550
|
-
}
|
|
2551
|
-
}, [searchQuery]);
|
|
2552
|
-
const getDisplayName = (tx) => {
|
|
2553
|
-
if (tx.metadata?.merchantName) return tx.metadata.merchantName;
|
|
2554
|
-
if (tx.metadata?.description) return tx.metadata.description;
|
|
2555
|
-
return tx.type === "CARD_TRANSACTION" ? "Card Transaction" : "Wallet Transaction";
|
|
2556
|
-
};
|
|
2557
|
-
const handleGenerateReceipt = async () => {
|
|
2558
|
-
if (!onGenerateReceipt || !selectedTransaction) return;
|
|
2559
|
-
setIsGeneratingReceipt(true);
|
|
2560
|
-
try {
|
|
2561
|
-
await onGenerateReceipt(selectedTransaction);
|
|
2562
|
-
toast6.success("Receipt generated successfully.");
|
|
2563
|
-
} catch (error) {
|
|
2564
|
-
toast6.error("Failed to generate receipt.");
|
|
2565
|
-
} finally {
|
|
2566
|
-
setIsGeneratingReceipt(false);
|
|
2567
|
-
}
|
|
2568
|
-
};
|
|
2569
|
-
const isListLoading = isLoading || isTyping;
|
|
2570
|
-
return /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-6 animate-in max-w-5xl fade-in duration-300" }, !hideControls && /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React28.createElement("div", { className: "relative w-full sm:w-96" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: Search01Icon, size: 16, className: "text-neutral-500" })), /* @__PURE__ */ React28.createElement(
|
|
2571
|
-
"input",
|
|
2572
|
-
{
|
|
2573
|
-
type: "text",
|
|
2574
|
-
placeholder: "Search reference or amount...",
|
|
2575
|
-
value: localSearchQuery,
|
|
2576
|
-
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
2577
|
-
className: "w-full pl-10 pr-4 py-2 border border-neutral-800 rounded-full text-[13px] text-white placeholder-neutral-500 outline-none transition-colors focus:border-neutral-600"
|
|
2578
|
-
}
|
|
2579
|
-
)), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-3 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0" }, /* @__PURE__ */ React28.createElement(
|
|
2580
|
-
"button",
|
|
2581
|
-
{
|
|
2582
|
-
onClick: () => setIsDirectionModalOpen(true),
|
|
2583
|
-
className: "flex items-center gap-2 whitespace-nowrap border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white transition-colors outline-none"
|
|
2584
|
-
},
|
|
2585
|
-
/* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: SearchList02Icon, size: 12 }),
|
|
2586
|
-
activeDirectionFilter === "ALL" ? "Payment Type" : activeDirectionFilter
|
|
2587
|
-
), /* @__PURE__ */ React28.createElement(
|
|
2588
|
-
"button",
|
|
2589
|
-
{
|
|
2590
|
-
onClick: () => setIsTypeModalOpen(true),
|
|
2591
|
-
className: "flex items-center gap-2 whitespace-nowrap border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white transition-colors outline-none"
|
|
2592
|
-
},
|
|
2593
|
-
/* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: ListSettingIcon, size: 14 }),
|
|
2594
|
-
activeTypeFilter === "ALL" ? "All Transactions" : activeTypeFilter.replace("_", " ")
|
|
2595
|
-
))), /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-neutral-900 w-full" }, /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h1", { className: "text-white text-xl mb-1 tracking-tight" }, headerTitle), headerDescription && /* @__PURE__ */ React28.createElement("p", { className: "text-xs text-neutral-400" }, headerDescription))), /* @__PURE__ */ React28.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ React28.createElement(PageSpinner2, null) : /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React28.createElement("div", null, transactions.length === 0 ? /* @__PURE__ */ React28.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center" }, "No transactions found") : transactions.map((tx) => /* @__PURE__ */ React28.createElement(
|
|
2596
|
-
"div",
|
|
2597
|
-
{
|
|
2598
|
-
key: tx.id,
|
|
2599
|
-
onClick: () => setSelectedTransaction(tx),
|
|
2600
|
-
className: "flex items-center justify-between py-4 /50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
|
|
2601
|
-
},
|
|
2602
|
-
/* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React28.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-700 text-white` }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: tx.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ React28.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React28.createElement("p", { className: "text-[13px] text-white truncate" }, getDisplayName(tx)), /* @__PURE__ */ React28.createElement("p", { className: `text-[13px] text-neutral-400 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
|
|
2603
|
-
/* @__PURE__ */ React28.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] text-neutral-500" }, formatDate(tx.createdAt)), /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] text-neutral-500 capitalize" }, tx.direction.toLowerCase()))
|
|
2604
|
-
))), !hidePagination && /* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-between pt-6 mt-2" }, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] text-neutral-500 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React28.createElement(
|
|
2605
|
-
"button",
|
|
2606
|
-
{
|
|
2607
|
-
onClick: () => onPageChange(currentPage - 1),
|
|
2608
|
-
disabled: currentPage <= 1 || isListLoading,
|
|
2609
|
-
className: "p-2 border border-neutral-800 rounded-full text-neutral-500 hover:text-white hover:border-neutral-600 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
2610
|
-
},
|
|
2611
|
-
/* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: ArrowLeft01Icon3, size: 14 })
|
|
2612
|
-
), /* @__PURE__ */ React28.createElement(
|
|
2613
|
-
"button",
|
|
2614
|
-
{
|
|
2615
|
-
onClick: () => onPageChange(currentPage + 1),
|
|
2616
|
-
disabled: currentPage >= totalPages || isListLoading || totalPages === 0,
|
|
2617
|
-
className: "p-2 border border-neutral-800 rounded-full text-neutral-500 hover:text-white hover:border-neutral-600 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
2618
|
-
},
|
|
2619
|
-
/* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: ArrowRight01Icon4, size: 14 })
|
|
2620
|
-
)))))), selectedTransaction && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ React28.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, "Details"), /* @__PURE__ */ React28.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-500 hover:text-white transition-colors outline-none" }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: CancelCircleIcon3, size: 18 }))), /* @__PURE__ */ React28.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ React28.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-700 text-white` }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ React28.createElement("h2", { className: `text-2xl text-white mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React28.createElement("span", { className: "text-[9px] tracking-widest text-neutral-400 px-4 py-1.5 rounded-full border border-neutral-800" }, selectedTransaction.status)), /* @__PURE__ */ React28.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Reference ID"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white break-all" }, selectedTransaction.reference)), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Date & Time"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Transaction Type"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Flow Direction"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Transfer Route"), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-2 text-[13px] text-white" }, /* @__PURE__ */ React28.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ React28.createElement("span", { className: "text-neutral-500" }, "\u2192"), /* @__PURE__ */ React28.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
|
|
2621
|
-
if (key === "fromAddress" || key === "toAddress") return null;
|
|
2622
|
-
if (value === null || value === void 0 || typeof value === "object") return null;
|
|
2623
|
-
const formattedKey = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
|
|
2624
|
-
return /* @__PURE__ */ React28.createElement("div", { key }, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, formattedKey), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white break-all" }, String(value)));
|
|
2625
|
-
})), /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React28.createElement(
|
|
2626
|
-
ThreeDActionButton,
|
|
2627
|
-
{
|
|
2628
|
-
onClick: handleGenerateReceipt,
|
|
2629
|
-
isLoading: isGeneratingReceipt,
|
|
2630
|
-
className: "w-full py-3 text-[14px]"
|
|
2631
|
-
},
|
|
2632
|
-
"Generate Receipt"
|
|
2633
|
-
), /* @__PURE__ */ React28.createElement(
|
|
2634
|
-
"button",
|
|
2635
|
-
{
|
|
2636
|
-
onClick: () => onReportTransaction && onReportTransaction(selectedTransaction),
|
|
2637
|
-
className: "w-full flex items-center font-medium justify-center py-2.5 rounded-full border border-neutral-700 text-white transition-colors outline-none text-[13px] tracking-wide mt-2"
|
|
2638
|
-
},
|
|
2639
|
-
"Report Transaction"
|
|
2640
|
-
), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ React28.createElement(
|
|
2641
|
-
"a",
|
|
2642
|
-
{
|
|
2643
|
-
href: `https://basescan.org/tx/${selectedTransaction.reference}`,
|
|
2644
|
-
target: "_blank",
|
|
2645
|
-
rel: "noopener noreferrer",
|
|
2646
|
-
className: "w-full flex items-center font-medium justify-center py-2.5 rounded-full border border-neutral-700 text-white transition-colors outline-none text-[13px] tracking-wide mt-2"
|
|
2647
|
-
},
|
|
2648
|
-
"View in block explorer"
|
|
2649
|
-
))))), isDirectionModalOpen && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ React28.createElement("div", { ref: directionDropdownRef, className: "relative w-72 bg-neutral-900 shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React28.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-[14px] text-white tracking-tight" }, "Payment Type")), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ React28.createElement(
|
|
2650
|
-
"button",
|
|
2651
|
-
{
|
|
2652
|
-
key: option,
|
|
2653
|
-
onClick: () => {
|
|
2654
|
-
onDirectionFilterChange(option);
|
|
2655
|
-
setIsDirectionModalOpen(false);
|
|
2656
|
-
},
|
|
2657
|
-
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-800 text-white" : "text-neutral-400 hover:text-white"}`
|
|
2658
|
-
},
|
|
2659
|
-
/* @__PURE__ */ React28.createElement("span", { className: "truncate pr-2" }, option.charAt(0).toUpperCase() + option.slice(1).toLowerCase())
|
|
2660
|
-
))), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React28.createElement(
|
|
2661
|
-
"button",
|
|
2662
|
-
{
|
|
2663
|
-
onClick: () => setIsDirectionModalOpen(false),
|
|
2664
|
-
className: "w-full py-3 text-[13px] text-neutral-500 hover:text-white transition-colors outline-none"
|
|
2665
|
-
},
|
|
2666
|
-
"Cancel"
|
|
2667
|
-
)))), isTypeModalOpen && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ React28.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-neutral-900 shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React28.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-[14px] text-white tracking-tight" }, "Transactions Type")), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
|
|
2668
|
-
{ label: "All Transactions", value: "ALL" },
|
|
2669
|
-
{ label: "Wallet Transactions", value: "WALLET_TRANSACTION" },
|
|
2670
|
-
{ label: "Card Transactions", value: "CARD_TRANSACTION" }
|
|
2671
|
-
].map((option) => /* @__PURE__ */ React28.createElement(
|
|
2672
|
-
"button",
|
|
2673
|
-
{
|
|
2674
|
-
key: option.value,
|
|
2675
|
-
onClick: () => {
|
|
2676
|
-
onTypeFilterChange(option.value);
|
|
2677
|
-
setIsTypeModalOpen(false);
|
|
2678
|
-
},
|
|
2679
|
-
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-800 text-white" : "text-neutral-400 hover:text-white"}`
|
|
2680
|
-
},
|
|
2681
|
-
/* @__PURE__ */ React28.createElement("span", { className: "truncate pr-2" }, option.label.charAt(0).toUpperCase() + option.label.slice(1).toLowerCase())
|
|
2682
|
-
))), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React28.createElement(
|
|
2683
|
-
"button",
|
|
2684
|
-
{
|
|
2685
|
-
onClick: () => setIsTypeModalOpen(false),
|
|
2686
|
-
className: "w-full py-3 text-[13px] text-neutral-500 hover:text-white transition-colors outline-none"
|
|
2687
|
-
},
|
|
2688
|
-
"Cancel"
|
|
2689
|
-
)))));
|
|
2690
|
-
};
|
|
2691
|
-
|
|
2692
|
-
// src/components/UniversalHomeView.tsx
|
|
2693
|
-
import React29, { useState as useState17, useEffect as useEffect15 } from "react";
|
|
2694
|
-
import { HugeiconsIcon as HugeiconsIcon17 } from "@hugeicons/react";
|
|
2695
|
-
import { ViewOffSlashIcon, ViewIcon } from "@hugeicons/core-free-icons";
|
|
2696
|
-
var UniversalHomeView = ({
|
|
2697
|
-
balanceLabel = "Your Balance",
|
|
2698
|
-
balanceAmount,
|
|
2699
|
-
balanceCurrency = "$",
|
|
2700
|
-
primaryAction,
|
|
2701
|
-
secondaryAction,
|
|
2702
|
-
quickActionsTitle = "Quick Actions",
|
|
2703
|
-
quickActions = [],
|
|
2704
|
-
transactionsProps
|
|
2705
|
-
}) => {
|
|
2706
|
-
const [displayAmount, setDisplayAmount] = useState17("0.00");
|
|
2707
|
-
const [isBalanceHidden, setIsBalanceHidden] = useState17(false);
|
|
2708
|
-
useEffect15(() => {
|
|
2709
|
-
const target = parseFloat(balanceAmount.replace(/,/g, ""));
|
|
2710
|
-
if (isNaN(target)) {
|
|
2711
|
-
setDisplayAmount(balanceAmount);
|
|
2712
|
-
return;
|
|
2713
|
-
}
|
|
2714
|
-
let startTimestamp = null;
|
|
2715
|
-
const duration = 1e3;
|
|
2716
|
-
const step = (timestamp) => {
|
|
2717
|
-
if (!startTimestamp) startTimestamp = timestamp;
|
|
2718
|
-
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
|
2719
|
-
const easeProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
|
|
2720
|
-
const currentCount = easeProgress * target;
|
|
2721
|
-
setDisplayAmount(currentCount.toLocaleString("en-US", {
|
|
2722
|
-
minimumFractionDigits: 2,
|
|
2723
|
-
maximumFractionDigits: 2
|
|
2724
|
-
}));
|
|
2725
|
-
if (progress < 1) {
|
|
2726
|
-
requestAnimationFrame(step);
|
|
2727
|
-
} else {
|
|
2728
|
-
setDisplayAmount(target.toLocaleString("en-US", {
|
|
2729
|
-
minimumFractionDigits: 2,
|
|
2730
|
-
maximumFractionDigits: 2
|
|
2731
|
-
}));
|
|
2732
|
-
}
|
|
2733
|
-
};
|
|
2734
|
-
requestAnimationFrame(step);
|
|
2735
|
-
}, [balanceAmount]);
|
|
2736
|
-
const [intPart, decPart] = displayAmount.includes(".") ? displayAmount.split(".") : [displayAmount, "00"];
|
|
2737
|
-
const silverBg = `linear-gradient(110deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0.1) 60%, rgba(255,255,255,0.6) 80%, rgba(0,0,0,0.2) 100%), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2MDAnIGhlaWdodD0nODAnPjxmaWx0ZXIgaWQ9J2JydXNoZWQnIHg9JzAlJyB5PScwJScgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAuMDA1IDAuOCcgbnVtT2N0YXZlcz0nNCcgc2VlZD0nNScgcmVzdWx0PSdub2lzZScvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnIHJlc3VsdD0nbW9ubycvPjxmZUNvbXBvbmVudFRyYW5zZmVyIHJlc3VsdD0nYWRqdXN0ZWQnPjxmZUZ1bmNSIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAuNCcgaW50ZXJjZXB0PScwLjMnLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScwLjQnIGludGVyY2VwdD0nMC4zJy8+PGZlRnVuY0IgdHlwZT0nbGluZWFyJyBzbG9wZT0nMC40JyBpbnRlcmNlcHQ9JzAuMycvPjxmZUZ1bmNBIHR5cGU9J2xpbmVhcicgc2xvcGU9JzAuMTUnIGludGVyY2VwdD0nMCcvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPScjZDFkNWRiJy8+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2JydXNoZWQpJyBvcGFjaXR5PScwLjgnLz48L3N2Zz4=")`;
|
|
2738
|
-
const silverShadowBase = "inset 0 1px 2px rgba(255,255,255,1), inset 0 -2px 3px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.5)";
|
|
2739
|
-
const silverShadowHover = "inset 0 1px 2px rgba(255,255,255,1), inset 0 -2px 3px rgba(0,0,0,0.3), 0 6px 14px rgba(0,0,0,0.7)";
|
|
2740
|
-
const silverShadowActive = "inset 0 2px 4px rgba(0,0,0,0.4), inset 0 -1px 2px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.3)";
|
|
2741
|
-
return /* @__PURE__ */ React29.createElement("div", { className: "w-full max-w-5xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React29.createElement("div", { className: "relative flex items-start justify-between w-full pt-4 pb-8" }, /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col items-start text-left z-10 w-full" }, /* @__PURE__ */ React29.createElement("div", { className: "flex items-center gap-2 mb-1.5" }, /* @__PURE__ */ React29.createElement("span", { className: "text-[12px] sm:text-[13px] text-neutral-400" }, balanceLabel), /* @__PURE__ */ React29.createElement(
|
|
2742
|
-
"button",
|
|
2743
|
-
{
|
|
2744
|
-
onClick: () => setIsBalanceHidden(!isBalanceHidden),
|
|
2745
|
-
className: "text-neutral-500 hover:text-white transition-colors outline-none"
|
|
2746
|
-
},
|
|
2747
|
-
/* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: isBalanceHidden ? ViewIcon : ViewOffSlashIcon, size: 14 })
|
|
2748
|
-
)), /* @__PURE__ */ React29.createElement("h1", { className: `text-3xl sm:text-4xl md:text-5xl text-white tracking-tight mb-5 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ React29.createElement("span", { className: "text-xl sm:text-2xl text-neutral-500 mr-1" }, balanceCurrency), intPart, /* @__PURE__ */ React29.createElement("span", { className: "text-xl sm:text-2xl text-neutral-500" }, ".", decPart)), /* @__PURE__ */ React29.createElement("div", { className: "flex items-center gap-3" }, primaryAction && /* @__PURE__ */ React29.createElement(
|
|
2749
|
-
"button",
|
|
2750
|
-
{
|
|
2751
|
-
onClick: primaryAction.onClick,
|
|
2752
|
-
className: "relative inline-flex items-center justify-center gap-1.5 px-8 py-2 rounded-full text-black transition-all duration-150 select-none outline-none overflow-hidden active:translate-y-0.5",
|
|
2753
|
-
style: {
|
|
2754
|
-
backgroundImage: silverBg,
|
|
2755
|
-
backgroundSize: "cover",
|
|
2756
|
-
backgroundPosition: "center",
|
|
2757
|
-
boxShadow: silverShadowBase,
|
|
2758
|
-
textShadow: "0 1px 1px rgba(255,255,255,0.6)"
|
|
2759
|
-
},
|
|
2760
|
-
onMouseEnter: (e) => {
|
|
2761
|
-
e.currentTarget.style.boxShadow = silverShadowHover;
|
|
2762
|
-
e.currentTarget.style.transform = "translateY(-1px)";
|
|
2763
|
-
},
|
|
2764
|
-
onMouseLeave: (e) => {
|
|
2765
|
-
e.currentTarget.style.boxShadow = silverShadowBase;
|
|
2766
|
-
e.currentTarget.style.transform = "translateY(0px)";
|
|
2767
|
-
},
|
|
2768
|
-
onMouseDown: (e) => {
|
|
2769
|
-
e.currentTarget.style.boxShadow = silverShadowActive;
|
|
2770
|
-
e.currentTarget.style.transform = "translateY(2px)";
|
|
2771
|
-
},
|
|
2772
|
-
onMouseUp: (e) => {
|
|
2773
|
-
e.currentTarget.style.transform = "translateY(-1px)";
|
|
2774
|
-
}
|
|
2775
|
-
},
|
|
2776
|
-
/* @__PURE__ */ React29.createElement("span", { className: "absolute inset-0 bg-linear-to-r from-white/30 to-transparent pointer-events-none" }),
|
|
2777
|
-
/* @__PURE__ */ React29.createElement("span", { className: "relative z-10 flex items-center gap-1.5 leading-none text-[13px] tracking-wide font-medium drop-shadow-[0_1px_1px_rgba(255,255,255,0.8)]" }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: primaryAction.icon, size: 16 }))
|
|
2778
|
-
), secondaryAction && /* @__PURE__ */ React29.createElement(
|
|
2779
|
-
"button",
|
|
2780
|
-
{
|
|
2781
|
-
onClick: secondaryAction.onClick,
|
|
2782
|
-
className: "flex items-center gap-1.5 px-8 py-2 rounded-full border border-neutral-800 text-white transition-colors outline-none"
|
|
2783
|
-
},
|
|
2784
|
-
/* @__PURE__ */ React29.createElement("span", { className: "text-[13px] tracking-wide" }, secondaryAction.label),
|
|
2785
|
-
secondaryAction.icon && /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: secondaryAction.icon, size: 16 })
|
|
2786
|
-
)))), quickActions && quickActions.length > 0 && /* @__PURE__ */ React29.createElement("div", { className: "w-full mb-8 z-10" }, /* @__PURE__ */ React29.createElement("h3", { className: "text-xl text-white mb-4 px-1 tracking-tight" }, quickActionsTitle), /* @__PURE__ */ React29.createElement("div", { className: "grid grid-cols-4 gap-2 sm:gap-3 w-full" }, quickActions.slice(0, 4).map((action) => /* @__PURE__ */ React29.createElement(
|
|
2787
|
-
"button",
|
|
2788
|
-
{
|
|
2789
|
-
key: action.id,
|
|
2790
|
-
onClick: action.onClick,
|
|
2791
|
-
className: `w-full h-23.75 sm:h-28.75 rounded-2xl border border-neutral-800 p-2.5 sm:p-3 flex flex-col justify-between items-start cursor-pointer active:scale-[0.98] transition-all outline-none`
|
|
2792
|
-
},
|
|
2793
|
-
/* @__PURE__ */ React29.createElement("div", { className: `w-7 h-7 sm:w-9 sm:h-9 rounded-full flex items-center justify-center border border-neutral-800 text-white}` }, /* @__PURE__ */ React29.createElement("div", { className: "scale-75 sm:scale-100 text-white flex items-center justify-center" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: action.icon, size: 18 }))),
|
|
2794
|
-
/* @__PURE__ */ React29.createElement("span", { className: "text-[10px] sm:text-[12px] text-neutral-300 text-left leading-[1.2] whitespace-pre-line mt-1" }, action.label)
|
|
2795
|
-
)))), /* @__PURE__ */ React29.createElement("div", { className: "w-full" }, /* @__PURE__ */ React29.createElement(
|
|
2796
|
-
UniversalTransactionPage,
|
|
2797
|
-
{
|
|
2798
|
-
...transactionsProps,
|
|
2799
|
-
hideControls: true,
|
|
2800
|
-
hideBalanceAmounts: isBalanceHidden,
|
|
2801
|
-
hidePagination: true
|
|
2802
|
-
}
|
|
2803
|
-
)));
|
|
2804
|
-
};
|
|
2805
|
-
|
|
2806
|
-
// src/components/UniversalWalletPage.tsx
|
|
2807
|
-
import React30, { useState as useState18 } from "react";
|
|
2808
|
-
import { HugeiconsIcon as HugeiconsIcon18 } from "@hugeicons/react";
|
|
2809
|
-
import {
|
|
2810
|
-
Search01Icon as Search01Icon2,
|
|
2811
|
-
CancelCircleIcon as CancelCircleIcon4,
|
|
2812
|
-
Loading03Icon as Loading03Icon7
|
|
2813
|
-
} from "@hugeicons/core-free-icons";
|
|
2814
|
-
var PageSpinner3 = () => /* @__PURE__ */ React30.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React30.createElement(HugeiconsIcon18, { icon: Loading03Icon7, size: 32, className: "animate-spin mb-4 text-white" }));
|
|
2815
|
-
var WalletLogo = ({ src, alt, sizeClass = "w-10 h-10" }) => {
|
|
2816
|
-
const [isLoaded, setIsLoaded] = useState18(false);
|
|
2817
|
-
return /* @__PURE__ */ React30.createElement("div", { className: `relative shrink-0 rounded-full bg-black flex items-center justify-center overflow-hidden ${sizeClass}` }, !isLoaded && /* @__PURE__ */ React30.createElement(HugeiconsIcon18, { icon: Loading03Icon7, size: 16, className: "animate-spin text-neutral-600 absolute" }), /* @__PURE__ */ React30.createElement(
|
|
2818
|
-
"img",
|
|
2819
|
-
{
|
|
2820
|
-
src,
|
|
2821
|
-
alt,
|
|
2822
|
-
onLoad: () => setIsLoaded(true),
|
|
2823
|
-
className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`
|
|
2824
|
-
}
|
|
2825
|
-
));
|
|
2826
|
-
};
|
|
2827
|
-
var UniversalWalletPage = ({
|
|
2828
|
-
headerTitle,
|
|
2829
|
-
headerDescription,
|
|
2830
|
-
hideControls = false,
|
|
2831
|
-
hideBalanceAmounts = false,
|
|
2832
|
-
isGeneratingStatement = false,
|
|
2833
|
-
wallets,
|
|
2834
|
-
isLoading = false,
|
|
2835
|
-
renderQrCode,
|
|
2836
|
-
onDownloadPayId,
|
|
2837
|
-
onCopyAddress
|
|
2838
|
-
}) => {
|
|
2839
|
-
const [selectedWallet, setSelectedWallet] = useState18(null);
|
|
2840
|
-
const [localSearchQuery, setLocalSearchQuery] = useState18("");
|
|
2841
|
-
const [showToast, setShowToast] = useState18(false);
|
|
2842
|
-
const filteredWallets = wallets.filter((wallet) => {
|
|
2843
|
-
const q = localSearchQuery.toLowerCase();
|
|
2844
|
-
return wallet.name.toLowerCase().includes(q) || wallet.currency.toLowerCase().includes(q) || wallet.network.toLowerCase().includes(q);
|
|
2845
|
-
});
|
|
2846
|
-
const handleCopy = (wallet) => {
|
|
2847
|
-
if (onCopyAddress) onCopyAddress(wallet);
|
|
2848
|
-
if (typeof navigator !== "undefined" && navigator.clipboard) {
|
|
2849
|
-
navigator.clipboard.writeText(wallet.address).catch(() => {
|
|
2850
|
-
});
|
|
2851
|
-
}
|
|
2852
|
-
setShowToast(true);
|
|
2853
|
-
setTimeout(() => setShowToast(false), 2500);
|
|
2854
|
-
};
|
|
2855
|
-
return /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col gap-6 animate-in max-w-5xl fade-in duration-300" }, !hideControls && /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React30.createElement("div", { className: "relative w-full sm:w-96" }, /* @__PURE__ */ React30.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React30.createElement(HugeiconsIcon18, { icon: Search01Icon2, size: 16, className: "text-neutral-500" })), /* @__PURE__ */ React30.createElement(
|
|
2856
|
-
"input",
|
|
2857
|
-
{
|
|
2858
|
-
type: "text",
|
|
2859
|
-
placeholder: "Search wallets by name or network...",
|
|
2860
|
-
value: localSearchQuery,
|
|
2861
|
-
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
2862
|
-
className: "w-full pl-10 pr-4 py-2 border border-neutral-800 rounded-full text-[13px] text-white placeholder-neutral-500 outline-none transition-colors focus:border-neutral-600"
|
|
2863
|
-
}
|
|
2864
|
-
))), /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-neutral-900 w-full" }, /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("h1", { className: "text-white text-xl mb-1 tracking-tight" }, headerTitle), headerDescription && /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-neutral-400" }, headerDescription))), /* @__PURE__ */ React30.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ React30.createElement(PageSpinner3, null) : /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React30.createElement("div", null, filteredWallets.length === 0 ? /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center" }, "No wallets found") : filteredWallets.map((wallet) => /* @__PURE__ */ React30.createElement(
|
|
2865
|
-
"div",
|
|
2866
|
-
{
|
|
2867
|
-
key: wallet.id,
|
|
2868
|
-
onClick: () => setSelectedWallet(wallet),
|
|
2869
|
-
className: "flex items-center justify-between py-4 /50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
|
|
2870
|
-
},
|
|
2871
|
-
/* @__PURE__ */ React30.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React30.createElement(WalletLogo, { src: wallet.logoSrc, alt: wallet.name }), /* @__PURE__ */ React30.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React30.createElement("p", { className: "text-[13px] text-white truncate font-medium" }, wallet.name), /* @__PURE__ */ React30.createElement("p", { className: `text-[13px] text-neutral-400 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, wallet.balance, " ", wallet.currency))),
|
|
2872
|
-
/* @__PURE__ */ React30.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React30.createElement("span", { className: "text-[10px] tracking-wide text-neutral-400 bg-neutral-800 px-2.5 py-1 rounded-full " }, wallet.network))
|
|
2873
|
-
)))))), selectedWallet && /* @__PURE__ */ React30.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React30.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => {
|
|
2874
|
-
setSelectedWallet(null);
|
|
2875
|
-
setShowToast(false);
|
|
2876
|
-
} }), /* @__PURE__ */ React30.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, showToast && /* @__PURE__ */ React30.createElement("div", { className: "absolute top-4 left-1/2 -translate-x-1/2 z-50 bg-neutral-800 text-white px-5 py-2.5 rounded-full text-[12px] font-medium tracking-wide shadow-xl animate-in slide-in-from-top-4 fade-in duration-200 pointer-events-none whitespace-nowrap" }, "Address copied to clipboard"), /* @__PURE__ */ React30.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React30.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, "Wallet Details"), /* @__PURE__ */ React30.createElement("button", { onClick: () => {
|
|
2877
|
-
setSelectedWallet(null);
|
|
2878
|
-
setShowToast(false);
|
|
2879
|
-
}, className: "text-neutral-500 hover:text-white transition-colors outline-none" }, /* @__PURE__ */ React30.createElement(HugeiconsIcon18, { icon: CancelCircleIcon4, size: 18 }))), /* @__PURE__ */ React30.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-2" }, /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ React30.createElement(WalletLogo, { src: selectedWallet.logoSrc, alt: selectedWallet.name, sizeClass: "w-14 h-14 mb-4" }), /* @__PURE__ */ React30.createElement("h2", { className: `text-2xl text-white mb-2 transition-all duration-300 font-medium ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedWallet.balance, " ", selectedWallet.currency), /* @__PURE__ */ React30.createElement("span", { className: "text-[9px] tracking-widest text-neutral-400 px-4 py-1.5 rounded-full border border-neutral-800 uppercase mt-1" }, selectedWallet.network, " NETWORK")), renderQrCode && /* @__PURE__ */ React30.createElement("div", { className: "w-full flex justify-center mb-6" }, renderQrCode(selectedWallet)), /* @__PURE__ */ React30.createElement("div", { className: "grid grid-cols-1 gap-y-6 gap-x-4 mb-10" }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Wallet Address"), /* @__PURE__ */ React30.createElement("span", { className: "text-[13px] text-white break-all font-medium" }, selectedWallet.address)), /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Wallet Name"), /* @__PURE__ */ React30.createElement("span", { className: "text-[13px] text-white" }, selectedWallet.name))), /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React30.createElement(
|
|
2880
|
-
ThreeDActionButton,
|
|
2881
|
-
{
|
|
2882
|
-
onClick: () => onDownloadPayId && onDownloadPayId(selectedWallet),
|
|
2883
|
-
isLoading: isGeneratingStatement,
|
|
2884
|
-
className: "w-full py-3 text-[13px]"
|
|
2885
|
-
},
|
|
2886
|
-
"Generate Statement"
|
|
2887
|
-
), /* @__PURE__ */ React30.createElement(
|
|
2888
|
-
"button",
|
|
2889
|
-
{
|
|
2890
|
-
onClick: () => handleCopy(selectedWallet),
|
|
2891
|
-
className: "w-full flex font-medium items-center justify-center py-2.5 rounded-full border border-neutral-700 text-white outline-none text-[13px] tracking-wide"
|
|
2892
|
-
},
|
|
2893
|
-
"Copy Wallet Address"
|
|
2894
|
-
))))));
|
|
2895
|
-
};
|
|
2896
|
-
|
|
2897
|
-
// src/components/CardLogo.tsx
|
|
2898
|
-
import React31 from "react";
|
|
2899
|
-
var CardLogo = ({ network, className = "" }) => {
|
|
2900
|
-
if (network === "MASTERCARD") {
|
|
2901
|
-
return /* @__PURE__ */ React31.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React31.createElement("title", null, "Mastercard"), /* @__PURE__ */ React31.createElement("path", { d: "M16 8.73c-0.12 0.094-0.236 0.187-0.349 0.288-1.955 1.705-3.184 4.2-3.184 6.982s1.228 5.277 3.172 6.973l0.011 0.009c0.112 0.1 0.231 0.197 0.349 0.29 0.12-0.092 0.236-0.19 0.349-0.29 1.955-1.705 3.183-4.2 3.183-6.982s-1.228-5.277-3.172-6.973l-0.011-0.009c-0.112-0.1-0.23-0.195-0.349-0.288zM21.721 6.745c-0.005 0-0.011-0-0.018-0-1.903 0-3.67 0.577-5.138 1.566l0.033-0.021c0.075 0.059 0.143 0.121 0.205 0.186l0.001 0.001c2.116 1.836 3.446 4.528 3.446 7.531 0 2.996-1.323 5.682-3.417 7.507l-0.012 0.010c-0.072 0.061-0.15 0.122-0.226 0.182 1.441 0.97 3.216 1.549 5.125 1.549 5.112 0 9.256-4.144 9.256-9.256s-4.143-9.255-9.255-9.256h-0zM15.18 23.526c0.072 0.061 0.15 0.122 0.226 0.182-1.44 0.969-3.214 1.547-5.123 1.547-5.112 0-9.255-4.144-9.255-9.255s4.144-9.255 9.255-9.255c1.907 0 3.68 0.577 5.153 1.566l-0.033-0.021c-0.075 0.059-0.143 0.121-0.205 0.186l-0.001 0.001c-2.116 1.836-3.446 4.528-3.446 7.531 0 2.996 1.323 5.682 3.417 7.507l0.012 0.010z" }));
|
|
2902
|
-
}
|
|
2903
|
-
if (network === "VERVE") {
|
|
2904
|
-
return /* @__PURE__ */ React31.createElement("div", { className: `font-bold italic flex items-center justify-center tracking-widest ${className}`, style: { fontFamily: "sans-serif" } }, "Verve");
|
|
2905
|
-
}
|
|
2906
|
-
return /* @__PURE__ */ React31.createElement("svg", { className, fill: "currentColor", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React31.createElement("title", null, "Visa"), /* @__PURE__ */ React31.createElement("path", { d: "M15.854 11.329l-2.003 9.367h-2.424l2.006-9.367zM26.051 17.377l1.275-3.518 0.735 3.518zM28.754 20.696h2.242l-1.956-9.367h-2.069c-0.003-0-0.007-0-0.010-0-0.459 0-0.853 0.281-1.019 0.68l-0.003 0.007-3.635 8.68h2.544l0.506-1.4h3.109zM22.429 17.638c0.010-2.473-3.419-2.609-3.395-3.714 0.008-0.336 0.327-0.694 1.027-0.785 0.13-0.013 0.28-0.021 0.432-0.021 0.711 0 1.385 0.162 1.985 0.452l-0.027-0.012 0.425-1.987c-0.673-0.261-1.452-0.413-2.266-0.416h-0.001c-2.396 0-4.081 1.275-4.096 3.098-0.015 1.348 1.203 2.099 2.122 2.549 0.945 0.459 1.262 0.754 1.257 1.163-0.006 0.63-0.752 0.906-1.45 0.917-0.032 0.001-0.071 0.001-0.109 0.001-0.871 0-1.691-0.219-2.407-0.606l0.027 0.013-0.439 2.052c0.786 0.315 1.697 0.497 2.651 0.497 0.015 0 0.030-0 0.045-0h-0.002c2.546 0 4.211-1.257 4.22-3.204zM12.391 11.329l-3.926 9.367h-2.562l-1.932-7.477c-0.037-0.364-0.26-0.668-0.57-0.82l-0.006-0.003c-0.688-0.338-1.488-0.613-2.325-0.786l-0.066-0.011 0.058-0.271h4.124c0 0 0.001 0 0.001 0 0.562 0 1.028 0.411 1.115 0.948l0.001 0.006 1.021 5.421 2.522-6.376z" }));
|
|
2907
|
-
};
|
|
2908
|
-
|
|
2909
|
-
// src/components/Stagger.tsx
|
|
2910
|
-
import React32 from "react";
|
|
2911
|
-
import { HugeiconsIcon as HugeiconsIcon19 } from "@hugeicons/react";
|
|
2912
|
-
import { Briefcase02Icon, Upload01Icon, FileSyncIcon, CloudUploadIcon } from "@hugeicons/core-free-icons";
|
|
2913
|
-
var Stagger = ({ steps, currentStep }) => {
|
|
2914
|
-
const getIconForStep = (stepName) => {
|
|
2915
|
-
const lowerName = stepName.toLowerCase();
|
|
2916
|
-
if (lowerName.includes("document")) return Upload01Icon;
|
|
2917
|
-
if (lowerName.includes("review")) return FileSyncIcon;
|
|
2918
|
-
if (lowerName.includes("submit")) return CloudUploadIcon;
|
|
2919
|
-
return Briefcase02Icon;
|
|
2920
|
-
};
|
|
2921
|
-
return /* @__PURE__ */ React32.createElement("div", { className: "w-full flex items-center justify-between relative z-0" }, /* @__PURE__ */ React32.createElement("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 w-full h-px bg-neutral-100 -z-10" }), /* @__PURE__ */ React32.createElement("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 h-px bg-emerald-500 -z-10 transition-all duration-500", style: { width: `${currentStep / (steps.length - 1) * 100}%` } }), steps.map((step, idx) => {
|
|
2922
|
-
const isActive = idx === currentStep;
|
|
2923
|
-
const isPassed = idx < currentStep;
|
|
2924
|
-
const colorClass = isPassed ? "bg-emerald-500 text-white" : isActive ? "bg-neutral-100 text-neutral-500" : "bg-neutral-100 text-neutral-500";
|
|
2925
|
-
return /* @__PURE__ */ React32.createElement("div", { key: step, className: `w-6 h-6 rounded-full flex items-center justify-center transition-colors duration-300 ${colorClass}` }, /* @__PURE__ */ React32.createElement(HugeiconsIcon19, { icon: getIconForStep(step), size: 11 }));
|
|
2926
|
-
}));
|
|
1284
|
+
), /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-x-0 bottom-0 p-6 sm:p-8 z-30 flex flex-col justify-end text-left pointer-events-none" }, title && /* @__PURE__ */ React20.createElement("h3", { className: " text-xl sm:text-2xl md:text-3xl text-white tracking-tight mb-2 sm:mb-3 drop-shadow-md" }, title), subtitle && /* @__PURE__ */ React20.createElement("p", { className: "text-[13px] sm:text-[15px] leading-relaxed text-neutral-300 max-w-2xl drop-shadow-sm" }, subtitle)));
|
|
2927
1285
|
};
|
|
2928
1286
|
|
|
2929
1287
|
// src/components/MedicalFeatureStatsBlock.tsx
|
|
2930
|
-
import
|
|
1288
|
+
import React21, { useState as useState11, useEffect as useEffect10, useRef as useRef9 } from "react";
|
|
2931
1289
|
import Image9 from "next/image";
|
|
2932
1290
|
var MedicalFeatureStatsBlock = ({
|
|
2933
1291
|
bottomHeadline,
|
|
@@ -2936,9 +1294,9 @@ var MedicalFeatureStatsBlock = ({
|
|
|
2936
1294
|
trustText,
|
|
2937
1295
|
stats
|
|
2938
1296
|
}) => {
|
|
2939
|
-
const [isAnimating, setIsAnimating] =
|
|
2940
|
-
const titleRef =
|
|
2941
|
-
|
|
1297
|
+
const [isAnimating, setIsAnimating] = useState11(false);
|
|
1298
|
+
const titleRef = useRef9(null);
|
|
1299
|
+
useEffect10(() => {
|
|
2942
1300
|
const observer = new IntersectionObserver(
|
|
2943
1301
|
([entry]) => {
|
|
2944
1302
|
if (entry.isIntersecting) {
|
|
@@ -2956,15 +1314,15 @@ var MedicalFeatureStatsBlock = ({
|
|
|
2956
1314
|
}
|
|
2957
1315
|
return () => observer.disconnect();
|
|
2958
1316
|
}, []);
|
|
2959
|
-
return /* @__PURE__ */
|
|
1317
|
+
return /* @__PURE__ */ React21.createElement("section", { className: "py-24 w-full flex justify-center relative z-10" }, /* @__PURE__ */ React21.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ React21.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start lg:items-end gap-10 mb-12" }, /* @__PURE__ */ React21.createElement("div", { className: "max-w-xl" }, /* @__PURE__ */ React21.createElement(
|
|
2960
1318
|
"h2",
|
|
2961
1319
|
{
|
|
2962
1320
|
ref: titleRef,
|
|
2963
|
-
className: `text-3xl text-
|
|
1321
|
+
className: `text-3xl text-black tracking-tight leading-[1.1] mb-5 ${isAnimating ? "" : ""}`,
|
|
2964
1322
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
2965
1323
|
},
|
|
2966
1324
|
bottomHeadline
|
|
2967
|
-
), /* @__PURE__ */
|
|
1325
|
+
), /* @__PURE__ */ React21.createElement("p", { className: "text-[14px] leading-relaxed text-neutral-500" }, bottomDescription)), /* @__PURE__ */ React21.createElement("div", { className: "flex items-center gap-4 shrink-0" }, /* @__PURE__ */ React21.createElement("div", { className: "flex -space-x-3" }, avatars.map((src, i) => /* @__PURE__ */ React21.createElement("div", { key: i, className: "relative w-12 h-12 rounded-full border-[3px] border-white overflow-hidden bg-neutral-100 z-1 hover:z-10 transition-all" }, /* @__PURE__ */ React21.createElement(
|
|
2968
1326
|
Image9,
|
|
2969
1327
|
{
|
|
2970
1328
|
src,
|
|
@@ -2973,17 +1331,17 @@ var MedicalFeatureStatsBlock = ({
|
|
|
2973
1331
|
sizes: "48px",
|
|
2974
1332
|
className: "object-cover"
|
|
2975
1333
|
}
|
|
2976
|
-
)))), /* @__PURE__ */
|
|
1334
|
+
)))), /* @__PURE__ */ React21.createElement("p", { className: "text-[11px] text-neutral-800 leading-[1.4] max-w-55" }, trustText))), /* @__PURE__ */ React21.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" }, stats.map((stat, idx) => /* @__PURE__ */ React21.createElement("div", { key: idx, className: "bg-white rounded-4xl p-8 md:p-10 flex flex-col h-70" }, /* @__PURE__ */ React21.createElement("div", { className: "flex items-center p-0.5 mb-6" }, /* @__PURE__ */ React21.createElement("span", { className: "text-[14px] text-neutral-500 tracking-wide" }, stat.label)), /* @__PURE__ */ React21.createElement("div", { className: "text-6xl gradient-text md:text-[80px] font-light tracking-tighter text-black mt-auto leading-none" }, stat.value))))));
|
|
2977
1335
|
};
|
|
2978
1336
|
|
|
2979
1337
|
// src/components/ConsultantShowcase.tsx
|
|
2980
|
-
import
|
|
1338
|
+
import React22, { useState as useState12 } from "react";
|
|
2981
1339
|
import Image10 from "next/image";
|
|
2982
|
-
import { HugeiconsIcon as
|
|
2983
|
-
import { Loading03Icon as
|
|
1340
|
+
import { HugeiconsIcon as HugeiconsIcon11 } from "@hugeicons/react";
|
|
1341
|
+
import { Loading03Icon as Loading03Icon5 } from "@hugeicons/core-free-icons";
|
|
2984
1342
|
var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
|
|
2985
|
-
const [isLoading, setIsLoading] =
|
|
2986
|
-
return /* @__PURE__ */
|
|
1343
|
+
const [isLoading, setIsLoading] = useState12(true);
|
|
1344
|
+
return /* @__PURE__ */ React22.createElement("div", { className: `absolute inset-0 bg-neutral-800 ${className}` }, isLoading && /* @__PURE__ */ React22.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-20 bg-neutral-800/50 backdrop-blur-md transition-opacity duration-300" }, /* @__PURE__ */ React22.createElement(HugeiconsIcon11, { icon: Loading03Icon5, size: 24, className: "animate-spin text-white/50" })), /* @__PURE__ */ React22.createElement(
|
|
2987
1345
|
Image10,
|
|
2988
1346
|
{
|
|
2989
1347
|
src,
|
|
@@ -3002,9 +1360,9 @@ var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
|
|
|
3002
1360
|
var ConsultantShowcase = ({
|
|
3003
1361
|
profiles
|
|
3004
1362
|
}) => {
|
|
3005
|
-
const [currentIndex, setCurrentIndex] =
|
|
3006
|
-
const [touchStart, setTouchStart] =
|
|
3007
|
-
const [touchEnd, setTouchEnd] =
|
|
1363
|
+
const [currentIndex, setCurrentIndex] = useState12(0);
|
|
1364
|
+
const [touchStart, setTouchStart] = useState12(null);
|
|
1365
|
+
const [touchEnd, setTouchEnd] = useState12(null);
|
|
3008
1366
|
const nextSlide = () => {
|
|
3009
1367
|
setCurrentIndex((prev) => prev === profiles.length - 1 ? 0 : prev + 1);
|
|
3010
1368
|
};
|
|
@@ -3029,23 +1387,23 @@ var ConsultantShowcase = ({
|
|
|
3029
1387
|
}
|
|
3030
1388
|
};
|
|
3031
1389
|
if (!profiles || profiles.length === 0) return null;
|
|
3032
|
-
return /* @__PURE__ */
|
|
1390
|
+
return /* @__PURE__ */ React22.createElement("section", { className: "py-24 w-full flex justify-center px-4 md:px-8 z-10 relative" }, /* @__PURE__ */ React22.createElement("div", { className: "max-w-6xl w-full" }, /* @__PURE__ */ React22.createElement(
|
|
3033
1391
|
"div",
|
|
3034
1392
|
{
|
|
3035
|
-
className: "relative w-full h-100 md:h-112.5 rounded-4xl overflow-hidden bg-neutral-900
|
|
1393
|
+
className: "relative w-full h-100 md:h-112.5 rounded-4xl overflow-hidden bg-neutral-900 group select-none",
|
|
3036
1394
|
onTouchStart,
|
|
3037
1395
|
onTouchMove,
|
|
3038
1396
|
onTouchEnd
|
|
3039
1397
|
},
|
|
3040
1398
|
profiles.map((profile, idx) => {
|
|
3041
1399
|
const isActive = idx === currentIndex;
|
|
3042
|
-
return /* @__PURE__ */
|
|
1400
|
+
return /* @__PURE__ */ React22.createElement(
|
|
3043
1401
|
"div",
|
|
3044
1402
|
{
|
|
3045
1403
|
key: profile.id,
|
|
3046
1404
|
className: `absolute inset-0 transition-opacity duration-700 ease-in-out ${isActive ? "opacity-100 z-10" : "opacity-0 z-0 pointer-events-none"}`
|
|
3047
1405
|
},
|
|
3048
|
-
/* @__PURE__ */
|
|
1406
|
+
/* @__PURE__ */ React22.createElement(
|
|
3049
1407
|
ImageWithLoader,
|
|
3050
1408
|
{
|
|
3051
1409
|
src: profile.imageSrc,
|
|
@@ -3053,14 +1411,14 @@ var ConsultantShowcase = ({
|
|
|
3053
1411
|
priority: idx === 0
|
|
3054
1412
|
}
|
|
3055
1413
|
),
|
|
3056
|
-
/* @__PURE__ */
|
|
3057
|
-
/* @__PURE__ */
|
|
3058
|
-
/* @__PURE__ */
|
|
1414
|
+
/* @__PURE__ */ React22.createElement("div", { className: "absolute inset-0 bg-black/20 z-10 pointer-events-none" }),
|
|
1415
|
+
/* @__PURE__ */ React22.createElement("div", { className: "absolute top-0 left-0 w-full h-[60%] bg-linear-to-b from-black/80 via-black/30 to-transparent z-20 pointer-events-none" }),
|
|
1416
|
+
/* @__PURE__ */ React22.createElement("div", { className: `absolute top-8 left-8 md:top-12 md:left-12 z-30 text-white max-w-lg transition-transform duration-700 ease-out ${isActive ? "translate-y-0" : "-translate-y-4"}` }, /* @__PURE__ */ React22.createElement("h2", { className: "text-[29px] tracking-tight mb-2 leading-none" }, profile.name), /* @__PURE__ */ React22.createElement("div", { className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React22.createElement("p", { className: "text-[15px] text-white/80 font-light tracking-wide" }, profile.role), profile.description && /* @__PURE__ */ React22.createElement("p", { className: "text-[15px] text-white/80 font-light tracking-wide mt-1" }, profile.description)))
|
|
3059
1417
|
);
|
|
3060
1418
|
}),
|
|
3061
|
-
/* @__PURE__ */
|
|
3062
|
-
/* @__PURE__ */
|
|
3063
|
-
/* @__PURE__ */
|
|
1419
|
+
/* @__PURE__ */ React22.createElement("div", { className: "absolute top-0 left-0 w-[20%] h-full z-40 cursor-w-resize hidden md:block", onClick: prevSlide, "aria-label": "Previous image" }),
|
|
1420
|
+
/* @__PURE__ */ React22.createElement("div", { className: "absolute top-0 right-0 w-[20%] h-full z-40 cursor-e-resize hidden md:block", onClick: nextSlide, "aria-label": "Next image" }),
|
|
1421
|
+
/* @__PURE__ */ React22.createElement("div", { className: "absolute bottom-6 md:bottom-8 left-0 w-full px-4 z-30 flex justify-center items-center gap-2" }, profiles.map((_, idx) => /* @__PURE__ */ React22.createElement(
|
|
3064
1422
|
"button",
|
|
3065
1423
|
{
|
|
3066
1424
|
key: idx,
|
|
@@ -3073,10 +1431,10 @@ var ConsultantShowcase = ({
|
|
|
3073
1431
|
};
|
|
3074
1432
|
|
|
3075
1433
|
// src/components/ContentGridBlock.tsx
|
|
3076
|
-
import
|
|
1434
|
+
import React23, { useState as useState13 } from "react";
|
|
3077
1435
|
import Image11 from "next/image";
|
|
3078
|
-
import { HugeiconsIcon as
|
|
3079
|
-
import { Loading03Icon as
|
|
1436
|
+
import { HugeiconsIcon as HugeiconsIcon12 } from "@hugeicons/react";
|
|
1437
|
+
import { Loading03Icon as Loading03Icon6 } from "@hugeicons/core-free-icons";
|
|
3080
1438
|
var ContentGridBlock = ({
|
|
3081
1439
|
header,
|
|
3082
1440
|
leftCard,
|
|
@@ -3084,23 +1442,23 @@ var ContentGridBlock = ({
|
|
|
3084
1442
|
middleBottomCard,
|
|
3085
1443
|
rightCards
|
|
3086
1444
|
}) => {
|
|
3087
|
-
return /* @__PURE__ */
|
|
1445
|
+
return /* @__PURE__ */ React23.createElement("section", { className: " w-full flex justify-center z-10 relative" }, /* @__PURE__ */ React23.createElement("div", { className: "max-w-300 w-full px-4 md:px-8 flex flex-col gap-12" }, /* @__PURE__ */ React23.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start lg:items-end gap-6 w-full" }, /* @__PURE__ */ React23.createElement("h2", { className: "text-3xl tracking-tight text-black leading-[1.15] max-w-lg" }, header.titlePrefix, " ", /* @__PURE__ */ React23.createElement("span", { className: "gradient-text" }, header.highlightText))), /* @__PURE__ */ React23.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" }, /* @__PURE__ */ React23.createElement("div", { className: "flex flex-col justify-end" }, /* @__PURE__ */ React23.createElement("div", { className: "bg-black rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ React23.createElement("p", { className: "text-[17px] text-white leading-snug mb-4" }, leftCard.mainText), leftCard.tag && /* @__PURE__ */ React23.createElement("span", { className: "mb-auto text-[11px] text-neutral-200 tracking-widest" }, leftCard.tag), /* @__PURE__ */ React23.createElement("div", { className: "flex items-center justify-between mt-8" }, /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement("h4", { className: "text-[15px] text-white" }, leftCard.title), /* @__PURE__ */ React23.createElement("p", { className: "text-[13px] text-neutral-300" }, leftCard.subtitle)), /* @__PURE__ */ React23.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ React23.createElement(Image11, { src: leftCard.thumbnailSrc, alt: leftCard.title, fill: true, className: "object-cover" }))))), /* @__PURE__ */ React23.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React23.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col relative h-75" }, /* @__PURE__ */ React23.createElement("div", { className: "absolute top-6 right-6 flex flex-col items-end gap-1" }, /* @__PURE__ */ React23.createElement("span", { className: "text-[11px] text-neutral-400 tracking-wide" }, middleTopCard.topRightLabel), /* @__PURE__ */ React23.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React23.createElement("div", { className: "flex -space-x-2" }, middleTopCard.topRightAvatars.map((src, i) => /* @__PURE__ */ React23.createElement("div", { key: i, className: "w-7 h-7 rounded-full border-2 border-white overflow-hidden relative z-10" }, /* @__PURE__ */ React23.createElement(Image11, { src, alt: "Avatar", fill: true, className: "object-cover", sizes: "28px" })))), /* @__PURE__ */ React23.createElement("span", { className: "text-sm text-neutral-500" }, middleTopCard.topRightCount))), /* @__PURE__ */ React23.createElement("div", { className: "grow flex flex-col justify-center items-center py-6" }, /* @__PURE__ */ React23.createElement("div", { className: "px-5 py-2 rounded-full bg-neutral-50/50 border border-neutral-100 text-[13px] text-neutral-600" }, middleTopCard.badgePrefix, " ", /* @__PURE__ */ React23.createElement("span", { className: " text-black" }, middleTopCard.badgeHighlight), middleTopCard.badgeSuffix)), /* @__PURE__ */ React23.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React23.createElement("p", { className: "text-[11px] text-neutral-400 tracking-wide mb-1" }, middleTopCard.title), /* @__PURE__ */ React23.createElement("p", { className: "text-[14px] text-black leading-snug pr-4" }, middleTopCard.description))), /* @__PURE__ */ React23.createElement("div", { className: "bg-white rounded-3xl p-8 flex flex-col h-80" }, /* @__PURE__ */ React23.createElement("div", { className: "flex justify-between items-start mb-6" }, /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement("h4", { className: "text-[15px] text-black leading-tight" }, middleBottomCard.title), /* @__PURE__ */ React23.createElement("p", { className: "text-[13px] text-neutral-400" }, middleBottomCard.subtitle)), /* @__PURE__ */ React23.createElement("div", { className: "w-10 h-10 rounded-full overflow-hidden relative" }, /* @__PURE__ */ React23.createElement(Image11, { src: middleBottomCard.thumbnailSrc, alt: middleBottomCard.title, fill: true, className: "object-cover" }))), /* @__PURE__ */ React23.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React23.createElement("p", { className: "text-[16px] text-black leading-snug mb-4" }, middleBottomCard.mainText), middleBottomCard.tag && /* @__PURE__ */ React23.createElement("span", { className: "text-[11px] text-neutral-400 tracking-widest" }, middleBottomCard.tag)))), /* @__PURE__ */ React23.createElement("div", { className: "flex flex-col gap-6" }, rightCards.slice(0, 2).map((card, idx) => /* @__PURE__ */ React23.createElement("div", { key: idx, className: "relative w-full h-80 bg-[#ffffff] text-black rounded-3xl overflow-hidden group" }, /* @__PURE__ */ React23.createElement("div", { className: "absolute inset-0 z-20 pointer-events-none" }), /* @__PURE__ */ React23.createElement("div", { className: "absolute inset-0 z-30 p-6 flex flex-col justify-end text-black" }, /* @__PURE__ */ React23.createElement("p", { className: "text-[14px] leading-snug mb-3 pr-2 text-black/90" }, card.mainText), card.tag && /* @__PURE__ */ React23.createElement("span", { className: "mb-4 text-[11px] text-black/50 tracking-widest" }, card.tag), /* @__PURE__ */ React23.createElement("div", { className: "pt-3" }, /* @__PURE__ */ React23.createElement("h4", { className: "text-[15px] tracking-wide" }, card.title), /* @__PURE__ */ React23.createElement("p", { className: "text-[13px] text-black/60" }, card.subtitle)))))))));
|
|
3088
1446
|
};
|
|
3089
1447
|
|
|
3090
1448
|
// src/components/ManagedProjectsBlock.tsx
|
|
3091
|
-
import
|
|
3092
|
-
import
|
|
1449
|
+
import React24 from "react";
|
|
1450
|
+
import Link7 from "next/link";
|
|
3093
1451
|
var GridSection = ({
|
|
3094
1452
|
children,
|
|
3095
1453
|
isLast = false,
|
|
3096
1454
|
className = "py-8 md:py-10"
|
|
3097
|
-
}) => /* @__PURE__ */
|
|
1455
|
+
}) => /* @__PURE__ */ React24.createElement("div", { className: `relative px-5 md:px-12 ${className} ${!isLast ? "" : ""}` }, children);
|
|
3098
1456
|
var ManagedProjectsBlock = ({
|
|
3099
1457
|
tagline,
|
|
3100
1458
|
title,
|
|
3101
1459
|
projects
|
|
3102
1460
|
}) => {
|
|
3103
|
-
return /* @__PURE__ */
|
|
1461
|
+
return /* @__PURE__ */ React24.createElement("div", { className: "grow pt-28 pb-20 px-3 md:px-8 w-full flex justify-center z-10 relative" }, /* @__PURE__ */ React24.createElement("div", { className: "relative bg-white rounded-2xl w-full max-w-5xl mx-auto overflow-hidden" }, /* @__PURE__ */ React24.createElement(
|
|
3104
1462
|
"div",
|
|
3105
1463
|
{
|
|
3106
1464
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
@@ -3109,16 +1467,14 @@ var ManagedProjectsBlock = ({
|
|
|
3109
1467
|
backgroundRepeat: "repeat"
|
|
3110
1468
|
}
|
|
3111
1469
|
}
|
|
3112
|
-
), /* @__PURE__ */
|
|
1470
|
+
), /* @__PURE__ */ React24.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React24.createElement(GridSection, null, tagline && /* @__PURE__ */ React24.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 text-left block " }, tagline), /* @__PURE__ */ React24.createElement("h1", { className: " text-3xl mt-4 text-black tracking-tight text-left" }, title)), projects.map((project, index) => {
|
|
3113
1471
|
const isLast = index === projects.length - 1;
|
|
3114
|
-
const projectContent = /* @__PURE__ */
|
|
3115
|
-
return /* @__PURE__ */
|
|
1472
|
+
const projectContent = /* @__PURE__ */ React24.createElement("div", { className: "group block w-full" }, /* @__PURE__ */ React24.createElement("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-3 md:gap-4 mb-4 md:mb-5" }, /* @__PURE__ */ React24.createElement("div", { className: "flex items-center gap-3 md:gap-4" }, /* @__PURE__ */ React24.createElement("h2", { className: " text-[16px] text-black transition-all flex items-center gap-2" }, project.title, /* @__PURE__ */ React24.createElement("span", { className: "text-[11px] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300" }, project.isExternal ? "\u2197" : "\u2192")), /* @__PURE__ */ React24.createElement("span", { className: `text-[9px] px-2.5 py-1 rounded-full tracking-[0.15em] transition-colors ${project.status.toLowerCase() === "production" ? "bg-black text-white" : "bg-neutral-100 text-neutral-500 group-hover:bg-neutral-100 group-hover:text-black"}` }, project.status)), /* @__PURE__ */ React24.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 shrink-0 " }, project.date)), /* @__PURE__ */ React24.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 max-w-4xl text-left transition-colors group-hover:text-black" }, project.description));
|
|
1473
|
+
return /* @__PURE__ */ React24.createElement(GridSection, { key: project.id || index, isLast, className: isLast ? "py-8 md:py-10 pb-12 md:pb-14" : "py-8 md:py-10" }, project.isExternal ? /* @__PURE__ */ React24.createElement("a", { href: project.link, target: "_blank", rel: "noopener noreferrer", className: "block outline-none" }, projectContent) : /* @__PURE__ */ React24.createElement(Link7, { href: project.link, className: "block outline-none" }, projectContent));
|
|
3116
1474
|
}))));
|
|
3117
1475
|
};
|
|
3118
1476
|
export {
|
|
3119
1477
|
AppBento2,
|
|
3120
|
-
Banner,
|
|
3121
|
-
CardLogo,
|
|
3122
1478
|
ConsultantShowcase,
|
|
3123
1479
|
ContentGridBlock,
|
|
3124
1480
|
Faq,
|
|
@@ -3138,19 +1494,9 @@ export {
|
|
|
3138
1494
|
MedicalFeatureStatsBlock,
|
|
3139
1495
|
NumberInput,
|
|
3140
1496
|
PageSpinner,
|
|
3141
|
-
PipleAuth,
|
|
3142
1497
|
PlatformFeatures,
|
|
3143
1498
|
PortfolioHero,
|
|
3144
|
-
Stagger,
|
|
3145
1499
|
TextInput,
|
|
3146
1500
|
ThreeDActionButton,
|
|
3147
|
-
ThreeDButton
|
|
3148
|
-
UniversalErrorView,
|
|
3149
|
-
UniversalHomeView,
|
|
3150
|
-
UniversalOrganizationPage,
|
|
3151
|
-
UniversalProfileSettings,
|
|
3152
|
-
UniversalSidebar,
|
|
3153
|
-
UniversalTransactionPage,
|
|
3154
|
-
UniversalWalletPage,
|
|
3155
|
-
ZairusAuth
|
|
1501
|
+
ThreeDButton
|
|
3156
1502
|
};
|