@retinalabsllc/zairusjs 0.1.5 → 0.1.7

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 CHANGED
@@ -33,6 +33,8 @@ interface HeaderProps {
33
33
  showLogo?: boolean;
34
34
  invert?: boolean;
35
35
  hideHeaderText?: boolean;
36
+ light?: boolean;
37
+ compact?: boolean;
36
38
  }
37
39
  declare const Header: React.FC<HeaderProps>;
38
40
 
package/dist/index.d.ts CHANGED
@@ -33,6 +33,8 @@ interface HeaderProps {
33
33
  showLogo?: boolean;
34
34
  invert?: boolean;
35
35
  hideHeaderText?: boolean;
36
+ light?: boolean;
37
+ compact?: boolean;
36
38
  }
37
39
  declare const Header: React.FC<HeaderProps>;
38
40
 
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 = ({ href, children, className = "" }) => {
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 ? "text-white font-medium" : "text-neutral-400 hover:text-white"} ${className}`
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
  );
@@ -187,10 +194,18 @@ var Header = ({
187
194
  subtitle,
188
195
  links,
189
196
  showLogo = true,
190
- invert = false,
191
- hideHeaderText = false
197
+ invert = true,
198
+ hideHeaderText = false,
199
+ light = true,
200
+ // Defaults to true (white background)
201
+ compact = false
202
+ // Defaults to false (full width)
192
203
  }) => {
193
- 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" }, /* @__PURE__ */ import_react4.default.createElement("header", { className: "w-full bg-black/95 backdrop-blur-md rounded-full py-2 px-6 flex justify-between items-center shadow-[0_8px_60px_rgba(0,0,0,0.2)] border border-white/10" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-center" }, /* @__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(
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(
194
209
  import_image.default,
195
210
  {
196
211
  src: logoSrc,
@@ -200,12 +215,13 @@ var Header = ({
200
215
  className: `object-contain w-5 h-auto ${invert ? "invert" : ""}`,
201
216
  priority: true
202
217
  }
203
- ), !hideHeaderText && /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-[12px] text-white leading-none tracking-wide mb-1" }, companyName), subtitle && /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest leading-none" }, subtitle)))), /* @__PURE__ */ import_react4.default.createElement("nav", { className: "flex items-center gap-1 md:gap-2" }, links.map((link, index) => /* @__PURE__ */ import_react4.default.createElement(
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(
204
219
  NavLink,
205
220
  {
206
221
  key: index,
207
222
  href: link.href,
208
- className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
223
+ className: link.hideOnMobile ? "hidden sm:inline-flex" : "",
224
+ light
209
225
  },
210
226
  link.label
211
227
  ))))));
@@ -282,7 +298,7 @@ var HeroSection = ({
282
298
  {
283
299
  className: "absolute inset-0 w-full h-full pointer-events-none z-0",
284
300
  style: {
285
- background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, #ffffff 100%)`
301
+ background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, #f5f5f5 100%)`
286
302
  }
287
303
  }
