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