@retinalabsllc/zairusjs 5.1.65 → 5.1.80
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 +309 -1986
- package/dist/index.mjs +293 -1990
- 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,523 +218,13 @@ 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-10 h-10 text-center text-xl 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-10 h-10 text-center text-xl 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 from "react";
|
|
717
228
|
import Link2 from "next/link";
|
|
718
229
|
import Image from "next/image";
|
|
719
230
|
import { usePathname } from "next/navigation";
|
|
@@ -726,7 +237,7 @@ var NavLink = ({
|
|
|
726
237
|
const isActive = pathname === href;
|
|
727
238
|
const activeClass = "text-white";
|
|
728
239
|
const inactiveClass = "text-neutral-400 hover:text-white";
|
|
729
|
-
return /* @__PURE__ */
|
|
240
|
+
return /* @__PURE__ */ React4.createElement(
|
|
730
241
|
Link2,
|
|
731
242
|
{
|
|
732
243
|
href,
|
|
@@ -747,7 +258,7 @@ var Header = ({
|
|
|
747
258
|
}) => {
|
|
748
259
|
const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
|
|
749
260
|
const hasBrandSection = showLogo || !hideHeaderText;
|
|
750
|
-
return /* @__PURE__ */
|
|
261
|
+
return /* @__PURE__ */ React4.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ React4.createElement("header", { className: `${headerLayoutWidth} bg-black/40 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(
|
|
751
262
|
Image,
|
|
752
263
|
{
|
|
753
264
|
src: logoSrc,
|
|
@@ -757,7 +268,7 @@ var Header = ({
|
|
|
757
268
|
className: `object-contain w-8 h-auto ${invert ? "invert" : ""}`,
|
|
758
269
|
priority: true
|
|
759
270
|
}
|
|
760
|
-
), !hideHeaderText && /* @__PURE__ */
|
|
271
|
+
), !hideHeaderText && /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React4.createElement("span", { className: "text-[11px] leading-none tracking-wide mb-1 transition-colors text-white" }, companyName), subtitle && /* @__PURE__ */ React4.createElement("span", { className: "text-[9px] tracking-widest leading-none transition-colors text-neutral-400" }, subtitle)))), /* @__PURE__ */ React4.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React4.createElement(
|
|
761
272
|
NavLink,
|
|
762
273
|
{
|
|
763
274
|
key: index,
|
|
@@ -769,7 +280,7 @@ var Header = ({
|
|
|
769
280
|
};
|
|
770
281
|
|
|
771
282
|
// src/components/Footer.tsx
|
|
772
|
-
import
|
|
283
|
+
import React5, { useState as useState2 } from "react";
|
|
773
284
|
import Link3 from "next/link";
|
|
774
285
|
import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react";
|
|
775
286
|
var Footer = ({
|
|
@@ -779,46 +290,46 @@ var Footer = ({
|
|
|
779
290
|
copyrightText,
|
|
780
291
|
topSection
|
|
781
292
|
}) => {
|
|
782
|
-
const [openCol, setOpenCol] =
|
|
293
|
+
const [openCol, setOpenCol] = useState2(null);
|
|
783
294
|
const toggleColumn = (idx) => {
|
|
784
295
|
setOpenCol(openCol === idx ? null : idx);
|
|
785
296
|
};
|
|
786
|
-
return /* @__PURE__ */
|
|
297
|
+
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
298
|
const isOpen = openCol === idx;
|
|
788
|
-
return /* @__PURE__ */
|
|
299
|
+
return /* @__PURE__ */ React5.createElement("div", { key: idx, className: "border-b border-neutral-100" }, /* @__PURE__ */ React5.createElement(
|
|
789
300
|
"button",
|
|
790
301
|
{
|
|
791
302
|
onClick: () => toggleColumn(idx),
|
|
792
303
|
className: "w-full flex items-center justify-between py-5 text-left outline-none"
|
|
793
304
|
},
|
|
794
|
-
/* @__PURE__ */
|
|
795
|
-
/* @__PURE__ */
|
|
305
|
+
/* @__PURE__ */ React5.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black " }, col.title),
|
|
306
|
+
/* @__PURE__ */ React5.createElement(
|
|
796
307
|
"svg",
|
|
797
308
|
{
|
|
798
|
-
className: `w-4 h-4 text-neutral-
|
|
309
|
+
className: `w-4 h-4 text-neutral-400 transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`,
|
|
799
310
|
fill: "none",
|
|
800
311
|
viewBox: "0 0 24 24",
|
|
801
312
|
stroke: "currentColor"
|
|
802
313
|
},
|
|
803
|
-
/* @__PURE__ */
|
|
314
|
+
/* @__PURE__ */ React5.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
|
|
804
315
|
)
|
|
805
|
-
), /* @__PURE__ */
|
|
806
|
-
})))), /* @__PURE__ */
|
|
316
|
+
), /* @__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)))))));
|
|
317
|
+
})))), /* @__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
318
|
"a",
|
|
808
319
|
{
|
|
809
320
|
key: idx,
|
|
810
321
|
href: social.href,
|
|
811
322
|
target: "_blank",
|
|
812
323
|
rel: "noopener noreferrer",
|
|
813
|
-
className: "text-neutral-
|
|
324
|
+
className: "text-neutral-400 hover:text-black transition-colors",
|
|
814
325
|
"aria-label": social.name
|
|
815
326
|
},
|
|
816
|
-
/* @__PURE__ */
|
|
327
|
+
/* @__PURE__ */ React5.createElement(HugeiconsIcon2, { icon: social.icon, size: 20 })
|
|
817
328
|
))))))));
|
|
818
329
|
};
|
|
819
330
|
|
|
820
331
|
// src/components/HeroSection.tsx
|
|
821
|
-
import
|
|
332
|
+
import React6, { useState as useState3, useEffect as useEffect2, useRef as useRef2 } from "react";
|
|
822
333
|
import Link4 from "next/link";
|
|
823
334
|
import Image2 from "next/image";
|
|
824
335
|
var HeroSection = ({
|
|
@@ -839,9 +350,9 @@ var HeroSection = ({
|
|
|
839
350
|
bgVideoSrc,
|
|
840
351
|
bgImageSrc
|
|
841
352
|
}) => {
|
|
842
|
-
const [isAnimating, setIsAnimating] =
|
|
843
|
-
const titleRef =
|
|
844
|
-
|
|
353
|
+
const [isAnimating, setIsAnimating] = useState3(false);
|
|
354
|
+
const titleRef = useRef2(null);
|
|
355
|
+
useEffect2(() => {
|
|
845
356
|
const observer = new IntersectionObserver(
|
|
846
357
|
([entry]) => {
|
|
847
358
|
if (entry.isIntersecting) {
|
|
@@ -859,7 +370,7 @@ var HeroSection = ({
|
|
|
859
370
|
}
|
|
860
371
|
return () => observer.disconnect();
|
|
861
372
|
}, []);
|
|
862
|
-
return /* @__PURE__ */
|
|
373
|
+
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
374
|
"video",
|
|
864
375
|
{
|
|
865
376
|
src: bgVideoSrc,
|
|
@@ -868,62 +379,62 @@ var HeroSection = ({
|
|
|
868
379
|
loop: true,
|
|
869
380
|
muted: true,
|
|
870
381
|
playsInline: true,
|
|
871
|
-
className: "absolute inset-0 w-full h-full object-cover z-0"
|
|
382
|
+
className: "absolute inset-0 w-full h-full object-cover z-0 opacity-80"
|
|
872
383
|
}
|
|
873
|
-
) : bgImageSrc ? /* @__PURE__ */
|
|
384
|
+
) : bgImageSrc ? /* @__PURE__ */ React6.createElement(
|
|
874
385
|
Image2,
|
|
875
386
|
{
|
|
876
387
|
src: bgImageSrc,
|
|
877
388
|
alt: "Hero Background",
|
|
878
389
|
fill: true,
|
|
879
390
|
priority: true,
|
|
880
|
-
className: "object-cover z-0"
|
|
391
|
+
className: "object-cover z-0 opacity-80"
|
|
881
392
|
}
|
|
882
|
-
) : null, /* @__PURE__ */
|
|
393
|
+
) : null, /* @__PURE__ */ React6.createElement(
|
|
883
394
|
"div",
|
|
884
395
|
{
|
|
885
396
|
className: "absolute inset-0 z-10 opacity-30 mix-blend-overlay pointer-events-none",
|
|
886
397
|
style: {
|
|
887
|
-
backgroundImage: `linear-gradient(110deg, rgba(255,255,255,0.
|
|
398
|
+
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
399
|
backgroundSize: "cover",
|
|
889
400
|
backgroundPosition: "center"
|
|
890
401
|
}
|
|
891
402
|
}
|
|
892
|
-
), /* @__PURE__ */
|
|
403
|
+
), /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-white/40 z-10" }), /* @__PURE__ */ React6.createElement(
|
|
893
404
|
"div",
|
|
894
405
|
{
|
|
895
406
|
className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-10",
|
|
896
407
|
style: {
|
|
897
|
-
backgroundImage: "radial-gradient(circle at center, rgba(
|
|
408
|
+
backgroundImage: "radial-gradient(circle at center, rgba(0,0,0,0.15) 1px, transparent 1px)",
|
|
898
409
|
backgroundSize: "32px 32px"
|
|
899
410
|
}
|
|
900
411
|
}
|
|
901
|
-
), /* @__PURE__ */
|
|
412
|
+
), /* @__PURE__ */ React6.createElement(
|
|
902
413
|
"div",
|
|
903
414
|
{
|
|
904
|
-
className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-[0.
|
|
415
|
+
className: "absolute inset-0 w-full h-full pointer-events-none z-10 opacity-[0.05] mix-blend-overlay",
|
|
905
416
|
style: {
|
|
906
417
|
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
418
|
}
|
|
908
419
|
}
|
|
909
|
-
), /* @__PURE__ */
|
|
420
|
+
), /* @__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
421
|
"h1",
|
|
911
422
|
{
|
|
912
423
|
ref: titleRef,
|
|
913
|
-
className: `text-4xl sm:text-5xl lg:text-7xl font-light mb-6 text-
|
|
424
|
+
className: `text-4xl sm:text-5xl lg:text-7xl font-light mb-6 text-neutral-900 tracking-tight leading-[1.05] max-w-4xl`,
|
|
914
425
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
915
426
|
},
|
|
916
427
|
titlePrefix,
|
|
917
428
|
" ",
|
|
918
|
-
/* @__PURE__ */
|
|
919
|
-
), subtitle && /* @__PURE__ */
|
|
429
|
+
/* @__PURE__ */ React6.createElement("span", { className: "font-medium gradient-text" }, highlightText)
|
|
430
|
+
), 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
431
|
Link4,
|
|
921
432
|
{
|
|
922
433
|
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
|
|
434
|
+
className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3 bg-white/60 backdrop-blur-md text-center text-neutral-900 text-xs hover:bg-white/80 border border-neutral-200 outline-none transition-all"
|
|
924
435
|
},
|
|
925
436
|
secondaryCtaText
|
|
926
|
-
)), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */
|
|
437
|
+
)), 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
438
|
Image2,
|
|
928
439
|
{
|
|
929
440
|
src: logo.src,
|
|
@@ -936,12 +447,12 @@ var HeroSection = ({
|
|
|
936
447
|
};
|
|
937
448
|
|
|
938
449
|
// src/components/AppBento2.tsx
|
|
939
|
-
import
|
|
450
|
+
import React7, { useState as useState4, useEffect as useEffect3, useRef as useRef3 } from "react";
|
|
940
451
|
import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
|
|
941
452
|
var AppBento2 = ({ tagline, headline, features }) => {
|
|
942
|
-
const [isAnimating, setIsAnimating] =
|
|
943
|
-
const titleRef =
|
|
944
|
-
|
|
453
|
+
const [isAnimating, setIsAnimating] = useState4(false);
|
|
454
|
+
const titleRef = useRef3(null);
|
|
455
|
+
useEffect3(() => {
|
|
945
456
|
const observer = new IntersectionObserver(
|
|
946
457
|
([entry]) => {
|
|
947
458
|
if (entry.isIntersecting) {
|
|
@@ -959,66 +470,66 @@ var AppBento2 = ({ tagline, headline, features }) => {
|
|
|
959
470
|
}
|
|
960
471
|
return () => observer.disconnect();
|
|
961
472
|
}, []);
|
|
962
|
-
return /* @__PURE__ */
|
|
473
|
+
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
474
|
"h2",
|
|
964
475
|
{
|
|
965
476
|
ref: titleRef,
|
|
966
|
-
className: `text-3xl
|
|
477
|
+
className: ` text-3xl tracking-tight text-black leading-[1.1] ${isAnimating ? "" : ""}`,
|
|
967
478
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
968
479
|
},
|
|
969
480
|
headline
|
|
970
|
-
))), /* @__PURE__ */
|
|
971
|
-
const
|
|
972
|
-
const
|
|
973
|
-
const
|
|
481
|
+
))), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
|
|
482
|
+
const isWhite = i === 0;
|
|
483
|
+
const isBlack = i === 1;
|
|
484
|
+
const isNeutral = i === 2;
|
|
974
485
|
const getBgStyle = () => {
|
|
975
|
-
if (
|
|
976
|
-
if (
|
|
977
|
-
if (
|
|
978
|
-
return "bg-neutral-
|
|
486
|
+
if (isWhite) return "bg-white";
|
|
487
|
+
if (isBlack) return "bg-black";
|
|
488
|
+
if (isNeutral) return "bg-neutral-200";
|
|
489
|
+
return "bg-neutral-200";
|
|
979
490
|
};
|
|
980
491
|
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.
|
|
492
|
+
if (isBlack) return `
|
|
493
|
+
inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
|
|
494
|
+
inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
|
|
495
|
+
0 4px 0 0 #0c0c0c,
|
|
496
|
+
0 12px 24px rgba(0, 0, 0, 0.1)
|
|
986
497
|
`;
|
|
987
498
|
return "none";
|
|
988
499
|
};
|
|
989
|
-
const textColor = "text-white";
|
|
990
|
-
const subTextColor = "text-neutral-
|
|
991
|
-
const labelColor = "text-neutral-500";
|
|
992
|
-
return /* @__PURE__ */
|
|
500
|
+
const textColor = isBlack ? "text-white" : "text-black";
|
|
501
|
+
const subTextColor = isBlack ? "text-neutral-300" : "text-neutral-600";
|
|
502
|
+
const labelColor = isBlack ? "text-neutral-400" : "text-neutral-500";
|
|
503
|
+
return /* @__PURE__ */ React7.createElement(
|
|
993
504
|
"div",
|
|
994
505
|
{
|
|
995
506
|
key: i,
|
|
996
507
|
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
508
|
style: { boxShadow: getShadowStyle() }
|
|
998
509
|
},
|
|
999
|
-
/* @__PURE__ */
|
|
510
|
+
/* @__PURE__ */ React7.createElement(
|
|
1000
511
|
"div",
|
|
1001
512
|
{
|
|
1002
513
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
1003
514
|
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
515
|
}
|
|
1005
516
|
),
|
|
1006
|
-
|
|
1007
|
-
/* @__PURE__ */
|
|
1008
|
-
/* @__PURE__ */
|
|
517
|
+
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" }),
|
|
518
|
+
/* @__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 }))),
|
|
519
|
+
/* @__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
520
|
);
|
|
1010
521
|
})))));
|
|
1011
522
|
};
|
|
1012
523
|
|
|
1013
524
|
// src/components/FeatureScroll.tsx
|
|
1014
|
-
import
|
|
525
|
+
import React8, { useRef as useRef4, useState as useState5, useEffect as useEffect4 } from "react";
|
|
1015
526
|
import Image3 from "next/image";
|
|
1016
527
|
import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
|
|
1017
528
|
import { ArrowLeft01Icon, ArrowRight01Icon, Loading03Icon as Loading03Icon2 } from "@hugeicons/core-free-icons";
|
|
1018
529
|
var FeatureCard = ({ feature, bgImage }) => {
|
|
1019
|
-
const [isBgLoading, setIsBgLoading] =
|
|
1020
|
-
const [isFgLoading, setIsFgLoading] =
|
|
1021
|
-
return /* @__PURE__ */
|
|
530
|
+
const [isBgLoading, setIsBgLoading] = useState5(true);
|
|
531
|
+
const [isFgLoading, setIsFgLoading] = useState5(!!feature.image);
|
|
532
|
+
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
533
|
Image3,
|
|
1023
534
|
{
|
|
1024
535
|
src: bgImage,
|
|
@@ -1031,7 +542,7 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
1031
542
|
${isBgLoading ? "blur-xl scale-110" : "blur-0 scale-100"}
|
|
1032
543
|
`
|
|
1033
544
|
}
|
|
1034
|
-
), /* @__PURE__ */
|
|
545
|
+
), /* @__PURE__ */ React8.createElement(
|
|
1035
546
|
"div",
|
|
1036
547
|
{
|
|
1037
548
|
className: "absolute inset-0 w-full h-full pointer-events-none z-0 opacity-[0.25] mix-blend-overlay",
|
|
@@ -1039,7 +550,7 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
1039
550
|
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
551
|
}
|
|
1041
552
|
}
|
|
1042
|
-
), isFgLoading && feature.image && /* @__PURE__ */
|
|
553
|
+
), 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
554
|
Image3,
|
|
1044
555
|
{
|
|
1045
556
|
src: feature.image,
|
|
@@ -1048,16 +559,16 @@ var FeatureCard = ({ feature, bgImage }) => {
|
|
|
1048
559
|
sizes: "(max-width: 768px) 90vw, 600px",
|
|
1049
560
|
onLoad: () => setIsFgLoading(false),
|
|
1050
561
|
className: `
|
|
1051
|
-
object-cover object-top-left rounded-tl-2xl shadow-[-12px_-12px_30px_rgba(0,0,0,0.
|
|
562
|
+
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
563
|
${isFgLoading ? "opacity-0 blur-xl" : "opacity-100 blur-0"}
|
|
1053
564
|
`
|
|
1054
565
|
}
|
|
1055
|
-
))), /* @__PURE__ */
|
|
566
|
+
))), /* @__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
567
|
};
|
|
1057
568
|
var FeatureScroll = ({ tagline, headline, features }) => {
|
|
1058
|
-
const scrollRef =
|
|
1059
|
-
const [canScrollLeft, setCanScrollLeft] =
|
|
1060
|
-
const [canScrollRight, setCanScrollRight] =
|
|
569
|
+
const scrollRef = useRef4(null);
|
|
570
|
+
const [canScrollLeft, setCanScrollLeft] = useState5(false);
|
|
571
|
+
const [canScrollRight, setCanScrollRight] = useState5(true);
|
|
1061
572
|
const checkScroll = () => {
|
|
1062
573
|
if (scrollRef.current) {
|
|
1063
574
|
const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
|
|
@@ -1065,7 +576,7 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
1065
576
|
setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 2);
|
|
1066
577
|
}
|
|
1067
578
|
};
|
|
1068
|
-
|
|
579
|
+
useEffect4(() => {
|
|
1069
580
|
checkScroll();
|
|
1070
581
|
window.addEventListener("resize", checkScroll);
|
|
1071
582
|
return () => window.removeEventListener("resize", checkScroll);
|
|
@@ -1081,53 +592,53 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
1081
592
|
"https://retinalabs.company/assets/images/bg_6.avif",
|
|
1082
593
|
"https://retinalabs.company/assets/images/bg_1.avif"
|
|
1083
594
|
];
|
|
1084
|
-
return /* @__PURE__ */
|
|
595
|
+
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
596
|
"button",
|
|
1086
597
|
{
|
|
1087
598
|
onClick: () => scroll("left"),
|
|
1088
599
|
disabled: !canScrollLeft,
|
|
1089
|
-
className: "p-4 border border-neutral-
|
|
600
|
+
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
601
|
"aria-label": "Previous feature"
|
|
1091
602
|
},
|
|
1092
|
-
/* @__PURE__ */
|
|
1093
|
-
), /* @__PURE__ */
|
|
603
|
+
/* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: ArrowLeft01Icon, size: 20 })
|
|
604
|
+
), /* @__PURE__ */ React8.createElement(
|
|
1094
605
|
"button",
|
|
1095
606
|
{
|
|
1096
607
|
onClick: () => scroll("right"),
|
|
1097
608
|
disabled: !canScrollRight,
|
|
1098
|
-
className: "p-4 border border-neutral-
|
|
609
|
+
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
610
|
"aria-label": "Next feature"
|
|
1100
611
|
},
|
|
1101
|
-
/* @__PURE__ */
|
|
1102
|
-
))), /* @__PURE__ */
|
|
612
|
+
/* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: ArrowRight01Icon, size: 20 })
|
|
613
|
+
))), /* @__PURE__ */ React8.createElement(
|
|
1103
614
|
"div",
|
|
1104
615
|
{
|
|
1105
616
|
ref: scrollRef,
|
|
1106
617
|
onScroll: checkScroll,
|
|
1107
618
|
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
619
|
},
|
|
1109
|
-
features.slice(0, 3).map((feature, idx) => /* @__PURE__ */
|
|
1110
|
-
), /* @__PURE__ */
|
|
620
|
+
features.slice(0, 3).map((feature, idx) => /* @__PURE__ */ React8.createElement(FeatureCard, { key: idx, feature, bgImage: bgImages[idx] }))
|
|
621
|
+
), /* @__PURE__ */ React8.createElement("div", { className: "flex md:hidden items-center justify-center gap-4 mt-2" }, /* @__PURE__ */ React8.createElement(
|
|
1111
622
|
"button",
|
|
1112
623
|
{
|
|
1113
624
|
onClick: () => scroll("left"),
|
|
1114
625
|
disabled: !canScrollLeft,
|
|
1115
|
-
className: "p-4 border border-neutral-
|
|
626
|
+
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
627
|
},
|
|
1117
|
-
/* @__PURE__ */
|
|
1118
|
-
), /* @__PURE__ */
|
|
628
|
+
/* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: ArrowLeft01Icon, size: 20 })
|
|
629
|
+
), /* @__PURE__ */ React8.createElement(
|
|
1119
630
|
"button",
|
|
1120
631
|
{
|
|
1121
632
|
onClick: () => scroll("right"),
|
|
1122
633
|
disabled: !canScrollRight,
|
|
1123
|
-
className: "p-4 border border-neutral-
|
|
634
|
+
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
635
|
},
|
|
1125
|
-
/* @__PURE__ */
|
|
636
|
+
/* @__PURE__ */ React8.createElement(HugeiconsIcon4, { icon: ArrowRight01Icon, size: 20 })
|
|
1126
637
|
))));
|
|
1127
638
|
};
|
|
1128
639
|
|
|
1129
640
|
// src/components/PlatformFeatures.tsx
|
|
1130
|
-
import
|
|
641
|
+
import React9 from "react";
|
|
1131
642
|
import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react";
|
|
1132
643
|
var PlatformFeatures = ({
|
|
1133
644
|
tagline,
|
|
@@ -1135,20 +646,20 @@ var PlatformFeatures = ({
|
|
|
1135
646
|
description,
|
|
1136
647
|
features
|
|
1137
648
|
}) => {
|
|
1138
|
-
return /* @__PURE__ */
|
|
649
|
+
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
650
|
"div",
|
|
1140
651
|
{
|
|
1141
652
|
key: idx,
|
|
1142
653
|
className: "flex flex-col group animate-in fade-in slide-in-from-bottom-4 duration-700 fill-mode-both",
|
|
1143
654
|
style: { animationDelay: feature.delay || "0ms" }
|
|
1144
655
|
},
|
|
1145
|
-
/* @__PURE__ */
|
|
1146
|
-
/* @__PURE__ */
|
|
656
|
+
/* @__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))),
|
|
657
|
+
/* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("p", { className: "text-[13px] leading-relaxed text-neutral-600 pr-4" }, feature.desc))
|
|
1147
658
|
)))));
|
|
1148
659
|
};
|
|
1149
660
|
|
|
1150
661
|
// src/components/ManagedDocument.tsx
|
|
1151
|
-
import
|
|
662
|
+
import React10, { useState as useState6, useEffect as useEffect5, useRef as useRef5 } from "react";
|
|
1152
663
|
var ManagedDocument = ({
|
|
1153
664
|
tagline,
|
|
1154
665
|
title,
|
|
@@ -1156,9 +667,9 @@ var ManagedDocument = ({
|
|
|
1156
667
|
contactText,
|
|
1157
668
|
contactEmail
|
|
1158
669
|
}) => {
|
|
1159
|
-
const [isAnimating, setIsAnimating] =
|
|
1160
|
-
const titleRef =
|
|
1161
|
-
|
|
670
|
+
const [isAnimating, setIsAnimating] = useState6(false);
|
|
671
|
+
const titleRef = useRef5(null);
|
|
672
|
+
useEffect5(() => {
|
|
1162
673
|
const observer = new IntersectionObserver(
|
|
1163
674
|
([entry]) => {
|
|
1164
675
|
if (entry.isIntersecting) {
|
|
@@ -1178,19 +689,19 @@ var ManagedDocument = ({
|
|
|
1178
689
|
}, []);
|
|
1179
690
|
return (
|
|
1180
691
|
// Outer layout wrapper (takes up available space, adds padding)
|
|
1181
|
-
/* @__PURE__ */
|
|
692
|
+
/* @__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
693
|
"h1",
|
|
1183
694
|
{
|
|
1184
695
|
ref: titleRef,
|
|
1185
|
-
className: `text-3xl mt-4 text-
|
|
696
|
+
className: ` text-3xl mt-4 text-black tracking-tight text-left ${isAnimating ? "" : ""}`,
|
|
1186
697
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
1187
698
|
},
|
|
1188
699
|
title
|
|
1189
|
-
)), sections.map((section, index) => /* @__PURE__ */
|
|
700
|
+
)), 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
701
|
"a",
|
|
1191
702
|
{
|
|
1192
703
|
href: `mailto:${contactEmail}`,
|
|
1193
|
-
className: "text-
|
|
704
|
+
className: "text-black decoration-black decoration-2 underline-offset-4 ml-1 transition-colors"
|
|
1194
705
|
},
|
|
1195
706
|
contactEmail
|
|
1196
707
|
))))))
|
|
@@ -1198,18 +709,18 @@ var ManagedDocument = ({
|
|
|
1198
709
|
};
|
|
1199
710
|
|
|
1200
711
|
// src/components/ManagedContactBlock.tsx
|
|
1201
|
-
import
|
|
712
|
+
import React11, { useState as useState7, useEffect as useEffect6 } from "react";
|
|
1202
713
|
import { HugeiconsIcon as HugeiconsIcon6 } from "@hugeicons/react";
|
|
1203
714
|
var SecureEmail = ({ user, domain, className }) => {
|
|
1204
|
-
const [isMounted, setIsMounted] =
|
|
1205
|
-
|
|
715
|
+
const [isMounted, setIsMounted] = useState7(false);
|
|
716
|
+
useEffect6(() => {
|
|
1206
717
|
setIsMounted(true);
|
|
1207
718
|
}, []);
|
|
1208
719
|
if (!isMounted) {
|
|
1209
|
-
return /* @__PURE__ */
|
|
720
|
+
return /* @__PURE__ */ React11.createElement("span", { className, style: { opacity: 0 } }, "Loading");
|
|
1210
721
|
}
|
|
1211
722
|
const email = `${user}@${domain}`;
|
|
1212
|
-
return /* @__PURE__ */
|
|
723
|
+
return /* @__PURE__ */ React11.createElement("a", { href: `mailto:${email}`, className }, email);
|
|
1213
724
|
};
|
|
1214
725
|
var ManagedContactBlock = ({
|
|
1215
726
|
tagline,
|
|
@@ -1218,7 +729,7 @@ var ManagedContactBlock = ({
|
|
|
1218
729
|
emails,
|
|
1219
730
|
socials
|
|
1220
731
|
}) => {
|
|
1221
|
-
return /* @__PURE__ */
|
|
732
|
+
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
733
|
"div",
|
|
1223
734
|
{
|
|
1224
735
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
@@ -1227,51 +738,51 @@ var ManagedContactBlock = ({
|
|
|
1227
738
|
backgroundRepeat: "repeat"
|
|
1228
739
|
}
|
|
1229
740
|
}
|
|
1230
|
-
), /* @__PURE__ */
|
|
741
|
+
), /* @__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
742
|
"a",
|
|
1232
743
|
{
|
|
1233
744
|
href: `tel:${company.phone.replace(/\s+/g, "")}`,
|
|
1234
|
-
className: "transition-colors hover:text-
|
|
745
|
+
className: "transition-colors hover:text-black"
|
|
1235
746
|
},
|
|
1236
747
|
company.phone
|
|
1237
|
-
)))), emails && emails.length > 0 && /* @__PURE__ */
|
|
748
|
+
)))), 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
749
|
SecureEmail,
|
|
1239
750
|
{
|
|
1240
751
|
user: email.user,
|
|
1241
752
|
domain: email.domain,
|
|
1242
|
-
className: "text-neutral-
|
|
753
|
+
className: "text-neutral-600 transition-colors hover:text-black"
|
|
1243
754
|
}
|
|
1244
|
-
))))), socials && socials.length > 0 && /* @__PURE__ */
|
|
755
|
+
))))), 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
756
|
"a",
|
|
1246
757
|
{
|
|
1247
758
|
key: idx,
|
|
1248
759
|
href: social.href,
|
|
1249
760
|
target: "_blank",
|
|
1250
761
|
rel: "noopener noreferrer",
|
|
1251
|
-
className: "flex items-center gap-3 transition-colors group text-neutral-
|
|
762
|
+
className: "flex items-center gap-3 transition-colors group text-neutral-600 hover:text-black",
|
|
1252
763
|
"aria-label": social.label
|
|
1253
764
|
},
|
|
1254
|
-
/* @__PURE__ */
|
|
1255
|
-
/* @__PURE__ */
|
|
765
|
+
/* @__PURE__ */ React11.createElement(HugeiconsIcon6, { icon: social.icon, size: 18 }),
|
|
766
|
+
/* @__PURE__ */ React11.createElement("span", { className: "text-[13px]" }, social.label)
|
|
1256
767
|
)))))))));
|
|
1257
768
|
};
|
|
1258
769
|
|
|
1259
770
|
// src/components/ManagedPricingBlock.tsx
|
|
1260
|
-
import
|
|
771
|
+
import React12, { useState as useState8, useEffect as useEffect7, useRef as useRef6 } from "react";
|
|
1261
772
|
import Link5 from "next/link";
|
|
1262
773
|
import Image4 from "next/image";
|
|
1263
|
-
var CheckIcon = ({ className = "" }) => /* @__PURE__ */
|
|
1264
|
-
var CrossIcon = ({ className = "" }) => /* @__PURE__ */
|
|
774
|
+
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" }));
|
|
775
|
+
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
776
|
var ManagedPricingBlock = ({
|
|
1266
777
|
tagline,
|
|
1267
778
|
title,
|
|
1268
779
|
plans = [],
|
|
1269
780
|
tabs
|
|
1270
781
|
}) => {
|
|
1271
|
-
const [isAnimating, setIsAnimating] =
|
|
1272
|
-
const [activeTabIndex, setActiveTabIndex] =
|
|
1273
|
-
const titleRef =
|
|
1274
|
-
|
|
782
|
+
const [isAnimating, setIsAnimating] = useState8(false);
|
|
783
|
+
const [activeTabIndex, setActiveTabIndex] = useState8(0);
|
|
784
|
+
const titleRef = useRef6(null);
|
|
785
|
+
useEffect7(() => {
|
|
1275
786
|
const observer = new IntersectionObserver(
|
|
1276
787
|
([entry]) => {
|
|
1277
788
|
if (entry.isIntersecting) {
|
|
@@ -1291,79 +802,79 @@ var ManagedPricingBlock = ({
|
|
|
1291
802
|
}, []);
|
|
1292
803
|
const hasTabs = tabs && tabs.length > 0;
|
|
1293
804
|
const currentPlans = hasTabs ? tabs[activeTabIndex].plans : plans;
|
|
1294
|
-
return /* @__PURE__ */
|
|
805
|
+
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
806
|
"h1",
|
|
1296
807
|
{
|
|
1297
808
|
ref: titleRef,
|
|
1298
|
-
className: `text-2xl sm:text-3xl mt-3 text-
|
|
809
|
+
className: `text-2xl sm:text-3xl mt-3 text-black tracking-tight ${isAnimating ? "" : ""}`,
|
|
1299
810
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
1300
811
|
},
|
|
1301
812
|
title
|
|
1302
|
-
)), hasTabs && /* @__PURE__ */
|
|
813
|
+
)), 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
814
|
const isActive = activeTabIndex === idx;
|
|
1304
|
-
return /* @__PURE__ */
|
|
815
|
+
return /* @__PURE__ */ React12.createElement(
|
|
1305
816
|
"button",
|
|
1306
817
|
{
|
|
1307
818
|
key: idx,
|
|
1308
819
|
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-
|
|
820
|
+
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
821
|
},
|
|
1311
822
|
tab.label
|
|
1312
823
|
);
|
|
1313
|
-
}))), /* @__PURE__ */
|
|
824
|
+
}))), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5 w-full max-w-4xl animate-in slide-in-from-bottom-2 fade-in duration-500" }, currentPlans.map((plan, planIdx) => /* @__PURE__ */ React12.createElement(
|
|
1314
825
|
"div",
|
|
1315
826
|
{
|
|
1316
827
|
key: `${activeTabIndex}-${planIdx}`,
|
|
1317
|
-
className: `bg-
|
|
828
|
+
className: `bg-white rounded-3xl p-6 flex flex-col relative overflow-hidden transition-all duration-300 ${plan.isPremium ? "" : ""}`
|
|
1318
829
|
},
|
|
1319
|
-
/* @__PURE__ */
|
|
830
|
+
/* @__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
831
|
"div",
|
|
1321
832
|
{
|
|
1322
833
|
key: logoIdx,
|
|
1323
834
|
className: "relative w-5 h-5 overflow-hidden flex items-center justify-center shrink-0"
|
|
1324
835
|
},
|
|
1325
|
-
/* @__PURE__ */
|
|
836
|
+
/* @__PURE__ */ React12.createElement(
|
|
1326
837
|
Image4,
|
|
1327
838
|
{
|
|
1328
839
|
src: logo.src,
|
|
1329
840
|
alt: logo.alt,
|
|
1330
841
|
width: 16,
|
|
1331
842
|
height: 16,
|
|
1332
|
-
className: "object-contain
|
|
843
|
+
className: "object-contain"
|
|
1333
844
|
}
|
|
1334
845
|
)
|
|
1335
846
|
)))),
|
|
1336
|
-
plan.isPremium ? /* @__PURE__ */
|
|
847
|
+
plan.isPremium ? /* @__PURE__ */ React12.createElement(ThreeDButton, { href: plan.ctaHref, className: "mb-6 w-full" }, plan.ctaText) : /* @__PURE__ */ React12.createElement(
|
|
1337
848
|
Link5,
|
|
1338
849
|
{
|
|
1339
850
|
href: plan.ctaHref,
|
|
1340
|
-
className: "w-full py-2
|
|
851
|
+
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
852
|
},
|
|
1342
853
|
plan.ctaText
|
|
1343
854
|
),
|
|
1344
|
-
/* @__PURE__ */
|
|
855
|
+
/* @__PURE__ */ React12.createElement("div", { className: "flex flex-col gap-3" }, plan.features.map((feature, featureIdx) => {
|
|
1345
856
|
const isAvailable = feature.value !== false;
|
|
1346
857
|
const valueText = typeof feature.value === "string" ? feature.value : "";
|
|
1347
|
-
return /* @__PURE__ */
|
|
858
|
+
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
859
|
}))
|
|
1349
860
|
)))));
|
|
1350
861
|
};
|
|
1351
862
|
|
|
1352
863
|
// src/components/ManagedBoardBlock.tsx
|
|
1353
|
-
import
|
|
864
|
+
import React13 from "react";
|
|
1354
865
|
import Image5 from "next/image";
|
|
1355
866
|
import { HugeiconsIcon as HugeiconsIcon7 } from "@hugeicons/react";
|
|
1356
867
|
import { TwitterIcon, LinkedinIcon } from "@hugeicons/core-free-icons";
|
|
1357
|
-
var MemberSocialLink = ({ href, icon, label, name }) => /* @__PURE__ */
|
|
868
|
+
var MemberSocialLink = ({ href, icon, label, name }) => /* @__PURE__ */ React13.createElement(
|
|
1358
869
|
"a",
|
|
1359
870
|
{
|
|
1360
871
|
href,
|
|
1361
872
|
target: "_blank",
|
|
1362
873
|
rel: "noopener noreferrer",
|
|
1363
|
-
className: "text-neutral-
|
|
874
|
+
className: "text-neutral-400 hover:text-black transition-colors",
|
|
1364
875
|
"aria-label": `${name} on ${label}`
|
|
1365
876
|
},
|
|
1366
|
-
/* @__PURE__ */
|
|
877
|
+
/* @__PURE__ */ React13.createElement(HugeiconsIcon7, { icon, size: 16 })
|
|
1367
878
|
);
|
|
1368
879
|
var ManagedBoardBlock = ({
|
|
1369
880
|
tagline,
|
|
@@ -1372,7 +883,7 @@ var ManagedBoardBlock = ({
|
|
|
1372
883
|
contactText,
|
|
1373
884
|
contactEmail
|
|
1374
885
|
}) => {
|
|
1375
|
-
return /* @__PURE__ */
|
|
886
|
+
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
887
|
"div",
|
|
1377
888
|
{
|
|
1378
889
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
@@ -1381,7 +892,7 @@ var ManagedBoardBlock = ({
|
|
|
1381
892
|
backgroundRepeat: "repeat"
|
|
1382
893
|
}
|
|
1383
894
|
}
|
|
1384
|
-
), /* @__PURE__ */
|
|
895
|
+
), /* @__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
896
|
Image5,
|
|
1386
897
|
{
|
|
1387
898
|
src: member.imageSrc,
|
|
@@ -1390,7 +901,7 @@ var ManagedBoardBlock = ({
|
|
|
1390
901
|
sizes: "(max-width: 768px) 56px, 64px",
|
|
1391
902
|
className: "object-cover grayscale opacity-100 transition-opacity"
|
|
1392
903
|
}
|
|
1393
|
-
)), /* @__PURE__ */
|
|
904
|
+
)), /* @__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
905
|
MemberSocialLink,
|
|
1395
906
|
{
|
|
1396
907
|
href: `https://x.com/${member.twitterHandle}`,
|
|
@@ -1398,7 +909,7 @@ var ManagedBoardBlock = ({
|
|
|
1398
909
|
label: "X",
|
|
1399
910
|
name: member.name
|
|
1400
911
|
}
|
|
1401
|
-
), member.linkedinHandle && member.linkedinHandle.length > 0 && /* @__PURE__ */
|
|
912
|
+
), member.linkedinHandle && member.linkedinHandle.length > 0 && /* @__PURE__ */ React13.createElement(
|
|
1402
913
|
MemberSocialLink,
|
|
1403
914
|
{
|
|
1404
915
|
href: member.linkedinHandle,
|
|
@@ -1406,38 +917,28 @@ var ManagedBoardBlock = ({
|
|
|
1406
917
|
label: "LinkedIn",
|
|
1407
918
|
name: member.name
|
|
1408
919
|
}
|
|
1409
|
-
))))))), (contactText || contactEmail) && /* @__PURE__ */
|
|
920
|
+
))))))), (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
921
|
};
|
|
1411
922
|
|
|
1412
923
|
// src/components/ManagedNotFoundBlock.tsx
|
|
1413
|
-
import
|
|
1414
|
-
import Link6 from "next/link";
|
|
924
|
+
import React14 from "react";
|
|
1415
925
|
var ManagedNotFoundBlock = ({
|
|
1416
926
|
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 = "/"
|
|
927
|
+
description = "The page you are looking for does not exist or has been moved."
|
|
1420
928
|
}) => {
|
|
1421
|
-
return /* @__PURE__ */
|
|
929
|
+
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
930
|
"svg",
|
|
1423
931
|
{
|
|
1424
932
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1425
933
|
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"
|
|
934
|
+
className: "w-12 h-12 fill-neutral-100"
|
|
1434
935
|
},
|
|
1435
|
-
|
|
1436
|
-
)));
|
|
936
|
+
/* @__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" })
|
|
937
|
+
)), /* @__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
938
|
};
|
|
1438
939
|
|
|
1439
940
|
// src/components/PageSpinner.tsx
|
|
1440
|
-
import
|
|
941
|
+
import React15 from "react";
|
|
1441
942
|
import { HugeiconsIcon as HugeiconsIcon8 } from "@hugeicons/react";
|
|
1442
943
|
import { Loading03Icon as Loading03Icon3 } from "@hugeicons/core-free-icons";
|
|
1443
944
|
var PageSpinner = ({
|
|
@@ -1447,22 +948,22 @@ var PageSpinner = ({
|
|
|
1447
948
|
}) => {
|
|
1448
949
|
return (
|
|
1449
950
|
// z-[100] ensures it sits above absolute headers and modals
|
|
1450
|
-
/* @__PURE__ */
|
|
951
|
+
/* @__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
952
|
HugeiconsIcon8,
|
|
1452
953
|
{
|
|
1453
954
|
icon: Loading03Icon3,
|
|
1454
955
|
size,
|
|
1455
|
-
className: `animate-spin
|
|
956
|
+
className: `animate-spin mb-4 ${iconClassName}`
|
|
1456
957
|
}
|
|
1457
958
|
))
|
|
1458
959
|
);
|
|
1459
960
|
};
|
|
1460
961
|
|
|
1461
962
|
// src/components/ManagedToaster.tsx
|
|
1462
|
-
import
|
|
963
|
+
import React16 from "react";
|
|
1463
964
|
import { Toaster } from "react-hot-toast";
|
|
1464
965
|
var ManagedToaster = () => {
|
|
1465
|
-
return /* @__PURE__ */
|
|
966
|
+
return /* @__PURE__ */ React16.createElement(
|
|
1466
967
|
Toaster,
|
|
1467
968
|
{
|
|
1468
969
|
position: "top-right",
|
|
@@ -1494,7 +995,7 @@ var ManagedToaster = () => {
|
|
|
1494
995
|
};
|
|
1495
996
|
|
|
1496
997
|
// src/components/ManagedNewsletterSplitBlock.tsx
|
|
1497
|
-
import
|
|
998
|
+
import React17 from "react";
|
|
1498
999
|
import Image6 from "next/image";
|
|
1499
1000
|
var ManagedNewsletterSplitBlock = ({
|
|
1500
1001
|
tagline,
|
|
@@ -1508,7 +1009,7 @@ var ManagedNewsletterSplitBlock = ({
|
|
|
1508
1009
|
ctaHref = "/contact-us",
|
|
1509
1010
|
children
|
|
1510
1011
|
}) => {
|
|
1511
|
-
return /* @__PURE__ */
|
|
1012
|
+
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
1013
|
Image6,
|
|
1513
1014
|
{
|
|
1514
1015
|
src: imageSrc,
|
|
@@ -1518,23 +1019,23 @@ var ManagedNewsletterSplitBlock = ({
|
|
|
1518
1019
|
className: "object-cover object-top grayscale opacity-60",
|
|
1519
1020
|
quality: 100
|
|
1520
1021
|
}
|
|
1521
|
-
), /* @__PURE__ */
|
|
1022
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1522
1023
|
"div",
|
|
1523
1024
|
{
|
|
1524
1025
|
className: "absolute inset-0 z-10 pointer-events-none",
|
|
1525
1026
|
style: {
|
|
1526
|
-
background: "linear-gradient(to right, rgba(
|
|
1027
|
+
background: "linear-gradient(to right, rgba(255,255,255,0) 30%, #ffffff 100%)"
|
|
1527
1028
|
}
|
|
1528
1029
|
}
|
|
1529
|
-
), /* @__PURE__ */
|
|
1030
|
+
), /* @__PURE__ */ React17.createElement(
|
|
1530
1031
|
"div",
|
|
1531
1032
|
{
|
|
1532
1033
|
className: "absolute inset-x-0 bottom-0 h-40 z-10 pointer-events-none",
|
|
1533
1034
|
style: {
|
|
1534
|
-
background: "linear-gradient(to bottom, rgba(
|
|
1035
|
+
background: "linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%)"
|
|
1535
1036
|
}
|
|
1536
1037
|
}
|
|
1537
|
-
)), /* @__PURE__ */
|
|
1038
|
+
)), /* @__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
1039
|
"div",
|
|
1539
1040
|
{
|
|
1540
1041
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
@@ -1543,18 +1044,18 @@ var ManagedNewsletterSplitBlock = ({
|
|
|
1543
1044
|
backgroundRepeat: "repeat"
|
|
1544
1045
|
}
|
|
1545
1046
|
}
|
|
1546
|
-
), /* @__PURE__ */
|
|
1047
|
+
), /* @__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
1048
|
ThreeDButton,
|
|
1548
1049
|
{
|
|
1549
1050
|
href: ctaHref,
|
|
1550
|
-
className: "py-
|
|
1051
|
+
className: "py-3 tracking-widest text-[11px]"
|
|
1551
1052
|
},
|
|
1552
1053
|
ctaText
|
|
1553
1054
|
)))))));
|
|
1554
1055
|
};
|
|
1555
1056
|
|
|
1556
1057
|
// src/components/ReusableInputs.tsx
|
|
1557
|
-
import
|
|
1058
|
+
import React18 from "react";
|
|
1558
1059
|
var TextInput = ({
|
|
1559
1060
|
label,
|
|
1560
1061
|
value,
|
|
@@ -1565,7 +1066,7 @@ var TextInput = ({
|
|
|
1565
1066
|
readOnly,
|
|
1566
1067
|
type = "text",
|
|
1567
1068
|
onClick
|
|
1568
|
-
}) => /* @__PURE__ */
|
|
1069
|
+
}) => /* @__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
1070
|
"input",
|
|
1570
1071
|
{
|
|
1571
1072
|
type,
|
|
@@ -1576,7 +1077,7 @@ var TextInput = ({
|
|
|
1576
1077
|
readOnly,
|
|
1577
1078
|
autoComplete: "off",
|
|
1578
1079
|
spellCheck: "false",
|
|
1579
|
-
className: `w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-
|
|
1080
|
+
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
1081
|
}
|
|
1581
1082
|
));
|
|
1582
1083
|
var NumberInput = ({
|
|
@@ -1586,7 +1087,7 @@ var NumberInput = ({
|
|
|
1586
1087
|
placeholder,
|
|
1587
1088
|
maxLength,
|
|
1588
1089
|
disabled
|
|
1589
|
-
}) => /* @__PURE__ */
|
|
1090
|
+
}) => /* @__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
1091
|
"input",
|
|
1591
1092
|
{
|
|
1592
1093
|
type: "text",
|
|
@@ -1599,19 +1100,19 @@ var NumberInput = ({
|
|
|
1599
1100
|
disabled,
|
|
1600
1101
|
autoComplete: "off",
|
|
1601
1102
|
spellCheck: "false",
|
|
1602
|
-
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-
|
|
1103
|
+
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
1104
|
}
|
|
1604
1105
|
));
|
|
1605
1106
|
|
|
1606
1107
|
// src/components/PortfolioHero.tsx
|
|
1607
|
-
import
|
|
1608
|
-
import
|
|
1108
|
+
import React19, { useEffect as useEffect8, useRef as useRef7 } from "react";
|
|
1109
|
+
import Link6 from "next/link";
|
|
1609
1110
|
import Image7 from "next/image";
|
|
1610
1111
|
import { HugeiconsIcon as HugeiconsIcon9 } from "@hugeicons/react";
|
|
1611
1112
|
import { ArrowRight01Icon as ArrowRight01Icon2 } from "@hugeicons/core-free-icons";
|
|
1612
1113
|
var useScrollAnimation = () => {
|
|
1613
|
-
const elementRef =
|
|
1614
|
-
|
|
1114
|
+
const elementRef = useRef7(null);
|
|
1115
|
+
useEffect8(() => {
|
|
1615
1116
|
const el = elementRef.current;
|
|
1616
1117
|
if (!el) return;
|
|
1617
1118
|
const observer = new IntersectionObserver(
|
|
@@ -1647,13 +1148,13 @@ var PortfolioHero = ({
|
|
|
1647
1148
|
secondaryCtaHref
|
|
1648
1149
|
}) => {
|
|
1649
1150
|
const heroContentRef = useScrollAnimation();
|
|
1650
|
-
return /* @__PURE__ */
|
|
1151
|
+
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
1152
|
"div",
|
|
1652
1153
|
{
|
|
1653
1154
|
ref: heroContentRef,
|
|
1654
1155
|
className: "w-full opacity-0 translate-y-5 transition-all duration-1000 ease-out relative z-10"
|
|
1655
1156
|
},
|
|
1656
|
-
/* @__PURE__ */
|
|
1157
|
+
/* @__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
1158
|
Image7,
|
|
1658
1159
|
{
|
|
1659
1160
|
src: imageSrc,
|
|
@@ -1664,38 +1165,38 @@ var PortfolioHero = ({
|
|
|
1664
1165
|
sizes: "(max-width: 640px) 80px, 128px",
|
|
1665
1166
|
quality: 100
|
|
1666
1167
|
}
|
|
1667
|
-
)), /* @__PURE__ */
|
|
1168
|
+
)), /* @__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
1169
|
"a",
|
|
1669
1170
|
{
|
|
1670
1171
|
href: socialLinkHref,
|
|
1671
1172
|
target: "_blank",
|
|
1672
1173
|
rel: "noopener noreferrer",
|
|
1673
|
-
className: "text-[11px] md:text-[14px] text-
|
|
1174
|
+
className: "text-[11px] md:text-[14px] text-black hover:text-neutral-500 transition-colors mt-1 underline underline-offset-4 decoration-neutral-300"
|
|
1674
1175
|
},
|
|
1675
1176
|
socialLinkText
|
|
1676
1177
|
))),
|
|
1677
|
-
/* @__PURE__ */
|
|
1678
|
-
/* @__PURE__ */
|
|
1178
|
+
/* @__PURE__ */ React19.createElement("p", { className: "text-[13px] leading-[1.8] max-w-4xl mb-12 text-neutral-600" }, bio),
|
|
1179
|
+
/* @__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
1180
|
ThreeDButton,
|
|
1680
1181
|
{
|
|
1681
1182
|
href: primaryCtaHref,
|
|
1682
|
-
className: "py-
|
|
1183
|
+
className: "py-3 tracking-widest text-[11px]"
|
|
1683
1184
|
},
|
|
1684
1185
|
primaryCtaText
|
|
1685
|
-
)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */
|
|
1686
|
-
|
|
1186
|
+
)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React19.createElement(
|
|
1187
|
+
Link6,
|
|
1687
1188
|
{
|
|
1688
1189
|
href: secondaryCtaHref,
|
|
1689
|
-
className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em]
|
|
1190
|
+
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
1191
|
},
|
|
1691
1192
|
secondaryCtaText,
|
|
1692
|
-
/* @__PURE__ */
|
|
1193
|
+
/* @__PURE__ */ React19.createElement(HugeiconsIcon9, { icon: ArrowRight01Icon2, size: 16 })
|
|
1693
1194
|
))
|
|
1694
1195
|
));
|
|
1695
1196
|
};
|
|
1696
1197
|
|
|
1697
1198
|
// src/components/GifFeatureCard.tsx
|
|
1698
|
-
import
|
|
1199
|
+
import React20, { useState as useState9 } from "react";
|
|
1699
1200
|
import Image8 from "next/image";
|
|
1700
1201
|
import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react";
|
|
1701
1202
|
import { Loading03Icon as Loading03Icon4 } from "@hugeicons/core-free-icons";
|
|
@@ -1706,20 +1207,20 @@ var GifFeatureCard = ({
|
|
|
1706
1207
|
alt = "Feature animation",
|
|
1707
1208
|
className = "aspect-video"
|
|
1708
1209
|
}) => {
|
|
1709
|
-
const [isLoading, setIsLoading] =
|
|
1710
|
-
return /* @__PURE__ */
|
|
1210
|
+
const [isLoading, setIsLoading] = useState9(true);
|
|
1211
|
+
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
1212
|
HugeiconsIcon10,
|
|
1712
1213
|
{
|
|
1713
1214
|
icon: Loading03Icon4,
|
|
1714
1215
|
size: 32,
|
|
1715
1216
|
className: "animate-spin text-white"
|
|
1716
1217
|
}
|
|
1717
|
-
)), /* @__PURE__ */
|
|
1218
|
+
)), /* @__PURE__ */ React20.createElement(
|
|
1718
1219
|
"div",
|
|
1719
1220
|
{
|
|
1720
1221
|
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
1222
|
},
|
|
1722
|
-
/* @__PURE__ */
|
|
1223
|
+
/* @__PURE__ */ React20.createElement(
|
|
1723
1224
|
Image8,
|
|
1724
1225
|
{
|
|
1725
1226
|
src: gifSrc,
|
|
@@ -1730,1202 +1231,16 @@ var GifFeatureCard = ({
|
|
|
1730
1231
|
className: "object-cover object-center pointer-events-none"
|
|
1731
1232
|
}
|
|
1732
1233
|
)
|
|
1733
|
-
), /* @__PURE__ */
|
|
1234
|
+
), /* @__PURE__ */ React20.createElement(
|
|
1734
1235
|
"div",
|
|
1735
1236
|
{
|
|
1736
1237
|
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
1238
|
}
|
|
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
|
-
} from "@hugeicons/core-free-icons";
|
|
2216
|
-
var UniversalProfileSettings = ({
|
|
2217
|
-
initialFirstName,
|
|
2218
|
-
initialLastName,
|
|
2219
|
-
email,
|
|
2220
|
-
accountStatus = "GOOD",
|
|
2221
|
-
memberSince,
|
|
2222
|
-
isReadOnly = false,
|
|
2223
|
-
bannerProps,
|
|
2224
|
-
hasPin = false,
|
|
2225
|
-
isPinLoading = false,
|
|
2226
|
-
onSavePin,
|
|
2227
|
-
onSaveProfile
|
|
2228
|
-
}) => {
|
|
2229
|
-
const [firstName, setFirstName] = useState15(initialFirstName);
|
|
2230
|
-
const [lastName, setLastName] = useState15(initialLastName);
|
|
2231
|
-
const [isSubmitting, setIsSubmitting] = useState15(false);
|
|
2232
|
-
const [isPinModalOpen, setIsPinModalOpen] = useState15(false);
|
|
2233
|
-
const [oldPin, setOldPin] = useState15("");
|
|
2234
|
-
const [newPin, setNewPin] = useState15("");
|
|
2235
|
-
const [confirmPin, setConfirmPin] = useState15("");
|
|
2236
|
-
const [isPinSubmitting, setIsPinSubmitting] = useState15(false);
|
|
2237
|
-
useEffect13(() => {
|
|
2238
|
-
setFirstName(initialFirstName || "");
|
|
2239
|
-
setLastName(initialLastName || "");
|
|
2240
|
-
}, [initialFirstName, initialLastName]);
|
|
2241
|
-
const handleFirstNameChange = (val) => {
|
|
2242
|
-
setFirstName(val.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50));
|
|
2243
|
-
};
|
|
2244
|
-
const handleLastNameChange = (val) => {
|
|
2245
|
-
setLastName(val.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50));
|
|
2246
|
-
};
|
|
2247
|
-
const handleSave = async (e) => {
|
|
2248
|
-
e.preventDefault();
|
|
2249
|
-
if (isSubmitting || isReadOnly) return;
|
|
2250
|
-
setIsSubmitting(true);
|
|
2251
|
-
try {
|
|
2252
|
-
const res = await onSaveProfile({ firstName, lastName });
|
|
2253
|
-
if (res.success) {
|
|
2254
|
-
toast5.success("Profile updated successfully.");
|
|
2255
|
-
setTimeout(() => window.location.reload(), 1e3);
|
|
2256
|
-
} else {
|
|
2257
|
-
toast5.error(res.error || "Uh oh! Something went wrong.");
|
|
2258
|
-
setIsSubmitting(false);
|
|
2259
|
-
}
|
|
2260
|
-
} catch (error) {
|
|
2261
|
-
toast5.error("Uh oh! Something went wrong.");
|
|
2262
|
-
setIsSubmitting(false);
|
|
2263
|
-
}
|
|
2264
|
-
};
|
|
2265
|
-
const closePinModal = () => {
|
|
2266
|
-
if (isPinSubmitting) return;
|
|
2267
|
-
setIsPinModalOpen(false);
|
|
2268
|
-
setOldPin("");
|
|
2269
|
-
setNewPin("");
|
|
2270
|
-
setConfirmPin("");
|
|
2271
|
-
};
|
|
2272
|
-
const handlePinInput = (val, setter) => {
|
|
2273
|
-
setter(val.replace(/\D/g, "").substring(0, 4));
|
|
2274
|
-
};
|
|
2275
|
-
const handlePinSubmit = async (e) => {
|
|
2276
|
-
e.preventDefault();
|
|
2277
|
-
if (!onSavePin) return;
|
|
2278
|
-
if (hasPin && oldPin.length !== 4) return toast5.error("Old PIN must be exactly 4 digits.");
|
|
2279
|
-
if (newPin.length !== 4) return toast5.error("New PIN must be exactly 4 digits.");
|
|
2280
|
-
if (newPin !== confirmPin) return toast5.error("New PINs do not match.");
|
|
2281
|
-
setIsPinSubmitting(true);
|
|
2282
|
-
try {
|
|
2283
|
-
const action = hasPin ? "change_pin" : "create_pin";
|
|
2284
|
-
const res = await onSavePin({
|
|
2285
|
-
action,
|
|
2286
|
-
oldPin: hasPin ? oldPin : void 0,
|
|
2287
|
-
newPin
|
|
2288
|
-
});
|
|
2289
|
-
if (res.success) {
|
|
2290
|
-
toast5.success(res.message || "PIN updated successfully.");
|
|
2291
|
-
closePinModal();
|
|
2292
|
-
} else {
|
|
2293
|
-
toast5.error(res.error || "Failed to update PIN.");
|
|
2294
|
-
}
|
|
2295
|
-
} catch (error) {
|
|
2296
|
-
toast5.error("Uh oh! Something went wrong.");
|
|
2297
|
-
} finally {
|
|
2298
|
-
setIsPinSubmitting(false);
|
|
2299
|
-
}
|
|
2300
|
-
};
|
|
2301
|
-
const hasChanges = firstName !== initialFirstName || lastName !== initialLastName;
|
|
2302
|
-
const isSaveDisabled = isSubmitting || isReadOnly || !hasChanges || firstName.trim().length === 0 || lastName.trim().length === 0;
|
|
2303
|
-
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(
|
|
2304
|
-
TextInput,
|
|
2305
|
-
{
|
|
2306
|
-
label: "First Name",
|
|
2307
|
-
value: firstName,
|
|
2308
|
-
onChange: handleFirstNameChange,
|
|
2309
|
-
disabled: isReadOnly || isSubmitting,
|
|
2310
|
-
placeholder: "System"
|
|
2311
|
-
}
|
|
2312
|
-
)), /* @__PURE__ */ React26.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React26.createElement(
|
|
2313
|
-
TextInput,
|
|
2314
|
-
{
|
|
2315
|
-
label: "Last Name",
|
|
2316
|
-
value: lastName,
|
|
2317
|
-
onChange: handleLastNameChange,
|
|
2318
|
-
disabled: isReadOnly || isSubmitting,
|
|
2319
|
-
placeholder: "Admin"
|
|
2320
|
-
}
|
|
2321
|
-
))), /* @__PURE__ */ React26.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ React26.createElement(
|
|
2322
|
-
TextInput,
|
|
2323
|
-
{
|
|
2324
|
-
label: "Email ID",
|
|
2325
|
-
value: email,
|
|
2326
|
-
onChange: () => {
|
|
2327
|
-
},
|
|
2328
|
-
disabled: true
|
|
2329
|
-
}
|
|
2330
|
-
), /* @__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(
|
|
2331
|
-
"button",
|
|
2332
|
-
{
|
|
2333
|
-
type: "button",
|
|
2334
|
-
onClick: () => setIsPinModalOpen(true),
|
|
2335
|
-
className: "text-[11px] px-4 py-2.5 border border-neutral-700 rounded-full text-white transition-colors outline-none"
|
|
2336
|
-
},
|
|
2337
|
-
"PIN Settings"
|
|
2338
|
-
))), /* @__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(
|
|
2339
|
-
"button",
|
|
2340
|
-
{
|
|
2341
|
-
type: "button",
|
|
2342
|
-
onClick: () => {
|
|
2343
|
-
setFirstName(initialFirstName);
|
|
2344
|
-
setLastName(initialLastName);
|
|
2345
|
-
},
|
|
2346
|
-
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"
|
|
2347
|
-
},
|
|
2348
|
-
"Cancel"
|
|
2349
|
-
), /* @__PURE__ */ React26.createElement(
|
|
2350
|
-
ThreeDActionButton,
|
|
2351
|
-
{
|
|
2352
|
-
type: "submit",
|
|
2353
|
-
disabled: isSaveDisabled,
|
|
2354
|
-
isLoading: isSubmitting,
|
|
2355
|
-
className: "min-w-32 w-full sm:w-auto"
|
|
2356
|
-
},
|
|
2357
|
-
"Save Changes"
|
|
2358
|
-
))))), 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(
|
|
2359
|
-
TextInput,
|
|
2360
|
-
{
|
|
2361
|
-
type: "password",
|
|
2362
|
-
label: "Old PIN",
|
|
2363
|
-
maxLength: 4,
|
|
2364
|
-
disabled: isPinSubmitting,
|
|
2365
|
-
value: oldPin,
|
|
2366
|
-
onChange: (val) => handlePinInput(val, setOldPin),
|
|
2367
|
-
placeholder: "\u2022\u2022\u2022\u2022"
|
|
2368
|
-
}
|
|
2369
|
-
), /* @__PURE__ */ React26.createElement(
|
|
2370
|
-
TextInput,
|
|
2371
|
-
{
|
|
2372
|
-
type: "password",
|
|
2373
|
-
label: hasPin ? "New PIN" : "Enter 4-Digit PIN",
|
|
2374
|
-
maxLength: 4,
|
|
2375
|
-
disabled: isPinSubmitting,
|
|
2376
|
-
value: newPin,
|
|
2377
|
-
onChange: (val) => handlePinInput(val, setNewPin),
|
|
2378
|
-
placeholder: "\u2022\u2022\u2022\u2022"
|
|
2379
|
-
}
|
|
2380
|
-
), /* @__PURE__ */ React26.createElement(
|
|
2381
|
-
TextInput,
|
|
2382
|
-
{
|
|
2383
|
-
type: "password",
|
|
2384
|
-
label: "Retype New PIN",
|
|
2385
|
-
maxLength: 4,
|
|
2386
|
-
disabled: isPinSubmitting,
|
|
2387
|
-
value: confirmPin,
|
|
2388
|
-
onChange: (val) => handlePinInput(val, setConfirmPin),
|
|
2389
|
-
placeholder: "\u2022\u2022\u2022\u2022"
|
|
2390
|
-
}
|
|
2391
|
-
), /* @__PURE__ */ React26.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React26.createElement(
|
|
2392
|
-
ThreeDActionButton,
|
|
2393
|
-
{
|
|
2394
|
-
type: "submit",
|
|
2395
|
-
disabled: isPinSubmitting || newPin.length !== 4 || confirmPin.length !== 4 || hasPin && oldPin.length !== 4,
|
|
2396
|
-
isLoading: isPinSubmitting,
|
|
2397
|
-
className: "w-full py-3"
|
|
2398
|
-
},
|
|
2399
|
-
hasPin ? "Update PIN" : "Set PIN"
|
|
2400
|
-
)))))));
|
|
2401
|
-
};
|
|
2402
|
-
|
|
2403
|
-
// src/components/UniversalErrorView.tsx
|
|
2404
|
-
import React27 from "react";
|
|
2405
|
-
import { HugeiconsIcon as HugeiconsIcon15 } from "@hugeicons/react";
|
|
2406
|
-
import { ConfusedIcon } from "@hugeicons/core-free-icons";
|
|
2407
|
-
var UniversalErrorView = ({
|
|
2408
|
-
isBooting,
|
|
2409
|
-
isLoading,
|
|
2410
|
-
activeData,
|
|
2411
|
-
activeError,
|
|
2412
|
-
envName,
|
|
2413
|
-
onRetry,
|
|
2414
|
-
returnUrl = "/app",
|
|
2415
|
-
returnLabel = "Return to Workspace"
|
|
2416
|
-
}) => {
|
|
2417
|
-
if (isBooting || isLoading && !activeData) {
|
|
2418
|
-
return /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-center h-screen w-full bg-black" }, /* @__PURE__ */ React27.createElement(PageSpinner, null));
|
|
2419
|
-
}
|
|
2420
|
-
if (!isLoading && (!activeData || activeError)) {
|
|
2421
|
-
const errorString = typeof activeError === "string" ? activeError : JSON.stringify(activeError || "");
|
|
2422
|
-
const errorMsg = errorString.toLowerCase();
|
|
2423
|
-
const isPermissionError = errorMsg.includes("forbidden") || errorMsg.includes("unauthorized") || errorMsg.includes("permission");
|
|
2424
|
-
const isNetworkError = errorMsg.includes("network") || errorMsg.includes("connection") || errorMsg.includes("fetch");
|
|
2425
|
-
const isNotFoundError = errorMsg.includes("not found") || errorMsg.includes("404") || errorMsg.includes("does not exist") || !activeData && !isPermissionError && !isNetworkError;
|
|
2426
|
-
const apiMessage = typeof activeError === "string" && activeError.trim() !== "" ? activeError : null;
|
|
2427
|
-
let title = "Oops Connection Error";
|
|
2428
|
-
let description = apiMessage || `We could not load your request. Please check your connection and try again.`;
|
|
2429
|
-
let IconComponent = ConfusedIcon;
|
|
2430
|
-
if (isNotFoundError) {
|
|
2431
|
-
title = "Oops its not your fault";
|
|
2432
|
-
description = apiMessage || `We could not reach the ${envName} you just loaded. Our team has been notified.`;
|
|
2433
|
-
} else if (isPermissionError) {
|
|
2434
|
-
title = "Access Restricted";
|
|
2435
|
-
description = apiMessage || `You have insufficient permissions to view this ${envName}. Please contact your administrator.`;
|
|
2436
|
-
}
|
|
2437
|
-
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(
|
|
2438
|
-
"button",
|
|
2439
|
-
{
|
|
2440
|
-
onClick: () => window.location.href = returnUrl,
|
|
2441
|
-
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"
|
|
2442
|
-
},
|
|
2443
|
-
returnLabel
|
|
2444
|
-
) : (
|
|
2445
|
-
// Soft errors (Network timeouts) allow them to retry or optionally retreat
|
|
2446
|
-
/* @__PURE__ */ React27.createElement(React27.Fragment, null, envName.toLowerCase().includes("application") && /* @__PURE__ */ React27.createElement(
|
|
2447
|
-
"button",
|
|
2448
|
-
{
|
|
2449
|
-
onClick: () => window.location.href = returnUrl,
|
|
2450
|
-
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"
|
|
2451
|
-
},
|
|
2452
|
-
"Back Home"
|
|
2453
|
-
), /* @__PURE__ */ React27.createElement(
|
|
2454
|
-
"button",
|
|
2455
|
-
{
|
|
2456
|
-
onClick: onRetry,
|
|
2457
|
-
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"
|
|
2458
|
-
},
|
|
2459
|
-
"Refresh ",
|
|
2460
|
-
envName
|
|
2461
|
-
))
|
|
2462
|
-
)));
|
|
2463
|
-
}
|
|
2464
|
-
return null;
|
|
2465
|
-
};
|
|
2466
|
-
|
|
2467
|
-
// src/components/UniversalTransactionPage.tsx
|
|
2468
|
-
import React28, { useState as useState16, useEffect as useEffect14, useRef as useRef10 } from "react";
|
|
2469
|
-
import { HugeiconsIcon as HugeiconsIcon16 } from "@hugeicons/react";
|
|
2470
|
-
import toast6 from "react-hot-toast";
|
|
2471
|
-
import {
|
|
2472
|
-
ArrowLeft01Icon as ArrowLeft01Icon3,
|
|
2473
|
-
ArrowRight01Icon as ArrowRight01Icon4,
|
|
2474
|
-
Loading03Icon as Loading03Icon6,
|
|
2475
|
-
ArrowDownRight01Icon,
|
|
2476
|
-
ArrowUpRight01Icon,
|
|
2477
|
-
Search01Icon,
|
|
2478
|
-
SearchList02Icon,
|
|
2479
|
-
ListSettingIcon,
|
|
2480
|
-
CancelCircleIcon as CancelCircleIcon3
|
|
2481
|
-
} from "@hugeicons/core-free-icons";
|
|
2482
|
-
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" }));
|
|
2483
|
-
var formatDate = (dateInput) => {
|
|
2484
|
-
const d = new Date(dateInput);
|
|
2485
|
-
const day = d.getDate();
|
|
2486
|
-
const month = d.toLocaleString("en-US", { month: "short" });
|
|
2487
|
-
const year = d.getFullYear();
|
|
2488
|
-
return `${day} ${month} ${year}`;
|
|
2489
|
-
};
|
|
2490
|
-
var formatTime = (dateInput) => {
|
|
2491
|
-
return new Date(dateInput).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
|
|
2492
|
-
};
|
|
2493
|
-
var truncateAddress = (address) => {
|
|
2494
|
-
if (!address || address.length < 12) return address;
|
|
2495
|
-
return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
|
|
2496
|
-
};
|
|
2497
|
-
var UniversalTransactionPage = ({
|
|
2498
|
-
headerTitle,
|
|
2499
|
-
headerDescription,
|
|
2500
|
-
hideControls = false,
|
|
2501
|
-
hideBalanceAmounts = false,
|
|
2502
|
-
hidePagination = false,
|
|
2503
|
-
transactions,
|
|
2504
|
-
isLoading,
|
|
2505
|
-
currentPage,
|
|
2506
|
-
totalPages,
|
|
2507
|
-
onPageChange,
|
|
2508
|
-
searchQuery,
|
|
2509
|
-
onSearchChange,
|
|
2510
|
-
activeDirectionFilter,
|
|
2511
|
-
onDirectionFilterChange,
|
|
2512
|
-
activeTypeFilter,
|
|
2513
|
-
onTypeFilterChange,
|
|
2514
|
-
onReportTransaction,
|
|
2515
|
-
onGenerateReceipt
|
|
2516
|
-
}) => {
|
|
2517
|
-
const [selectedTransaction, setSelectedTransaction] = useState16(null);
|
|
2518
|
-
const [isGeneratingReceipt, setIsGeneratingReceipt] = useState16(false);
|
|
2519
|
-
const [localSearchQuery, setLocalSearchQuery] = useState16(searchQuery);
|
|
2520
|
-
const [isTyping, setIsTyping] = useState16(false);
|
|
2521
|
-
const [isDirectionModalOpen, setIsDirectionModalOpen] = useState16(false);
|
|
2522
|
-
const [isTypeModalOpen, setIsTypeModalOpen] = useState16(false);
|
|
2523
|
-
const directionDropdownRef = useRef10(null);
|
|
2524
|
-
const typeDropdownRef = useRef10(null);
|
|
2525
|
-
useEffect14(() => {
|
|
2526
|
-
function handleClickOutside(event) {
|
|
2527
|
-
if (directionDropdownRef.current && !directionDropdownRef.current.contains(event.target)) {
|
|
2528
|
-
setIsDirectionModalOpen(false);
|
|
2529
|
-
}
|
|
2530
|
-
if (typeDropdownRef.current && !typeDropdownRef.current.contains(event.target)) {
|
|
2531
|
-
setIsTypeModalOpen(false);
|
|
2532
|
-
}
|
|
2533
|
-
}
|
|
2534
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
2535
|
-
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2536
|
-
}, []);
|
|
2537
|
-
useEffect14(() => {
|
|
2538
|
-
setIsTyping(true);
|
|
2539
|
-
const handler = setTimeout(() => {
|
|
2540
|
-
onSearchChange(localSearchQuery);
|
|
2541
|
-
setIsTyping(false);
|
|
2542
|
-
}, 600);
|
|
2543
|
-
return () => clearTimeout(handler);
|
|
2544
|
-
}, [localSearchQuery, onSearchChange]);
|
|
2545
|
-
useEffect14(() => {
|
|
2546
|
-
if (searchQuery === "" && localSearchQuery !== "") {
|
|
2547
|
-
setLocalSearchQuery("");
|
|
2548
|
-
}
|
|
2549
|
-
}, [searchQuery]);
|
|
2550
|
-
const getDisplayName = (tx) => {
|
|
2551
|
-
if (tx.metadata?.merchantName) return tx.metadata.merchantName;
|
|
2552
|
-
if (tx.metadata?.description) return tx.metadata.description;
|
|
2553
|
-
return tx.type === "CARD_TRANSACTION" ? "Card Transaction" : "Wallet Transaction";
|
|
2554
|
-
};
|
|
2555
|
-
const handleGenerateReceipt = async () => {
|
|
2556
|
-
if (!onGenerateReceipt || !selectedTransaction) return;
|
|
2557
|
-
setIsGeneratingReceipt(true);
|
|
2558
|
-
try {
|
|
2559
|
-
await onGenerateReceipt(selectedTransaction);
|
|
2560
|
-
toast6.success("Receipt generated successfully.");
|
|
2561
|
-
} catch (error) {
|
|
2562
|
-
toast6.error("Failed to generate receipt.");
|
|
2563
|
-
} finally {
|
|
2564
|
-
setIsGeneratingReceipt(false);
|
|
2565
|
-
}
|
|
2566
|
-
};
|
|
2567
|
-
const isListLoading = isLoading || isTyping;
|
|
2568
|
-
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(
|
|
2569
|
-
"input",
|
|
2570
|
-
{
|
|
2571
|
-
type: "text",
|
|
2572
|
-
placeholder: "Search reference or amount...",
|
|
2573
|
-
value: localSearchQuery,
|
|
2574
|
-
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
2575
|
-
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"
|
|
2576
|
-
}
|
|
2577
|
-
)), /* @__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(
|
|
2578
|
-
"button",
|
|
2579
|
-
{
|
|
2580
|
-
onClick: () => setIsDirectionModalOpen(true),
|
|
2581
|
-
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"
|
|
2582
|
-
},
|
|
2583
|
-
/* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: SearchList02Icon, size: 12 }),
|
|
2584
|
-
activeDirectionFilter === "ALL" ? "Payment Type" : activeDirectionFilter
|
|
2585
|
-
), /* @__PURE__ */ React28.createElement(
|
|
2586
|
-
"button",
|
|
2587
|
-
{
|
|
2588
|
-
onClick: () => setIsTypeModalOpen(true),
|
|
2589
|
-
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"
|
|
2590
|
-
},
|
|
2591
|
-
/* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: ListSettingIcon, size: 14 }),
|
|
2592
|
-
activeTypeFilter === "ALL" ? "All Transactions" : activeTypeFilter.replace("_", " ")
|
|
2593
|
-
))), /* @__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(
|
|
2594
|
-
"div",
|
|
2595
|
-
{
|
|
2596
|
-
key: tx.id,
|
|
2597
|
-
onClick: () => setSelectedTransaction(tx),
|
|
2598
|
-
className: "flex items-center justify-between py-4 /50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
|
|
2599
|
-
},
|
|
2600
|
-
/* @__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))),
|
|
2601
|
-
/* @__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()))
|
|
2602
|
-
))), !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(
|
|
2603
|
-
"button",
|
|
2604
|
-
{
|
|
2605
|
-
onClick: () => onPageChange(currentPage - 1),
|
|
2606
|
-
disabled: currentPage <= 1 || isListLoading,
|
|
2607
|
-
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"
|
|
2608
|
-
},
|
|
2609
|
-
/* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: ArrowLeft01Icon3, size: 14 })
|
|
2610
|
-
), /* @__PURE__ */ React28.createElement(
|
|
2611
|
-
"button",
|
|
2612
|
-
{
|
|
2613
|
-
onClick: () => onPageChange(currentPage + 1),
|
|
2614
|
-
disabled: currentPage >= totalPages || isListLoading || totalPages === 0,
|
|
2615
|
-
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"
|
|
2616
|
-
},
|
|
2617
|
-
/* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: ArrowRight01Icon4, size: 14 })
|
|
2618
|
-
)))))), 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]) => {
|
|
2619
|
-
if (key === "fromAddress" || key === "toAddress") return null;
|
|
2620
|
-
if (value === null || value === void 0 || typeof value === "object") return null;
|
|
2621
|
-
const formattedKey = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
|
|
2622
|
-
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)));
|
|
2623
|
-
})), /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React28.createElement(
|
|
2624
|
-
ThreeDActionButton,
|
|
2625
|
-
{
|
|
2626
|
-
onClick: handleGenerateReceipt,
|
|
2627
|
-
isLoading: isGeneratingReceipt,
|
|
2628
|
-
className: "w-full py-3 text-[14px]"
|
|
2629
|
-
},
|
|
2630
|
-
"Generate Receipt"
|
|
2631
|
-
), /* @__PURE__ */ React28.createElement(
|
|
2632
|
-
"button",
|
|
2633
|
-
{
|
|
2634
|
-
onClick: () => onReportTransaction && onReportTransaction(selectedTransaction),
|
|
2635
|
-
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"
|
|
2636
|
-
},
|
|
2637
|
-
"Report Transaction"
|
|
2638
|
-
), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ React28.createElement(
|
|
2639
|
-
"a",
|
|
2640
|
-
{
|
|
2641
|
-
href: `https://basescan.org/tx/${selectedTransaction.reference}`,
|
|
2642
|
-
target: "_blank",
|
|
2643
|
-
rel: "noopener noreferrer",
|
|
2644
|
-
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"
|
|
2645
|
-
},
|
|
2646
|
-
"View in block explorer"
|
|
2647
|
-
))))), 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(
|
|
2648
|
-
"button",
|
|
2649
|
-
{
|
|
2650
|
-
key: option,
|
|
2651
|
-
onClick: () => {
|
|
2652
|
-
onDirectionFilterChange(option);
|
|
2653
|
-
setIsDirectionModalOpen(false);
|
|
2654
|
-
},
|
|
2655
|
-
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"}`
|
|
2656
|
-
},
|
|
2657
|
-
/* @__PURE__ */ React28.createElement("span", { className: "truncate pr-2" }, option.charAt(0).toUpperCase() + option.slice(1).toLowerCase())
|
|
2658
|
-
))), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React28.createElement(
|
|
2659
|
-
"button",
|
|
2660
|
-
{
|
|
2661
|
-
onClick: () => setIsDirectionModalOpen(false),
|
|
2662
|
-
className: "w-full py-3 text-[13px] text-neutral-500 hover:text-white transition-colors outline-none"
|
|
2663
|
-
},
|
|
2664
|
-
"Cancel"
|
|
2665
|
-
)))), 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" }, [
|
|
2666
|
-
{ label: "All Transactions", value: "ALL" },
|
|
2667
|
-
{ label: "Wallet Transactions", value: "WALLET_TRANSACTION" },
|
|
2668
|
-
{ label: "Card Transactions", value: "CARD_TRANSACTION" }
|
|
2669
|
-
].map((option) => /* @__PURE__ */ React28.createElement(
|
|
2670
|
-
"button",
|
|
2671
|
-
{
|
|
2672
|
-
key: option.value,
|
|
2673
|
-
onClick: () => {
|
|
2674
|
-
onTypeFilterChange(option.value);
|
|
2675
|
-
setIsTypeModalOpen(false);
|
|
2676
|
-
},
|
|
2677
|
-
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"}`
|
|
2678
|
-
},
|
|
2679
|
-
/* @__PURE__ */ React28.createElement("span", { className: "truncate pr-2" }, option.label.charAt(0).toUpperCase() + option.label.slice(1).toLowerCase())
|
|
2680
|
-
))), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React28.createElement(
|
|
2681
|
-
"button",
|
|
2682
|
-
{
|
|
2683
|
-
onClick: () => setIsTypeModalOpen(false),
|
|
2684
|
-
className: "w-full py-3 text-[13px] text-neutral-500 hover:text-white transition-colors outline-none"
|
|
2685
|
-
},
|
|
2686
|
-
"Cancel"
|
|
2687
|
-
)))));
|
|
2688
|
-
};
|
|
2689
|
-
|
|
2690
|
-
// src/components/UniversalHomeView.tsx
|
|
2691
|
-
import React29, { useState as useState17, useEffect as useEffect15 } from "react";
|
|
2692
|
-
import { HugeiconsIcon as HugeiconsIcon17 } from "@hugeicons/react";
|
|
2693
|
-
import { ViewOffSlashIcon, ViewIcon } from "@hugeicons/core-free-icons";
|
|
2694
|
-
var UniversalHomeView = ({
|
|
2695
|
-
balanceLabel = "Your Balance",
|
|
2696
|
-
balanceAmount,
|
|
2697
|
-
balanceCurrency = "$",
|
|
2698
|
-
primaryAction,
|
|
2699
|
-
secondaryAction,
|
|
2700
|
-
quickActionsTitle = "Quick Actions",
|
|
2701
|
-
quickActions = [],
|
|
2702
|
-
transactionsProps
|
|
2703
|
-
}) => {
|
|
2704
|
-
const [displayAmount, setDisplayAmount] = useState17("0.00");
|
|
2705
|
-
const [isBalanceHidden, setIsBalanceHidden] = useState17(false);
|
|
2706
|
-
useEffect15(() => {
|
|
2707
|
-
const target = parseFloat(balanceAmount.replace(/,/g, ""));
|
|
2708
|
-
if (isNaN(target)) {
|
|
2709
|
-
setDisplayAmount(balanceAmount);
|
|
2710
|
-
return;
|
|
2711
|
-
}
|
|
2712
|
-
let startTimestamp = null;
|
|
2713
|
-
const duration = 1e3;
|
|
2714
|
-
const step = (timestamp) => {
|
|
2715
|
-
if (!startTimestamp) startTimestamp = timestamp;
|
|
2716
|
-
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
|
2717
|
-
const easeProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
|
|
2718
|
-
const currentCount = easeProgress * target;
|
|
2719
|
-
setDisplayAmount(currentCount.toLocaleString("en-US", {
|
|
2720
|
-
minimumFractionDigits: 2,
|
|
2721
|
-
maximumFractionDigits: 2
|
|
2722
|
-
}));
|
|
2723
|
-
if (progress < 1) {
|
|
2724
|
-
requestAnimationFrame(step);
|
|
2725
|
-
} else {
|
|
2726
|
-
setDisplayAmount(target.toLocaleString("en-US", {
|
|
2727
|
-
minimumFractionDigits: 2,
|
|
2728
|
-
maximumFractionDigits: 2
|
|
2729
|
-
}));
|
|
2730
|
-
}
|
|
2731
|
-
};
|
|
2732
|
-
requestAnimationFrame(step);
|
|
2733
|
-
}, [balanceAmount]);
|
|
2734
|
-
const [intPart, decPart] = displayAmount.includes(".") ? displayAmount.split(".") : [displayAmount, "00"];
|
|
2735
|
-
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=")`;
|
|
2736
|
-
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)";
|
|
2737
|
-
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)";
|
|
2738
|
-
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)";
|
|
2739
|
-
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(
|
|
2740
|
-
"button",
|
|
2741
|
-
{
|
|
2742
|
-
onClick: () => setIsBalanceHidden(!isBalanceHidden),
|
|
2743
|
-
className: "text-neutral-500 hover:text-white transition-colors outline-none"
|
|
2744
|
-
},
|
|
2745
|
-
/* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: isBalanceHidden ? ViewIcon : ViewOffSlashIcon, size: 14 })
|
|
2746
|
-
)), /* @__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(
|
|
2747
|
-
"button",
|
|
2748
|
-
{
|
|
2749
|
-
onClick: primaryAction.onClick,
|
|
2750
|
-
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",
|
|
2751
|
-
style: {
|
|
2752
|
-
backgroundImage: silverBg,
|
|
2753
|
-
backgroundSize: "cover",
|
|
2754
|
-
backgroundPosition: "center",
|
|
2755
|
-
boxShadow: silverShadowBase,
|
|
2756
|
-
textShadow: "0 1px 1px rgba(255,255,255,0.6)"
|
|
2757
|
-
},
|
|
2758
|
-
onMouseEnter: (e) => {
|
|
2759
|
-
e.currentTarget.style.boxShadow = silverShadowHover;
|
|
2760
|
-
e.currentTarget.style.transform = "translateY(-1px)";
|
|
2761
|
-
},
|
|
2762
|
-
onMouseLeave: (e) => {
|
|
2763
|
-
e.currentTarget.style.boxShadow = silverShadowBase;
|
|
2764
|
-
e.currentTarget.style.transform = "translateY(0px)";
|
|
2765
|
-
},
|
|
2766
|
-
onMouseDown: (e) => {
|
|
2767
|
-
e.currentTarget.style.boxShadow = silverShadowActive;
|
|
2768
|
-
e.currentTarget.style.transform = "translateY(2px)";
|
|
2769
|
-
},
|
|
2770
|
-
onMouseUp: (e) => {
|
|
2771
|
-
e.currentTarget.style.transform = "translateY(-1px)";
|
|
2772
|
-
}
|
|
2773
|
-
},
|
|
2774
|
-
/* @__PURE__ */ React29.createElement("span", { className: "absolute inset-0 bg-linear-to-r from-white/30 to-transparent pointer-events-none" }),
|
|
2775
|
-
/* @__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 }))
|
|
2776
|
-
), secondaryAction && /* @__PURE__ */ React29.createElement(
|
|
2777
|
-
"button",
|
|
2778
|
-
{
|
|
2779
|
-
onClick: secondaryAction.onClick,
|
|
2780
|
-
className: "flex items-center gap-1.5 px-8 py-2 rounded-full border border-neutral-800 text-white transition-colors outline-none"
|
|
2781
|
-
},
|
|
2782
|
-
/* @__PURE__ */ React29.createElement("span", { className: "text-[13px] tracking-wide" }, secondaryAction.label),
|
|
2783
|
-
secondaryAction.icon && /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: secondaryAction.icon, size: 16 })
|
|
2784
|
-
)))), 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(
|
|
2785
|
-
"button",
|
|
2786
|
-
{
|
|
2787
|
-
key: action.id,
|
|
2788
|
-
onClick: action.onClick,
|
|
2789
|
-
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`
|
|
2790
|
-
},
|
|
2791
|
-
/* @__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 }))),
|
|
2792
|
-
/* @__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)
|
|
2793
|
-
)))), /* @__PURE__ */ React29.createElement("div", { className: "w-full" }, /* @__PURE__ */ React29.createElement(
|
|
2794
|
-
UniversalTransactionPage,
|
|
2795
|
-
{
|
|
2796
|
-
...transactionsProps,
|
|
2797
|
-
hideControls: true,
|
|
2798
|
-
hideBalanceAmounts: isBalanceHidden,
|
|
2799
|
-
hidePagination: true
|
|
2800
|
-
}
|
|
2801
|
-
)));
|
|
2802
|
-
};
|
|
2803
|
-
|
|
2804
|
-
// src/components/UniversalWalletPage.tsx
|
|
2805
|
-
import React30, { useState as useState18 } from "react";
|
|
2806
|
-
import { HugeiconsIcon as HugeiconsIcon18 } from "@hugeicons/react";
|
|
2807
|
-
import {
|
|
2808
|
-
Search01Icon as Search01Icon2,
|
|
2809
|
-
CancelCircleIcon as CancelCircleIcon4,
|
|
2810
|
-
Loading03Icon as Loading03Icon7
|
|
2811
|
-
} from "@hugeicons/core-free-icons";
|
|
2812
|
-
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" }));
|
|
2813
|
-
var WalletLogo = ({ src, alt, sizeClass = "w-10 h-10" }) => {
|
|
2814
|
-
const [isLoaded, setIsLoaded] = useState18(false);
|
|
2815
|
-
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(
|
|
2816
|
-
"img",
|
|
2817
|
-
{
|
|
2818
|
-
src,
|
|
2819
|
-
alt,
|
|
2820
|
-
onLoad: () => setIsLoaded(true),
|
|
2821
|
-
className: `w-full h-full object-cover transition-opacity duration-300 ${isLoaded ? "opacity-100" : "opacity-0"}`
|
|
2822
|
-
}
|
|
2823
|
-
));
|
|
2824
|
-
};
|
|
2825
|
-
var UniversalWalletPage = ({
|
|
2826
|
-
headerTitle,
|
|
2827
|
-
headerDescription,
|
|
2828
|
-
hideControls = false,
|
|
2829
|
-
hideBalanceAmounts = false,
|
|
2830
|
-
isGeneratingStatement = false,
|
|
2831
|
-
wallets,
|
|
2832
|
-
isLoading = false,
|
|
2833
|
-
renderQrCode,
|
|
2834
|
-
onDownloadPayId,
|
|
2835
|
-
onCopyAddress
|
|
2836
|
-
}) => {
|
|
2837
|
-
const [selectedWallet, setSelectedWallet] = useState18(null);
|
|
2838
|
-
const [localSearchQuery, setLocalSearchQuery] = useState18("");
|
|
2839
|
-
const [showToast, setShowToast] = useState18(false);
|
|
2840
|
-
const filteredWallets = wallets.filter((wallet) => {
|
|
2841
|
-
const q = localSearchQuery.toLowerCase();
|
|
2842
|
-
return wallet.name.toLowerCase().includes(q) || wallet.currency.toLowerCase().includes(q) || wallet.network.toLowerCase().includes(q);
|
|
2843
|
-
});
|
|
2844
|
-
const handleCopy = (wallet) => {
|
|
2845
|
-
if (onCopyAddress) onCopyAddress(wallet);
|
|
2846
|
-
if (typeof navigator !== "undefined" && navigator.clipboard) {
|
|
2847
|
-
navigator.clipboard.writeText(wallet.address).catch(() => {
|
|
2848
|
-
});
|
|
2849
|
-
}
|
|
2850
|
-
setShowToast(true);
|
|
2851
|
-
setTimeout(() => setShowToast(false), 2500);
|
|
2852
|
-
};
|
|
2853
|
-
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(
|
|
2854
|
-
"input",
|
|
2855
|
-
{
|
|
2856
|
-
type: "text",
|
|
2857
|
-
placeholder: "Search wallets by name or network...",
|
|
2858
|
-
value: localSearchQuery,
|
|
2859
|
-
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
2860
|
-
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"
|
|
2861
|
-
}
|
|
2862
|
-
))), /* @__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(
|
|
2863
|
-
"div",
|
|
2864
|
-
{
|
|
2865
|
-
key: wallet.id,
|
|
2866
|
-
onClick: () => setSelectedWallet(wallet),
|
|
2867
|
-
className: "flex items-center justify-between py-4 /50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
|
|
2868
|
-
},
|
|
2869
|
-
/* @__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))),
|
|
2870
|
-
/* @__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))
|
|
2871
|
-
)))))), 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: () => {
|
|
2872
|
-
setSelectedWallet(null);
|
|
2873
|
-
setShowToast(false);
|
|
2874
|
-
} }), /* @__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: () => {
|
|
2875
|
-
setSelectedWallet(null);
|
|
2876
|
-
setShowToast(false);
|
|
2877
|
-
}, 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(
|
|
2878
|
-
ThreeDActionButton,
|
|
2879
|
-
{
|
|
2880
|
-
onClick: () => onDownloadPayId && onDownloadPayId(selectedWallet),
|
|
2881
|
-
isLoading: isGeneratingStatement,
|
|
2882
|
-
className: "w-full py-3 text-[13px]"
|
|
2883
|
-
},
|
|
2884
|
-
"Generate Statement"
|
|
2885
|
-
), /* @__PURE__ */ React30.createElement(
|
|
2886
|
-
"button",
|
|
2887
|
-
{
|
|
2888
|
-
onClick: () => handleCopy(selectedWallet),
|
|
2889
|
-
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"
|
|
2890
|
-
},
|
|
2891
|
-
"Copy Wallet Address"
|
|
2892
|
-
))))));
|
|
2893
|
-
};
|
|
2894
|
-
|
|
2895
|
-
// src/components/CardLogo.tsx
|
|
2896
|
-
import React31 from "react";
|
|
2897
|
-
var CardLogo = ({ network, className = "" }) => {
|
|
2898
|
-
if (network === "MASTERCARD") {
|
|
2899
|
-
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" }));
|
|
2900
|
-
}
|
|
2901
|
-
if (network === "VERVE") {
|
|
2902
|
-
return /* @__PURE__ */ React31.createElement("div", { className: `font-bold italic flex items-center justify-center tracking-widest ${className}`, style: { fontFamily: "sans-serif" } }, "Verve");
|
|
2903
|
-
}
|
|
2904
|
-
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" }));
|
|
2905
|
-
};
|
|
2906
|
-
|
|
2907
|
-
// src/components/Stagger.tsx
|
|
2908
|
-
import React32 from "react";
|
|
2909
|
-
import { HugeiconsIcon as HugeiconsIcon19 } from "@hugeicons/react";
|
|
2910
|
-
import { Briefcase02Icon, Upload01Icon, FileSyncIcon, CloudUploadIcon } from "@hugeicons/core-free-icons";
|
|
2911
|
-
var Stagger = ({ steps, currentStep }) => {
|
|
2912
|
-
const getIconForStep = (stepName) => {
|
|
2913
|
-
const lowerName = stepName.toLowerCase();
|
|
2914
|
-
if (lowerName.includes("document")) return Upload01Icon;
|
|
2915
|
-
if (lowerName.includes("review")) return FileSyncIcon;
|
|
2916
|
-
if (lowerName.includes("submit")) return CloudUploadIcon;
|
|
2917
|
-
return Briefcase02Icon;
|
|
2918
|
-
};
|
|
2919
|
-
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) => {
|
|
2920
|
-
const isActive = idx === currentStep;
|
|
2921
|
-
const isPassed = idx < currentStep;
|
|
2922
|
-
const colorClass = isPassed ? "bg-emerald-500 text-white" : isActive ? "bg-neutral-100 text-neutral-500" : "bg-neutral-100 text-neutral-500";
|
|
2923
|
-
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 }));
|
|
2924
|
-
}));
|
|
1239
|
+
), /* @__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)));
|
|
2925
1240
|
};
|
|
2926
1241
|
|
|
2927
1242
|
// src/components/MedicalFeatureStatsBlock.tsx
|
|
2928
|
-
import
|
|
1243
|
+
import React21, { useState as useState10, useEffect as useEffect9, useRef as useRef8 } from "react";
|
|
2929
1244
|
import Image9 from "next/image";
|
|
2930
1245
|
var MedicalFeatureStatsBlock = ({
|
|
2931
1246
|
bottomHeadline,
|
|
@@ -2934,9 +1249,9 @@ var MedicalFeatureStatsBlock = ({
|
|
|
2934
1249
|
trustText,
|
|
2935
1250
|
stats
|
|
2936
1251
|
}) => {
|
|
2937
|
-
const [isAnimating, setIsAnimating] =
|
|
2938
|
-
const titleRef =
|
|
2939
|
-
|
|
1252
|
+
const [isAnimating, setIsAnimating] = useState10(false);
|
|
1253
|
+
const titleRef = useRef8(null);
|
|
1254
|
+
useEffect9(() => {
|
|
2940
1255
|
const observer = new IntersectionObserver(
|
|
2941
1256
|
([entry]) => {
|
|
2942
1257
|
if (entry.isIntersecting) {
|
|
@@ -2954,15 +1269,15 @@ var MedicalFeatureStatsBlock = ({
|
|
|
2954
1269
|
}
|
|
2955
1270
|
return () => observer.disconnect();
|
|
2956
1271
|
}, []);
|
|
2957
|
-
return /* @__PURE__ */
|
|
1272
|
+
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(
|
|
2958
1273
|
"h2",
|
|
2959
1274
|
{
|
|
2960
1275
|
ref: titleRef,
|
|
2961
|
-
className: `text-3xl text-
|
|
1276
|
+
className: `text-3xl text-black tracking-tight leading-[1.1] mb-5 ${isAnimating ? "" : ""}`,
|
|
2962
1277
|
style: isAnimating ? { animationIterationCount: 1 } : {}
|
|
2963
1278
|
},
|
|
2964
1279
|
bottomHeadline
|
|
2965
|
-
), /* @__PURE__ */
|
|
1280
|
+
), /* @__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(
|
|
2966
1281
|
Image9,
|
|
2967
1282
|
{
|
|
2968
1283
|
src,
|
|
@@ -2971,17 +1286,17 @@ var MedicalFeatureStatsBlock = ({
|
|
|
2971
1286
|
sizes: "48px",
|
|
2972
1287
|
className: "object-cover"
|
|
2973
1288
|
}
|
|
2974
|
-
)))), /* @__PURE__ */
|
|
1289
|
+
)))), /* @__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))))));
|
|
2975
1290
|
};
|
|
2976
1291
|
|
|
2977
1292
|
// src/components/ConsultantShowcase.tsx
|
|
2978
|
-
import
|
|
1293
|
+
import React22, { useState as useState11 } from "react";
|
|
2979
1294
|
import Image10 from "next/image";
|
|
2980
|
-
import { HugeiconsIcon as
|
|
2981
|
-
import { Loading03Icon as
|
|
1295
|
+
import { HugeiconsIcon as HugeiconsIcon11 } from "@hugeicons/react";
|
|
1296
|
+
import { Loading03Icon as Loading03Icon5 } from "@hugeicons/core-free-icons";
|
|
2982
1297
|
var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
|
|
2983
|
-
const [isLoading, setIsLoading] =
|
|
2984
|
-
return /* @__PURE__ */
|
|
1298
|
+
const [isLoading, setIsLoading] = useState11(true);
|
|
1299
|
+
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(
|
|
2985
1300
|
Image10,
|
|
2986
1301
|
{
|
|
2987
1302
|
src,
|
|
@@ -3000,9 +1315,9 @@ var ImageWithLoader = ({ src, alt, className, sizes, priority = false }) => {
|
|
|
3000
1315
|
var ConsultantShowcase = ({
|
|
3001
1316
|
profiles
|
|
3002
1317
|
}) => {
|
|
3003
|
-
const [currentIndex, setCurrentIndex] =
|
|
3004
|
-
const [touchStart, setTouchStart] =
|
|
3005
|
-
const [touchEnd, setTouchEnd] =
|
|
1318
|
+
const [currentIndex, setCurrentIndex] = useState11(0);
|
|
1319
|
+
const [touchStart, setTouchStart] = useState11(null);
|
|
1320
|
+
const [touchEnd, setTouchEnd] = useState11(null);
|
|
3006
1321
|
const nextSlide = () => {
|
|
3007
1322
|
setCurrentIndex((prev) => prev === profiles.length - 1 ? 0 : prev + 1);
|
|
3008
1323
|
};
|
|
@@ -3027,23 +1342,23 @@ var ConsultantShowcase = ({
|
|
|
3027
1342
|
}
|
|
3028
1343
|
};
|
|
3029
1344
|
if (!profiles || profiles.length === 0) return null;
|
|
3030
|
-
return /* @__PURE__ */
|
|
1345
|
+
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(
|
|
3031
1346
|
"div",
|
|
3032
1347
|
{
|
|
3033
|
-
className: "relative w-full h-100 md:h-112.5 rounded-4xl overflow-hidden bg-neutral-900
|
|
1348
|
+
className: "relative w-full h-100 md:h-112.5 rounded-4xl overflow-hidden bg-neutral-900 group select-none",
|
|
3034
1349
|
onTouchStart,
|
|
3035
1350
|
onTouchMove,
|
|
3036
1351
|
onTouchEnd
|
|
3037
1352
|
},
|
|
3038
1353
|
profiles.map((profile, idx) => {
|
|
3039
1354
|
const isActive = idx === currentIndex;
|
|
3040
|
-
return /* @__PURE__ */
|
|
1355
|
+
return /* @__PURE__ */ React22.createElement(
|
|
3041
1356
|
"div",
|
|
3042
1357
|
{
|
|
3043
1358
|
key: profile.id,
|
|
3044
1359
|
className: `absolute inset-0 transition-opacity duration-700 ease-in-out ${isActive ? "opacity-100 z-10" : "opacity-0 z-0 pointer-events-none"}`
|
|
3045
1360
|
},
|
|
3046
|
-
/* @__PURE__ */
|
|
1361
|
+
/* @__PURE__ */ React22.createElement(
|
|
3047
1362
|
ImageWithLoader,
|
|
3048
1363
|
{
|
|
3049
1364
|
src: profile.imageSrc,
|
|
@@ -3051,14 +1366,14 @@ var ConsultantShowcase = ({
|
|
|
3051
1366
|
priority: idx === 0
|
|
3052
1367
|
}
|
|
3053
1368
|
),
|
|
3054
|
-
/* @__PURE__ */
|
|
3055
|
-
/* @__PURE__ */
|
|
3056
|
-
/* @__PURE__ */
|
|
1369
|
+
/* @__PURE__ */ React22.createElement("div", { className: "absolute inset-0 bg-black/20 z-10 pointer-events-none" }),
|
|
1370
|
+
/* @__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" }),
|
|
1371
|
+
/* @__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)))
|
|
3057
1372
|
);
|
|
3058
1373
|
}),
|
|
3059
|
-
/* @__PURE__ */
|
|
3060
|
-
/* @__PURE__ */
|
|
3061
|
-
/* @__PURE__ */
|
|
1374
|
+
/* @__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" }),
|
|
1375
|
+
/* @__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" }),
|
|
1376
|
+
/* @__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(
|
|
3062
1377
|
"button",
|
|
3063
1378
|
{
|
|
3064
1379
|
key: idx,
|
|
@@ -3071,10 +1386,10 @@ var ConsultantShowcase = ({
|
|
|
3071
1386
|
};
|
|
3072
1387
|
|
|
3073
1388
|
// src/components/ContentGridBlock.tsx
|
|
3074
|
-
import
|
|
1389
|
+
import React23, { useState as useState12 } from "react";
|
|
3075
1390
|
import Image11 from "next/image";
|
|
3076
|
-
import { HugeiconsIcon as
|
|
3077
|
-
import { Loading03Icon as
|
|
1391
|
+
import { HugeiconsIcon as HugeiconsIcon12 } from "@hugeicons/react";
|
|
1392
|
+
import { Loading03Icon as Loading03Icon6 } from "@hugeicons/core-free-icons";
|
|
3078
1393
|
var ContentGridBlock = ({
|
|
3079
1394
|
header,
|
|
3080
1395
|
leftCard,
|
|
@@ -3082,23 +1397,23 @@ var ContentGridBlock = ({
|
|
|
3082
1397
|
middleBottomCard,
|
|
3083
1398
|
rightCards
|
|
3084
1399
|
}) => {
|
|
3085
|
-
return /* @__PURE__ */
|
|
1400
|
+
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)))))))));
|
|
3086
1401
|
};
|
|
3087
1402
|
|
|
3088
1403
|
// src/components/ManagedProjectsBlock.tsx
|
|
3089
|
-
import
|
|
3090
|
-
import
|
|
1404
|
+
import React24 from "react";
|
|
1405
|
+
import Link7 from "next/link";
|
|
3091
1406
|
var GridSection = ({
|
|
3092
1407
|
children,
|
|
3093
1408
|
isLast = false,
|
|
3094
1409
|
className = "py-8 md:py-10"
|
|
3095
|
-
}) => /* @__PURE__ */
|
|
1410
|
+
}) => /* @__PURE__ */ React24.createElement("div", { className: `relative px-5 md:px-12 ${className} ${!isLast ? "" : ""}` }, children);
|
|
3096
1411
|
var ManagedProjectsBlock = ({
|
|
3097
1412
|
tagline,
|
|
3098
1413
|
title,
|
|
3099
1414
|
projects
|
|
3100
1415
|
}) => {
|
|
3101
|
-
return /* @__PURE__ */
|
|
1416
|
+
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(
|
|
3102
1417
|
"div",
|
|
3103
1418
|
{
|
|
3104
1419
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
|
|
@@ -3107,16 +1422,14 @@ var ManagedProjectsBlock = ({
|
|
|
3107
1422
|
backgroundRepeat: "repeat"
|
|
3108
1423
|
}
|
|
3109
1424
|
}
|
|
3110
|
-
), /* @__PURE__ */
|
|
1425
|
+
), /* @__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) => {
|
|
3111
1426
|
const isLast = index === projects.length - 1;
|
|
3112
|
-
const projectContent = /* @__PURE__ */
|
|
3113
|
-
return /* @__PURE__ */
|
|
1427
|
+
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));
|
|
1428
|
+
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));
|
|
3114
1429
|
}))));
|
|
3115
1430
|
};
|
|
3116
1431
|
export {
|
|
3117
1432
|
AppBento2,
|
|
3118
|
-
Banner,
|
|
3119
|
-
CardLogo,
|
|
3120
1433
|
ConsultantShowcase,
|
|
3121
1434
|
ContentGridBlock,
|
|
3122
1435
|
Faq,
|
|
@@ -3136,19 +1449,9 @@ export {
|
|
|
3136
1449
|
MedicalFeatureStatsBlock,
|
|
3137
1450
|
NumberInput,
|
|
3138
1451
|
PageSpinner,
|
|
3139
|
-
PipleAuth,
|
|
3140
1452
|
PlatformFeatures,
|
|
3141
1453
|
PortfolioHero,
|
|
3142
|
-
Stagger,
|
|
3143
1454
|
TextInput,
|
|
3144
1455
|
ThreeDActionButton,
|
|
3145
|
-
ThreeDButton
|
|
3146
|
-
UniversalErrorView,
|
|
3147
|
-
UniversalHomeView,
|
|
3148
|
-
UniversalOrganizationPage,
|
|
3149
|
-
UniversalProfileSettings,
|
|
3150
|
-
UniversalSidebar,
|
|
3151
|
-
UniversalTransactionPage,
|
|
3152
|
-
UniversalWalletPage,
|
|
3153
|
-
ZairusAuth
|
|
1456
|
+
ThreeDButton
|
|
3154
1457
|
};
|