@retinalabsllc/zairusjs 0.1.4 → 0.1.6
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 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +53 -11
- package/dist/index.mjs +62 -20
- package/package.json +6 -2
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -169,14 +169,21 @@ var import_react4 = __toESM(require("react"));
|
|
|
169
169
|
var import_link2 = __toESM(require("next/link"));
|
|
170
170
|
var import_image = __toESM(require("next/image"));
|
|
171
171
|
var import_navigation = require("next/navigation");
|
|
172
|
-
var NavLink = ({
|
|
172
|
+
var NavLink = ({
|
|
173
|
+
href,
|
|
174
|
+
children,
|
|
175
|
+
className = "",
|
|
176
|
+
light = true
|
|
177
|
+
}) => {
|
|
173
178
|
const pathname = (0, import_navigation.usePathname)();
|
|
174
179
|
const isActive = pathname === href;
|
|
180
|
+
const activeClass = light ? "text-neutral-950 font-medium" : "text-white font-medium";
|
|
181
|
+
const inactiveClass = light ? "text-neutral-600 hover:text-neutral-950" : "text-neutral-400 hover:text-white";
|
|
175
182
|
return /* @__PURE__ */ import_react4.default.createElement(
|
|
176
183
|
import_link2.default,
|
|
177
184
|
{
|
|
178
185
|
href,
|
|
179
|
-
className: `px-3 py-1.5 text-xs transition-colors duration-200 rounded-full ${isActive ?
|
|
186
|
+
className: `px-3 py-1.5 text-xs transition-colors duration-200 rounded-full ${isActive ? activeClass : inactiveClass} ${className}`
|
|
180
187
|
},
|
|
181
188
|
children
|
|
182
189
|
);
|
|
@@ -186,24 +193,35 @@ var Header = ({
|
|
|
186
193
|
companyName,
|
|
187
194
|
subtitle,
|
|
188
195
|
links,
|
|
189
|
-
showLogo = true
|
|
196
|
+
showLogo = true,
|
|
197
|
+
invert = false,
|
|
198
|
+
hideHeaderText = false,
|
|
199
|
+
light = true,
|
|
200
|
+
// Defaults to true (white background)
|
|
201
|
+
compact = false
|
|
202
|
+
// Defaults to false (full width)
|
|
190
203
|
}) => {
|
|
191
|
-
|
|
204
|
+
const headerBgStyle = light ? "bg-white/95 border-white/40 shadow-[0_8px_60px_rgba(0,0,0,0.06)]" : "bg-black/95 border-white/10 shadow-[0_8px_60px_rgba(0,0,0,0.2)]";
|
|
205
|
+
const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
|
|
206
|
+
const titleColor = light ? "text-black" : "text-white";
|
|
207
|
+
const subtitleColor = light ? "text-neutral-500" : "text-neutral-400";
|
|
208
|
+
return /* @__PURE__ */ import_react4.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_react4.default.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ import_react4.default.createElement("header", { className: `${headerLayoutWidth} ${headerBgStyle} backdrop-blur-md rounded-full py-2 px-6 flex items-center border transition-all duration-300` }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ import_react4.default.createElement(import_link2.default, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70" }, showLogo && /* @__PURE__ */ import_react4.default.createElement(
|
|
192
209
|
import_image.default,
|
|
193
210
|
{
|
|
194
211
|
src: logoSrc,
|
|
195
212
|
alt: `${companyName} Logo`,
|
|
196
213
|
width: 40,
|
|
197
214
|
height: 40,
|
|
198
|
-
className:
|
|
215
|
+
className: `object-contain w-5 h-auto ${invert ? "invert" : ""}`,
|
|
199
216
|
priority: true
|
|
200
217
|
}
|
|
201
|
-
), /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react4.default.createElement("span", { className:
|
|
218
|
+
), !hideHeaderText && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: `text-[12px] leading-none tracking-wide mb-1 transition-colors ${titleColor}` }, companyName), subtitle && /* @__PURE__ */ import_react4.default.createElement("span", { className: `text-[9px] tracking-widest leading-none transition-colors ${subtitleColor}` }, subtitle)))), /* @__PURE__ */ import_react4.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ import_react4.default.createElement(
|
|
202
219
|
NavLink,
|
|
203
220
|
{
|
|
204
221
|
key: index,
|
|
205
222
|
href: link.href,
|
|
206
|
-
className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
|
|
223
|
+
className: link.hideOnMobile ? "hidden sm:inline-flex" : "",
|
|
224
|
+
light
|
|
207
225
|
},
|
|
208
226
|
link.label
|
|
209
227
|
))))));
|
|
@@ -220,7 +238,31 @@ var Footer = ({
|
|
|
220
238
|
copyrightText,
|
|
221
239
|
topSection
|
|
222
240
|
}) => {
|
|
223
|
-
|
|
241
|
+
const [openCol, setOpenCol] = (0, import_react5.useState)(null);
|
|
242
|
+
const toggleColumn = (idx) => {
|
|
243
|
+
setOpenCol(openCol === idx ? null : idx);
|
|
244
|
+
};
|
|
245
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ import_react5.default.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ import_react5.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_react5.default.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-[14px] text-neutral-600 leading-relaxed pr-4" }, description))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full lg:flex-1 lg:max-w-2xl" }, /* @__PURE__ */ import_react5.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_react5.default.createElement("div", { key: idx, className: "flex flex-col" }, /* @__PURE__ */ import_react5.default.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 uppercase" }, col.title), /* @__PURE__ */ import_react5.default.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500" }, col.links.map((link, lIdx) => /* @__PURE__ */ import_react5.default.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ import_react5.default.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors block truncate" }, link.label) : /* @__PURE__ */ import_react5.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors block truncate" }, link.label))))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-col md:hidden w-full border-t border-neutral-200 mt-4" }, columns.map((col, idx) => {
|
|
246
|
+
const isOpen = openCol === idx;
|
|
247
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
248
|
+
"button",
|
|
249
|
+
{
|
|
250
|
+
onClick: () => toggleColumn(idx),
|
|
251
|
+
className: "w-full flex items-center justify-between py-5 text-left outline-none"
|
|
252
|
+
},
|
|
253
|
+
/* @__PURE__ */ import_react5.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black uppercase" }, col.title),
|
|
254
|
+
/* @__PURE__ */ import_react5.default.createElement(
|
|
255
|
+
"svg",
|
|
256
|
+
{
|
|
257
|
+
className: `w-4 h-4 text-neutral-400 transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`,
|
|
258
|
+
fill: "none",
|
|
259
|
+
viewBox: "0 0 24 24",
|
|
260
|
+
stroke: "currentColor"
|
|
261
|
+
},
|
|
262
|
+
/* @__PURE__ */ import_react5.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
|
|
263
|
+
)
|
|
264
|
+
), /* @__PURE__ */ import_react5.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_react5.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react5.default.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500 pt-2" }, col.links.map((link, lIdx) => /* @__PURE__ */ import_react5.default.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ import_react5.default.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors" }, link.label) : /* @__PURE__ */ import_react5.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))));
|
|
265
|
+
})))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "pt-8 mt-4 border-t border-neutral-200 flex flex-col-reverse md:flex-row justify-between items-start md:items-center gap-6 relative z-20" }, /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-[11px] text-neutral-400 tracking-widest text-left" }, copyrightText), socialLinks && socialLinks.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex items-center gap-6" }, socialLinks.map((social, idx) => /* @__PURE__ */ import_react5.default.createElement(
|
|
224
266
|
"a",
|
|
225
267
|
{
|
|
226
268
|
key: idx,
|
|
@@ -256,7 +298,7 @@ var HeroSection = ({
|
|
|
256
298
|
{
|
|
257
299
|
className: "absolute inset-0 w-full h-full pointer-events-none z-0",
|
|
258
300
|
style: {
|
|
259
|
-
background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%,
|
|
301
|
+
background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, transparent 100%)`
|
|
260
302
|
}
|
|
261
303
|
}
|
|
262
304
|
), /* @__PURE__ */ import_react7.default.createElement(
|
|
@@ -267,7 +309,7 @@ var HeroSection = ({
|
|
|
267
309
|
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")`
|
|
268
310
|
}
|
|
269
311
|
}
|
|
270
|
-
), /* @__PURE__ */ import_react7.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-10" }, badgeText && /* @__PURE__ */ import_react7.default.createElement("div", { className: "inline-flex items-center gap-1.5 mb-6 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md shadow-xs" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-[10px] tracking-[0.4em] text-white uppercase" }, badgeText)), /* @__PURE__ */ import_react7.default.createElement("h1", { className: "text-[40px] md:text-5xl lg:text-7xl text-white tracking-tight leading-[1.05] max-w-4xl mb-4" }, titlePrefix), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-center mt-2 mb-10 md:mb-14" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "relative inline-block mx-1.5 px-4 py-2 md:py-3 bg-[#21a473]/25 border border-[#3ae9a8] rounded-sm text-white select-none text-2xl md:text-4xl lg:text-6xl tracking-tight" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "absolute
|
|
312
|
+
), /* @__PURE__ */ import_react7.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-10" }, badgeText && /* @__PURE__ */ import_react7.default.createElement("div", { className: "inline-flex items-center gap-1.5 mb-6 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md shadow-xs" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-[10px] tracking-[0.4em] text-white uppercase" }, badgeText)), /* @__PURE__ */ import_react7.default.createElement("h1", { className: "text-[40px] md:text-5xl lg:text-7xl text-white tracking-tight leading-[1.05] max-w-4xl mb-4" }, titlePrefix), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex justify-center mt-2 mb-10 md:mb-14" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "relative inline-block mx-1.5 px-4 py-2 md:py-3 bg-[#21a473]/25 border border-[#3ae9a8] rounded-sm text-white select-none text-2xl md:text-4xl lg:text-6xl tracking-tight" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "absolute top-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#21a473] rounded-[1px] z-10" }), /* @__PURE__ */ import_react7.default.createElement("span", { className: "absolute top-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#21a473] rounded-[1px] z-10" }), /* @__PURE__ */ import_react7.default.createElement("span", { className: "absolute bottom-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#21a473] rounded-[1px] z-10" }), /* @__PURE__ */ import_react7.default.createElement("span", { className: "absolute bottom-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#21a473] rounded-[1px] z-10" }), highlightText, /* @__PURE__ */ import_react7.default.createElement("span", { className: "absolute -bottom-5 -right-5 flex items-center z-20 pointer-events-none select-none filter drop-shadow-[0_2px_4px_rgba(0,0,0,0.25)]" }, /* @__PURE__ */ import_react7.default.createElement("svg", { width: "18", height: "22", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "transform -rotate-12" }, /* @__PURE__ */ import_react7.default.createElement("path", { d: "M1 1V17.8L5.8 13.1H12.8L1 1Z", fill: "#21a473", stroke: "white", strokeWidth: "1.8", strokeLinejoin: "round" })), /* @__PURE__ */ import_react7.default.createElement("span", { className: "ml-1 bg-[#21a473] text-[10px] text-white px-2 py-0.5 rounded-full border border-white tracking-wide" }, cursorLabel)))), subtitle && /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-[13px] md:text-[15px] text-[#bbf7df]/90 max-w-xl mx-auto mb-10 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ import_react7.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-10" }, ctaText && ctaHref && /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full sm:w-60 flex justify-center *:w-full" }, /* @__PURE__ */ import_react7.default.createElement(ThreeDButton, { href: ctaHref }, ctaText)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ import_react7.default.createElement(
|
|
271
313
|
import_link4.default,
|
|
272
314
|
{
|
|
273
315
|
href: secondaryCtaHref,
|
|
@@ -449,7 +491,7 @@ var AITranscriptionFeature = ({
|
|
|
449
491
|
detailTextSuffix
|
|
450
492
|
}) => {
|
|
451
493
|
const [isLoading, setIsLoading] = (0, import_react12.useState)(!!imagePath);
|
|
452
|
-
return /* @__PURE__ */ import_react12.default.createElement("section", { className: "py-24 w-full flex justify-center
|
|
494
|
+
return /* @__PURE__ */ import_react12.default.createElement("section", { className: "py-24 w-full flex justify-center relative z-10" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex flex-col items-center text-center mb-12 relative z-10 animate-in fade-in slide-in-from-bottom-4 duration-700" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 block mb-4" }, tagline), /* @__PURE__ */ import_react12.default.createElement("h2", { className: "text-3xl md:text-5xl tracking-tight animate-gradient-wipe leading-[1.05] mb-4" }, headline), /* @__PURE__ */ import_react12.default.createElement("p", { className: "text-[15px] md:text-[16px] leading-[1.8] text-neutral-600 max-w-xl mx-auto" }, description)), /* @__PURE__ */ import_react12.default.createElement("div", { className: "relative w-full max-w-5xl mx-auto aspect-video sm:aspect-21/9 bg-neutral-100 rounded-2xl overflow-hidden mb-12 flex items-center justify-center shadow-[0_0_40px_rgba(0,0,0,0.03)] animate-in fade-in zoom-in-95 duration-700 delay-150 fill-mode-both" }, /* @__PURE__ */ import_react12.default.createElement(
|
|
453
495
|
"div",
|
|
454
496
|
{
|
|
455
497
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-20 mix-blend-overlay",
|
package/dist/index.mjs
CHANGED
|
@@ -114,14 +114,21 @@ import React3 from "react";
|
|
|
114
114
|
import Link2 from "next/link";
|
|
115
115
|
import Image from "next/image";
|
|
116
116
|
import { usePathname } from "next/navigation";
|
|
117
|
-
var NavLink = ({
|
|
117
|
+
var NavLink = ({
|
|
118
|
+
href,
|
|
119
|
+
children,
|
|
120
|
+
className = "",
|
|
121
|
+
light = true
|
|
122
|
+
}) => {
|
|
118
123
|
const pathname = usePathname();
|
|
119
124
|
const isActive = pathname === href;
|
|
125
|
+
const activeClass = light ? "text-neutral-950 font-medium" : "text-white font-medium";
|
|
126
|
+
const inactiveClass = light ? "text-neutral-600 hover:text-neutral-950" : "text-neutral-400 hover:text-white";
|
|
120
127
|
return /* @__PURE__ */ React3.createElement(
|
|
121
128
|
Link2,
|
|
122
129
|
{
|
|
123
130
|
href,
|
|
124
|
-
className: `px-3 py-1.5 text-xs transition-colors duration-200 rounded-full ${isActive ?
|
|
131
|
+
className: `px-3 py-1.5 text-xs transition-colors duration-200 rounded-full ${isActive ? activeClass : inactiveClass} ${className}`
|
|
125
132
|
},
|
|
126
133
|
children
|
|
127
134
|
);
|
|
@@ -131,31 +138,42 @@ var Header = ({
|
|
|
131
138
|
companyName,
|
|
132
139
|
subtitle,
|
|
133
140
|
links,
|
|
134
|
-
showLogo = true
|
|
141
|
+
showLogo = true,
|
|
142
|
+
invert = false,
|
|
143
|
+
hideHeaderText = false,
|
|
144
|
+
light = true,
|
|
145
|
+
// Defaults to true (white background)
|
|
146
|
+
compact = false
|
|
147
|
+
// Defaults to false (full width)
|
|
135
148
|
}) => {
|
|
136
|
-
|
|
149
|
+
const headerBgStyle = light ? "bg-white/95 border-white/40 shadow-[0_8px_60px_rgba(0,0,0,0.06)]" : "bg-black/95 border-white/10 shadow-[0_8px_60px_rgba(0,0,0,0.2)]";
|
|
150
|
+
const headerLayoutWidth = compact ? "w-fit mx-auto gap-8 md:gap-16" : "w-full justify-between";
|
|
151
|
+
const titleColor = light ? "text-black" : "text-white";
|
|
152
|
+
const subtitleColor = light ? "text-neutral-500" : "text-neutral-400";
|
|
153
|
+
return /* @__PURE__ */ React3.createElement("div", { className: "absolute inset-x-0 top-0 w-full z-50 pointer-events-none px-4 pt-4 sm:pt-6" }, /* @__PURE__ */ React3.createElement("div", { className: "max-w-5xl mx-auto w-full pointer-events-auto flex justify-center" }, /* @__PURE__ */ React3.createElement("header", { className: `${headerLayoutWidth} ${headerBgStyle} backdrop-blur-md rounded-full py-2 px-6 flex items-center border transition-all duration-300` }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center shrink-0" }, /* @__PURE__ */ React3.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70" }, showLogo && /* @__PURE__ */ React3.createElement(
|
|
137
154
|
Image,
|
|
138
155
|
{
|
|
139
156
|
src: logoSrc,
|
|
140
157
|
alt: `${companyName} Logo`,
|
|
141
158
|
width: 40,
|
|
142
159
|
height: 40,
|
|
143
|
-
className:
|
|
160
|
+
className: `object-contain w-5 h-auto ${invert ? "invert" : ""}`,
|
|
144
161
|
priority: true
|
|
145
162
|
}
|
|
146
|
-
), /* @__PURE__ */ React3.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React3.createElement("span", { className:
|
|
163
|
+
), !hideHeaderText && /* @__PURE__ */ React3.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React3.createElement("span", { className: `text-[12px] leading-none tracking-wide mb-1 transition-colors ${titleColor}` }, companyName), subtitle && /* @__PURE__ */ React3.createElement("span", { className: `text-[9px] tracking-widest leading-none transition-colors ${subtitleColor}` }, subtitle)))), /* @__PURE__ */ React3.createElement("nav", { className: "flex items-center gap-1 md:gap-2 shrink-0" }, links.map((link, index) => /* @__PURE__ */ React3.createElement(
|
|
147
164
|
NavLink,
|
|
148
165
|
{
|
|
149
166
|
key: index,
|
|
150
167
|
href: link.href,
|
|
151
|
-
className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
|
|
168
|
+
className: link.hideOnMobile ? "hidden sm:inline-flex" : "",
|
|
169
|
+
light
|
|
152
170
|
},
|
|
153
171
|
link.label
|
|
154
172
|
))))));
|
|
155
173
|
};
|
|
156
174
|
|
|
157
175
|
// src/components/Footer.tsx
|
|
158
|
-
import React4 from "react";
|
|
176
|
+
import React4, { useState as useState2 } from "react";
|
|
159
177
|
import Link3 from "next/link";
|
|
160
178
|
import { HugeiconsIcon as HugeiconsIcon2 } from "@hugeicons/react";
|
|
161
179
|
var Footer = ({
|
|
@@ -165,7 +183,31 @@ var Footer = ({
|
|
|
165
183
|
copyrightText,
|
|
166
184
|
topSection
|
|
167
185
|
}) => {
|
|
168
|
-
|
|
186
|
+
const [openCol, setOpenCol] = useState2(null);
|
|
187
|
+
const toggleColumn = (idx) => {
|
|
188
|
+
setOpenCol(openCol === idx ? null : idx);
|
|
189
|
+
};
|
|
190
|
+
return /* @__PURE__ */ React4.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ React4.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ React4.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ React4.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16 mb-12 text-left" }, /* @__PURE__ */ React4.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("p", { className: "text-[14px] text-neutral-600 leading-relaxed pr-4" }, description))), /* @__PURE__ */ React4.createElement("div", { className: "w-full lg:flex-1 lg:max-w-2xl" }, /* @__PURE__ */ React4.createElement("div", { className: "hidden md:grid grid-cols-2 gap-x-16 lg:gap-x-24 gap-y-12" }, columns.map((col, idx) => /* @__PURE__ */ React4.createElement("div", { key: idx, className: "flex flex-col" }, /* @__PURE__ */ React4.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 uppercase" }, col.title), /* @__PURE__ */ React4.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500" }, col.links.map((link, lIdx) => /* @__PURE__ */ React4.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ React4.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors block truncate" }, link.label) : /* @__PURE__ */ React4.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors block truncate" }, link.label))))))), /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col md:hidden w-full border-t border-neutral-200 mt-4" }, columns.map((col, idx) => {
|
|
191
|
+
const isOpen = openCol === idx;
|
|
192
|
+
return /* @__PURE__ */ React4.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ React4.createElement(
|
|
193
|
+
"button",
|
|
194
|
+
{
|
|
195
|
+
onClick: () => toggleColumn(idx),
|
|
196
|
+
className: "w-full flex items-center justify-between py-5 text-left outline-none"
|
|
197
|
+
},
|
|
198
|
+
/* @__PURE__ */ React4.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black uppercase" }, col.title),
|
|
199
|
+
/* @__PURE__ */ React4.createElement(
|
|
200
|
+
"svg",
|
|
201
|
+
{
|
|
202
|
+
className: `w-4 h-4 text-neutral-400 transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`,
|
|
203
|
+
fill: "none",
|
|
204
|
+
viewBox: "0 0 24 24",
|
|
205
|
+
stroke: "currentColor"
|
|
206
|
+
},
|
|
207
|
+
/* @__PURE__ */ React4.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19 9l-7 7-7-7" })
|
|
208
|
+
)
|
|
209
|
+
), /* @__PURE__ */ React4.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__ */ React4.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React4.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500 pt-2" }, col.links.map((link, lIdx) => /* @__PURE__ */ React4.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ React4.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors" }, link.label) : /* @__PURE__ */ React4.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))));
|
|
210
|
+
})))), /* @__PURE__ */ React4.createElement("div", { className: "pt-8 mt-4 border-t border-neutral-200 flex flex-col-reverse md:flex-row justify-between items-start md:items-center gap-6 relative z-20" }, /* @__PURE__ */ React4.createElement("p", { className: "text-[11px] text-neutral-400 tracking-widest text-left" }, copyrightText), socialLinks && socialLinks.length > 0 && /* @__PURE__ */ React4.createElement("div", { className: "flex items-center gap-6" }, socialLinks.map((social, idx) => /* @__PURE__ */ React4.createElement(
|
|
169
211
|
"a",
|
|
170
212
|
{
|
|
171
213
|
key: idx,
|
|
@@ -201,7 +243,7 @@ var HeroSection = ({
|
|
|
201
243
|
{
|
|
202
244
|
className: "absolute inset-0 w-full h-full pointer-events-none z-0",
|
|
203
245
|
style: {
|
|
204
|
-
background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%,
|
|
246
|
+
background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, transparent 100%)`
|
|
205
247
|
}
|
|
206
248
|
}
|
|
207
249
|
), /* @__PURE__ */ React5.createElement(
|
|
@@ -212,7 +254,7 @@ var HeroSection = ({
|
|
|
212
254
|
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")`
|
|
213
255
|
}
|
|
214
256
|
}
|
|
215
|
-
), /* @__PURE__ */ React5.createElement("div", { className: "relative max-w-5xl mx-auto px-4 sm:px-6 w-full flex flex-col items-center text-center z-10" }, badgeText && /* @__PURE__ */ React5.createElement("div", { className: "inline-flex items-center gap-1.5 mb-6 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md shadow-xs" }, /* @__PURE__ */ React5.createElement("span", { className: "text-[10px] tracking-[0.4em] text-white uppercase" }, badgeText)), /* @__PURE__ */ React5.createElement("h1", { className: "text-[40px] md:text-5xl lg:text-7xl text-white tracking-tight leading-[1.05] max-w-4xl mb-4" }, titlePrefix), /* @__PURE__ */ React5.createElement("div", { className: "flex justify-center mt-2 mb-10 md:mb-14" }, /* @__PURE__ */ React5.createElement("span", { className: "relative inline-block mx-1.5 px-4 py-2 md:py-3 bg-[#21a473]/25 border border-[#3ae9a8] rounded-sm text-white select-none text-2xl md:text-4xl lg:text-6xl tracking-tight" }, /* @__PURE__ */ React5.createElement("span", { className: "absolute
|
|
257
|
+
), /* @__PURE__ */ React5.createElement("div", { className: "relative max-w-5xl mx-auto px-4 sm:px-6 w-full flex flex-col items-center text-center z-10" }, badgeText && /* @__PURE__ */ React5.createElement("div", { className: "inline-flex items-center gap-1.5 mb-6 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md shadow-xs" }, /* @__PURE__ */ React5.createElement("span", { className: "text-[10px] tracking-[0.4em] text-white uppercase" }, badgeText)), /* @__PURE__ */ React5.createElement("h1", { className: "text-[40px] md:text-5xl lg:text-7xl text-white tracking-tight leading-[1.05] max-w-4xl mb-4" }, titlePrefix), /* @__PURE__ */ React5.createElement("div", { className: "flex justify-center mt-2 mb-10 md:mb-14" }, /* @__PURE__ */ React5.createElement("span", { className: "relative inline-block mx-1.5 px-4 py-2 md:py-3 bg-[#21a473]/25 border border-[#3ae9a8] rounded-sm text-white select-none text-2xl md:text-4xl lg:text-6xl tracking-tight" }, /* @__PURE__ */ React5.createElement("span", { className: "absolute top-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#21a473] rounded-[1px] z-10" }), /* @__PURE__ */ React5.createElement("span", { className: "absolute top-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#21a473] rounded-[1px] z-10" }), /* @__PURE__ */ React5.createElement("span", { className: "absolute bottom-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#21a473] rounded-[1px] z-10" }), /* @__PURE__ */ React5.createElement("span", { className: "absolute bottom-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#21a473] rounded-[1px] z-10" }), highlightText, /* @__PURE__ */ React5.createElement("span", { className: "absolute -bottom-5 -right-5 flex items-center z-20 pointer-events-none select-none filter drop-shadow-[0_2px_4px_rgba(0,0,0,0.25)]" }, /* @__PURE__ */ React5.createElement("svg", { width: "18", height: "22", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "transform -rotate-12" }, /* @__PURE__ */ React5.createElement("path", { d: "M1 1V17.8L5.8 13.1H12.8L1 1Z", fill: "#21a473", stroke: "white", strokeWidth: "1.8", strokeLinejoin: "round" })), /* @__PURE__ */ React5.createElement("span", { className: "ml-1 bg-[#21a473] text-[10px] text-white px-2 py-0.5 rounded-full border border-white tracking-wide" }, cursorLabel)))), subtitle && /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] md:text-[15px] text-[#bbf7df]/90 max-w-xl mx-auto mb-10 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ React5.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-10" }, ctaText && ctaHref && /* @__PURE__ */ React5.createElement("div", { className: "w-full sm:w-60 flex justify-center *:w-full" }, /* @__PURE__ */ React5.createElement(ThreeDButton, { href: ctaHref }, ctaText)), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React5.createElement(
|
|
216
258
|
Link4,
|
|
217
259
|
{
|
|
218
260
|
href: secondaryCtaHref,
|
|
@@ -280,12 +322,12 @@ var AppBento2 = ({ tagline, headline, features }) => {
|
|
|
280
322
|
};
|
|
281
323
|
|
|
282
324
|
// src/components/FeatureScroll.tsx
|
|
283
|
-
import React7, { useRef, useState as
|
|
325
|
+
import React7, { useRef, useState as useState3, useEffect } from "react";
|
|
284
326
|
import Image3 from "next/image";
|
|
285
327
|
import { HugeiconsIcon as HugeiconsIcon4 } from "@hugeicons/react";
|
|
286
328
|
import { ArrowLeft01Icon, ArrowRight01Icon, Loading03Icon } from "@hugeicons/core-free-icons";
|
|
287
329
|
var FeatureCard = ({ feature }) => {
|
|
288
|
-
const [isLoading, setIsLoading] =
|
|
330
|
+
const [isLoading, setIsLoading] = useState3(!!feature.image);
|
|
289
331
|
return /* @__PURE__ */ React7.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__ */ React7.createElement("div", { className: "relative w-full aspect-16/10 bg-neutral-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React7.createElement(
|
|
290
332
|
"div",
|
|
291
333
|
{
|
|
@@ -313,8 +355,8 @@ var FeatureCard = ({ feature }) => {
|
|
|
313
355
|
};
|
|
314
356
|
var FeatureScroll = ({ tagline, headline, features }) => {
|
|
315
357
|
const scrollRef = useRef(null);
|
|
316
|
-
const [canScrollLeft, setCanScrollLeft] =
|
|
317
|
-
const [canScrollRight, setCanScrollRight] =
|
|
358
|
+
const [canScrollLeft, setCanScrollLeft] = useState3(false);
|
|
359
|
+
const [canScrollRight, setCanScrollRight] = useState3(true);
|
|
318
360
|
const checkScroll = () => {
|
|
319
361
|
if (scrollRef.current) {
|
|
320
362
|
const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
|
|
@@ -379,7 +421,7 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
379
421
|
};
|
|
380
422
|
|
|
381
423
|
// src/components/AITranscriptionFeature.tsx
|
|
382
|
-
import React8, { useState as
|
|
424
|
+
import React8, { useState as useState4 } from "react";
|
|
383
425
|
import Image4 from "next/image";
|
|
384
426
|
import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react";
|
|
385
427
|
import { Loading03Icon as Loading03Icon2 } from "@hugeicons/core-free-icons";
|
|
@@ -393,8 +435,8 @@ var AITranscriptionFeature = ({
|
|
|
393
435
|
cursorLabel,
|
|
394
436
|
detailTextSuffix
|
|
395
437
|
}) => {
|
|
396
|
-
const [isLoading, setIsLoading] =
|
|
397
|
-
return /* @__PURE__ */ React8.createElement("section", { className: "py-24 w-full flex justify-center
|
|
438
|
+
const [isLoading, setIsLoading] = useState4(!!imagePath);
|
|
439
|
+
return /* @__PURE__ */ React8.createElement("section", { className: "py-24 w-full flex justify-center relative z-10" }, /* @__PURE__ */ React8.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ React8.createElement("div", { className: "flex flex-col items-center text-center mb-12 relative z-10 animate-in fade-in slide-in-from-bottom-4 duration-700" }, /* @__PURE__ */ React8.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 block mb-4" }, tagline), /* @__PURE__ */ React8.createElement("h2", { className: "text-3xl md:text-5xl tracking-tight animate-gradient-wipe leading-[1.05] mb-4" }, headline), /* @__PURE__ */ React8.createElement("p", { className: "text-[15px] md:text-[16px] leading-[1.8] text-neutral-600 max-w-xl mx-auto" }, description)), /* @__PURE__ */ React8.createElement("div", { className: "relative w-full max-w-5xl mx-auto aspect-video sm:aspect-21/9 bg-neutral-100 rounded-2xl overflow-hidden mb-12 flex items-center justify-center shadow-[0_0_40px_rgba(0,0,0,0.03)] animate-in fade-in zoom-in-95 duration-700 delay-150 fill-mode-both" }, /* @__PURE__ */ React8.createElement(
|
|
398
440
|
"div",
|
|
399
441
|
{
|
|
400
442
|
className: "absolute inset-0 pointer-events-none opacity-[0.03] z-20 mix-blend-overlay",
|
|
@@ -463,10 +505,10 @@ var ManagedDocument = ({
|
|
|
463
505
|
};
|
|
464
506
|
|
|
465
507
|
// src/components/ManagedContactBlock.tsx
|
|
466
|
-
import React11, { useState as
|
|
508
|
+
import React11, { useState as useState5, useEffect as useEffect2 } from "react";
|
|
467
509
|
import { HugeiconsIcon as HugeiconsIcon7 } from "@hugeicons/react";
|
|
468
510
|
var SecureEmail = ({ user, domain, className }) => {
|
|
469
|
-
const [isMounted, setIsMounted] =
|
|
511
|
+
const [isMounted, setIsMounted] = useState5(false);
|
|
470
512
|
useEffect2(() => {
|
|
471
513
|
setIsMounted(true);
|
|
472
514
|
}, []);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@retinalabsllc/zairusjs",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "A perceptive, Ai data driven Next.js UI component library.",
|
|
5
5
|
"author": "Retina Labs Company",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@hugeicons/core-free-icons": "^1.1.0",
|
|
41
41
|
"@hugeicons/react": "^1.1.1",
|
|
42
|
+
"@retinalabsllc/zairusjs": "^0.1.5",
|
|
42
43
|
"clsx": "^2.1.1",
|
|
43
44
|
"react-hot-toast": "^2.6.0",
|
|
44
45
|
"tailwind-merge": "^3.6.0",
|
|
@@ -56,5 +57,8 @@
|
|
|
56
57
|
"tailwindcss": "^4.0.0",
|
|
57
58
|
"tsup": "^8.0.0",
|
|
58
59
|
"typescript": "^5.0.0"
|
|
60
|
+
},
|
|
61
|
+
"overrides": {
|
|
62
|
+
"postcss": "^8.5.15"
|
|
59
63
|
}
|
|
60
|
-
}
|
|
64
|
+
}
|