288
304
  ), /* @__PURE__ */ import_react7.default.createElement(
@@ -475,7 +491,7 @@ var AITranscriptionFeature = ({
475
491
  detailTextSuffix
476
492
  }) => {
477
493
  const [isLoading, setIsLoading] = (0, import_react12.useState)(!!imagePath);
478
- 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(
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(
479
495
  "div",
480
496
  {
481
497
  className: "absolute inset-0 pointer-events-none opacity-[0.03] z-20 mix-blend-overlay",
@@ -497,7 +513,7 @@ var AITranscriptionFeature = ({
497
513
  ${isLoading ? "scale-105 blur-2xl opacity-0" : "scale-100 blur-0 opacity-100"}
498
514
  `
499
515
  }
500
- ) : /* @__PURE__ */ import_react12.default.createElement("div", { className: "absolute inset-0 bg-white z-0" })), /* @__PURE__ */ import_react12.default.createElement("div", { className: "max-w-3xl mx-auto text-center animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300 fill-mode-both" }, /* @__PURE__ */ import_react12.default.createElement("p", { className: "text-[22px] md:text-[25px] leading-[1.8] text-neutral-800" }, detailTextPrefix, " ", /* @__PURE__ */ import_react12.default.createElement("span", { className: "relative inline-block mx-1 px-2.5 py-0.5 bg-[#20A272]/10 border border-[#20A272] rounded-[3px] text-[#1C3D36] transition-all duration-300 whitespace-nowrap" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute top-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute top-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute bottom-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute bottom-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), highlightText, /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute -bottom-6 -right-6 flex items-center z-20 pointer-events-none select-none filter drop-shadow-[0_2px_4px_rgba(0,0,0,0.15)]" }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "transform -rotate-12" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M1 1V17.8L5.8 13.1H12.8L1 1Z", fill: "#20A272", stroke: "white", strokeWidth: "1.8", strokeLinejoin: "round" })), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ml-1 bg-[#20A272] text-[10px] text-white font-mono px-2 py-0.5 rounded-full border border-white tracking-wide" }, cursorLabel))), " ", detailTextSuffix))));
516
+ ) : /* @__PURE__ */ import_react12.default.createElement("div", { className: "absolute inset-0 bg-white z-0" })), /* @__PURE__ */ import_react12.default.createElement("div", { className: "max-w-3xl mx-auto text-center animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300 fill-mode-both" }, /* @__PURE__ */ import_react12.default.createElement("p", { className: "text-[18px] sm:text-[22px] md:text-[25px] leading-[1.8] text-neutral-800" }, detailTextPrefix, " ", /* @__PURE__ */ import_react12.default.createElement("span", { className: "relative inline-block mx-1 px-2.5 py-0.5 bg-[#20A272]/10 border border-[#20A272] rounded-[3px] text-[#1C3D36] transition-all duration-300 max-w-full wrap-break-word" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute top-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute top-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute bottom-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute bottom-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), highlightText, /* @__PURE__ */ import_react12.default.createElement("span", { className: "absolute -bottom-6 -right-4 sm:-right-6 flex items-center z-20 pointer-events-none select-none filter drop-shadow-[0_2px_4px_rgba(0,0,0,0.15)]" }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "transform -rotate-12" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M1 1V17.8L5.8 13.1H12.8L1 1Z", fill: "#20A272", stroke: "white", strokeWidth: "1.8", strokeLinejoin: "round" })), /* @__PURE__ */ import_react12.default.createElement("span", { className: "ml-1 bg-[#20A272] text-[10px] text-white font-mono px-2 py-0.5 rounded-full border border-white tracking-wide" }, cursorLabel))), " ", detailTextSuffix))));
501
517
  };
502
518
 
503
519
  // src/components/PlatformFeatures.tsx
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 = ({ href, children, className = "" }) => {
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 ? "text-white font-medium" : "text-neutral-400 hover:text-white"} ${className}`
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
  );
@@ -132,10 +139,18 @@ var Header = ({
132
139
  subtitle,
133
140
  links,
134
141
  showLogo = true,
135
- invert = false,
136
- hideHeaderText = false
142
+ invert = true,
143
+ hideHeaderText = false,
144
+ light = true,
145
+ // Defaults to true (white background)
146
+ compact = false
147
+ // Defaults to false (full width)
137
148
  }) => {
138
- 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" }, /* @__PURE__ */ React3.createElement("header", { className: "w-full bg-black/95 backdrop-blur-md rounded-full py-2 px-6 flex justify-between items-center shadow-[0_8px_60px_rgba(0,0,0,0.2)] border border-white/10" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React3.createElement(Link2, { href: "/", className: "flex items-center gap-3 transition-opacity hover:opacity-70" }, showLogo && /* @__PURE__ */ React3.createElement(
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(
139
154
  Image,
140
155
  {
141
156
  src: logoSrc,
@@ -145,12 +160,13 @@ var Header = ({
145
160
  className: `object-contain w-5 h-auto ${invert ? "invert" : ""}`,
146
161
  priority: true
147
162
  }
148
- ), !hideHeaderText && /* @__PURE__ */ React3.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React3.createElement("span", { className: "text-[12px] text-white leading-none tracking-wide mb-1" }, companyName), subtitle && /* @__PURE__ */ React3.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest leading-none" }, subtitle)))), /* @__PURE__ */ React3.createElement("nav", { className: "flex items-center gap-1 md:gap-2" }, links.map((link, index) => /* @__PURE__ */ React3.createElement(
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(
149
164
  NavLink,
150
165
  {
151
166
  key: index,
152
167
  href: link.href,
153
- className: link.hideOnMobile ? "hidden sm:inline-flex" : ""
168
+ className: link.hideOnMobile ? "hidden sm:inline-flex" : "",
169
+ light
154
170
  },
155
171
  link.label
156
172
  ))))));
@@ -227,7 +243,7 @@ var HeroSection = ({
227
243
  {
228
244
  className: "absolute inset-0 w-full h-full pointer-events-none z-0",
229
245
  style: {
230
- background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, #ffffff 100%)`
246
+ background: `radial-gradient(120% 100% at 50% 0%, #043324 0%, #21a473 45%, #e0f6ce 80%, #f5f5f5 100%)`
231
247
  }
232
248
  }
233
249
  ), /* @__PURE__ */ React5.createElement(
@@ -420,7 +436,7 @@ var AITranscriptionFeature = ({
420
436
  detailTextSuffix
421
437
  }) => {
422
438
  const [isLoading, setIsLoading] = useState4(!!imagePath);
423
- 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(
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(
424
440
  "div",
425
441
  {
426
442
  className: "absolute inset-0 pointer-events-none opacity-[0.03] z-20 mix-blend-overlay",
@@ -442,7 +458,7 @@ var AITranscriptionFeature = ({
442
458
  ${isLoading ? "scale-105 blur-2xl opacity-0" : "scale-100 blur-0 opacity-100"}
443
459
  `
444
460
  }
445
- ) : /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-0 bg-white z-0" })), /* @__PURE__ */ React8.createElement("div", { className: "max-w-3xl mx-auto text-center animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300 fill-mode-both" }, /* @__PURE__ */ React8.createElement("p", { className: "text-[22px] md:text-[25px] leading-[1.8] text-neutral-800" }, detailTextPrefix, " ", /* @__PURE__ */ React8.createElement("span", { className: "relative inline-block mx-1 px-2.5 py-0.5 bg-[#20A272]/10 border border-[#20A272] rounded-[3px] text-[#1C3D36] transition-all duration-300 whitespace-nowrap" }, /* @__PURE__ */ React8.createElement("span", { className: "absolute top-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ React8.createElement("span", { className: "absolute top-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ React8.createElement("span", { className: "absolute bottom-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ React8.createElement("span", { className: "absolute bottom-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), highlightText, /* @__PURE__ */ React8.createElement("span", { className: "absolute -bottom-6 -right-6 flex items-center z-20 pointer-events-none select-none filter drop-shadow-[0_2px_4px_rgba(0,0,0,0.15)]" }, /* @__PURE__ */ React8.createElement("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "transform -rotate-12" }, /* @__PURE__ */ React8.createElement("path", { d: "M1 1V17.8L5.8 13.1H12.8L1 1Z", fill: "#20A272", stroke: "white", strokeWidth: "1.8", strokeLinejoin: "round" })), /* @__PURE__ */ React8.createElement("span", { className: "ml-1 bg-[#20A272] text-[10px] text-white font-mono px-2 py-0.5 rounded-full border border-white tracking-wide" }, cursorLabel))), " ", detailTextSuffix))));
461
+ ) : /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-0 bg-white z-0" })), /* @__PURE__ */ React8.createElement("div", { className: "max-w-3xl mx-auto text-center animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300 fill-mode-both" }, /* @__PURE__ */ React8.createElement("p", { className: "text-[18px] sm:text-[22px] md:text-[25px] leading-[1.8] text-neutral-800" }, detailTextPrefix, " ", /* @__PURE__ */ React8.createElement("span", { className: "relative inline-block mx-1 px-2.5 py-0.5 bg-[#20A272]/10 border border-[#20A272] rounded-[3px] text-[#1C3D36] transition-all duration-300 max-w-full wrap-break-word" }, /* @__PURE__ */ React8.createElement("span", { className: "absolute top-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ React8.createElement("span", { className: "absolute top-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ React8.createElement("span", { className: "absolute bottom-[-3.5px] left-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), /* @__PURE__ */ React8.createElement("span", { className: "absolute bottom-[-3.5px] right-[-3.5px] w-2 h-2 bg-white border border-[#20A272] rounded-[1px] z-10" }), highlightText, /* @__PURE__ */ React8.createElement("span", { className: "absolute -bottom-6 -right-4 sm:-right-6 flex items-center z-20 pointer-events-none select-none filter drop-shadow-[0_2px_4px_rgba(0,0,0,0.15)]" }, /* @__PURE__ */ React8.createElement("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "transform -rotate-12" }, /* @__PURE__ */ React8.createElement("path", { d: "M1 1V17.8L5.8 13.1H12.8L1 1Z", fill: "#20A272", stroke: "white", strokeWidth: "1.8", strokeLinejoin: "round" })), /* @__PURE__ */ React8.createElement("span", { className: "ml-1 bg-[#20A272] text-[10px] text-white font-mono px-2 py-0.5 rounded-full border border-white tracking-wide" }, cursorLabel))), " ", detailTextSuffix))));
446
462
  };
447
463
 
448
464
  // src/components/PlatformFeatures.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
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",
@@ -60,4 +61,4 @@
60
61
  "overrides": {
61
62
  "postcss": "^8.5.15"
62
63
  }
63
- }
64
+ }