@retinalabsllc/zairusjs 0.1.2 → 0.1.4

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
@@ -58,14 +58,27 @@ interface FooterProps {
58
58
  declare const Footer: React.FC<FooterProps>;
59
59
 
60
60
  interface HeroSectionProps {
61
- badgeText: string;
61
+ /** Optional small pill text at the very top (e.g., "AI Research Company") */
62
+ badgeText?: string;
63
+ /** The first part of the H1 (e.g., "Hey Retina," or "AI that sees,") */
62
64
  titlePrefix: React.ReactNode;
65
+ /** The text that receives the green bounding box highlight */
63
66
  highlightText: string;
67
+ /** The text inside the collaborator cursor tag */
64
68
  cursorLabel: string;
65
- subtitle: string;
66
- ctaText: string;
67
- ctaHref: string;
69
+ /** Optional subtitle below the main headline */
70
+ subtitle?: string;
71
+ /** Primary 3D Button text */
72
+ ctaText?: string;
73
+ /** Primary 3D Button link */
74
+ ctaHref?: string;
75
+ /** Optional Secondary flat white button text */
76
+ secondaryCtaText?: string;
77
+ /** Optional Secondary flat white button link */
78
+ secondaryCtaHref?: string;
79
+ /** Should the bottom dashboard image render? */
68
80
  showImage?: boolean;
81
+ /** URL for the dashboard image */
69
82
  imageSrc?: string;
70
83
  }
71
84
  declare const HeroSection: React.FC<HeroSectionProps>;
@@ -76,9 +89,6 @@ interface BentoFeature {
76
89
  desc: string;
77
90
  size: string;
78
91
  icon: any;
79
- number?: string;
80
- isBrand?: boolean;
81
- isWhite?: boolean;
82
92
  }
83
93
  interface AppBento2Props {
84
94
  tagline: string;
package/dist/index.d.ts CHANGED
@@ -58,14 +58,27 @@ interface FooterProps {
58
58
  declare const Footer: React.FC<FooterProps>;
59
59
 
60
60
  interface HeroSectionProps {
61
- badgeText: string;
61
+ /** Optional small pill text at the very top (e.g., "AI Research Company") */
62
+ badgeText?: string;
63
+ /** The first part of the H1 (e.g., "Hey Retina," or "AI that sees,") */
62
64
  titlePrefix: React.ReactNode;
65
+ /** The text that receives the green bounding box highlight */
63
66
  highlightText: string;
67
+ /** The text inside the collaborator cursor tag */
64
68
  cursorLabel: string;
65
- subtitle: string;
66
- ctaText: string;
67
- ctaHref: string;
69
+ /** Optional subtitle below the main headline */
70
+ subtitle?: string;
71
+ /** Primary 3D Button text */
72
+ ctaText?: string;
73
+ /** Primary 3D Button link */
74
+ ctaHref?: string;
75
+ /** Optional Secondary flat white button text */
76
+ secondaryCtaText?: string;
77
+ /** Optional Secondary flat white button link */
78
+ secondaryCtaHref?: string;
79
+ /** Should the bottom dashboard image render? */
68
80
  showImage?: boolean;
81
+ /** URL for the dashboard image */
69
82
  imageSrc?: string;
70
83
  }
71
84
  declare const HeroSection: React.FC<HeroSectionProps>;
@@ -76,9 +89,6 @@ interface BentoFeature {
76
89
  desc: string;
77
90
  size: string;
78
91
  icon: any;
79
- number?: string;
80
- isBrand?: boolean;
81
- isWhite?: boolean;
82
92
  }
83
93
  interface AppBento2Props {
84
94
  tagline: string;
package/dist/index.js CHANGED
@@ -220,7 +220,7 @@ var Footer = ({
220
220
  copyrightText,
221
221
  topSection
222
222
  }) => {
223
- 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-16 mb-12 text-left" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-sm flex flex-col items-start justify-between" }, /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-[14px] text-neutral-600 leading-relaxed " }, description))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-12 w-full lg:w-auto text-left" }, columns.map((col, idx) => /* @__PURE__ */ import_react5.default.createElement("div", { key: idx }, /* @__PURE__ */ import_react5.default.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6" }, 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" }, link.label) : /* @__PURE__ */ import_react5.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))))), /* @__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(
223
+ 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-16 mb-12 text-left" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "max-w-sm flex flex-col items-start justify-between" }, /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-[14px] text-neutral-600 leading-relaxed" }, description))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "flex flex-wrap justify-start gap-x-16 gap-y-12 w-full lg:w-auto text-left" }, columns.map((col, idx) => /* @__PURE__ */ import_react5.default.createElement("div", { key: idx, className: "min-w-30" }, /* @__PURE__ */ import_react5.default.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 whitespace-nowrap" }, 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" }, link.label) : /* @__PURE__ */ import_react5.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))))), /* @__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
224
  "a",
225
225
  {
226
226
  key: idx,
@@ -236,6 +236,7 @@ var Footer = ({
236
236
 
237
237
  // src/components/HeroSection.tsx
238
238
  var import_react7 = __toESM(require("react"));
239
+ var import_link4 = __toESM(require("next/link"));
239
240
  var import_image2 = __toESM(require("next/image"));
240
241
  var HeroSection = ({
241
242
  badgeText,
@@ -245,7 +246,9 @@ var HeroSection = ({
245
246
  subtitle,
246
247
  ctaText,
247
248
  ctaHref,
248
- showImage = true,
249
+ secondaryCtaText,
250
+ secondaryCtaHref,
251
+ showImage = false,
249
252
  imageSrc = "/assets/ai.avif"
250
253
  }) => {
251
254
  return /* @__PURE__ */ import_react7.default.createElement("section", { className: "relative pt-32 sm:pt-40 pb-16 flex flex-col items-center overflow-hidden w-full" }, /* @__PURE__ */ import_react7.default.createElement(
@@ -264,7 +267,14 @@ var HeroSection = ({
264
267
  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")`
265
268
  }
266
269
  }
267
- ), /* @__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" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "inline-flex items-center gap-1.5 mb-6 px-3.5 py-1.5 rounded-full bg-white/10 backdrop-blur-md shadow-xs" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "flex h-2 w-2 rounded-full bg-[#3ae9a8]" }), /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-[11px] tracking-wider text-white" }, badgeText)), /* @__PURE__ */ import_react7.default.createElement("h1", { className: "text-4xl sm:text-5xl md:text-6xl text-white tracking-tight leading-[1.3] max-w-3xl mb-6" }, titlePrefix, /* @__PURE__ */ import_react7.default.createElement("span", { className: "relative inline-block mx-1.5 px-3 py-1 bg-[#21a473]/25 border border-[#3ae9a8] rounded-sm text-white select-none whitespace-nowrap" }, /* @__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: "16", height: "20", 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 font-mono font-medium px-2 py-0.5 rounded-full border border-white tracking-wide" }, cursorLabel)))), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-sm sm:text-base md:text-lg text-[#bbf7df]/90 max-w-xl mx-auto mb-8 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ import_react7.default.createElement("div", { className: "mb-4" }, /* @__PURE__ */ import_react7.default.createElement(ThreeDButton, { href: ctaHref }, ctaText)), showImage && /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full max-w-4xl mx-auto px-2 sm:px-6" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full flex flex-col items-center" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full rounded-t-xl overflow-hidden border-[5px] border-[#1c1c1e] bg-[#1c1c1e] shadow-2xl aspect-video" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "absolute top-1.5 left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-[#0a0a0b] rounded-full flex items-center justify-center z-30" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-1 h-1 bg-[#1a2d42] rounded-full" })), /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full h-full rounded-sm overflow-hidden" }, /* @__PURE__ */ import_react7.default.createElement(
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 -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
+ import_link4.default,
272
+ {
273
+ href: secondaryCtaHref,
274
+ className: "w-full sm:w-60 inline-flex items-center justify-center text-[12px] tracking-widest rounded-full px-8 py-2.5 bg-white text-black transition-colors hover:bg-neutral-200 outline-none"
275
+ },
276
+ secondaryCtaText
277
+ )), showImage && /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full max-w-4xl mx-auto px-2 sm:px-6" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full flex flex-col items-center" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full rounded-t-xl overflow-hidden border-[5px] border-[#1c1c1e] bg-[#1c1c1e] shadow-2xl aspect-video" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "absolute top-1.5 left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-[#0a0a0b] rounded-full flex items-center justify-center z-30" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-1 h-1 bg-[#1a2d42] rounded-full" })), /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full h-full rounded-sm overflow-hidden" }, /* @__PURE__ */ import_react7.default.createElement(
268
278
  import_image2.default,
269
279
  {
270
280
  src: imageSrc,
@@ -281,35 +291,45 @@ var HeroSection = ({
281
291
  var import_react8 = __toESM(require("react"));
282
292
  var import_react9 = require("@hugeicons/react");
283
293
  var AppBento2 = ({ tagline, headline, features }) => {
284
- return /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full flex justify-center px-4" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "max-w-6xl w-full" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative overflow-hidden mb-8 text-left" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 block mb-4" }, tagline), /* @__PURE__ */ import_react8.default.createElement("h2", { className: "text-3xl md:text-4xl tracking-tight text-black leading-[1.1]" }, headline))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
285
- const isHighlight = f.isWhite !== void 0 ? f.isWhite : f.isBrand || i === 1;
294
+ return /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full py-16" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-full flex justify-center px-4" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "max-w-6xl w-full" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative overflow-hidden mb-12 text-left" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 block mb-4 uppercase" }, tagline), /* @__PURE__ */ import_react8.default.createElement("h2", { className: "text-3xl md:text-4xl tracking-tight text-black leading-[1.1]" }, headline))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
295
+ const isWhite = i === 0;
296
+ const isBlack = i === 1;
297
+ const isNeutral = i === 2;
298
+ const getBgStyle = () => {
299
+ if (isWhite) return "bg-white";
300
+ if (isBlack) return "bg-black";
301
+ if (isNeutral) return "bg-neutral-200";
302
+ return "bg-neutral-100";
303
+ };
304
+ const getShadowStyle = () => {
305
+ if (isBlack) return `
306
+ inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
307
+ inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
308
+ 0 4px 0 0 #0c0c0c,
309
+ 0 12px 24px rgba(0, 0, 0, 0.1)
310
+ `;
311
+ return "none";
312
+ };
313
+ const textColor = isBlack ? "text-white" : "text-black";
314
+ const subTextColor = isBlack ? "text-neutral-300" : "text-neutral-600";
315
+ const labelColor = isBlack ? "text-neutral-400" : "text-neutral-500";
286
316
  return /* @__PURE__ */ import_react8.default.createElement(
287
317
  "div",
288
318
  {
289
319
  key: i,
290
- className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-70 transition-all duration-500 group text-left ${isHighlight ? "bg-black hover:-translate-y-1.5 active:translate-y-0.5" : "bg-neutral-100 hover:-translate-y-1"} ${f.size}`,
291
- style: {
292
- boxShadow: isHighlight ? `
293
- inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
294
- inset 0 -3px 0 0 rgba(0, 0, 0, 0.6),
295
- 0 4px 0 0 #0c0c0c,
296
- 0 12px 24px rgba(0, 0, 0, 0.15)
297
- ` : "none"
298
- }
320
+ className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-500 group text-left ${getBgStyle()} ${f.size}`,
321
+ style: { boxShadow: getShadowStyle() }
299
322
  },
300
323
  /* @__PURE__ */ import_react8.default.createElement(
301
324
  "div",
302
325
  {
303
326
  className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
304
- style: {
305
- 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")`,
306
- backgroundRepeat: "repeat"
307
- }
327
+ 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")` }
308
328
  }
309
329
  ),
310
- isHighlight && /* @__PURE__ */ import_react8.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" }),
311
- /* @__PURE__ */ import_react8.default.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isHighlight ? "text-white/5" : "text-black/5"}` }, /* @__PURE__ */ import_react8.default.createElement(import_react9.HugeiconsIcon, { icon: f.icon, size: 180 }))),
312
- /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: `text-[9px] tracking-widest ${isHighlight ? "text-neutral-400" : "text-neutral-500"}` }, f.label), /* @__PURE__ */ import_react8.default.createElement("div", { className: `p-2 rounded-full transition-colors ${isHighlight ? "bg-white/10" : "bg-white"}` }, /* @__PURE__ */ import_react8.default.createElement(import_react9.HugeiconsIcon, { icon: f.icon, size: 20, className: `transition-colors ${isHighlight ? "text-white" : "text-neutral-600 group-hover:text-black"}` }))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react8.default.createElement("h3", { className: `text-xl mb-2 tracking-tight ${isHighlight ? "text-white" : "text-black"}` }, f.title), /* @__PURE__ */ import_react8.default.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${isHighlight ? "text-neutral-300" : "text-neutral-600"}` }, f.desc)))
330
+ isBlack && /* @__PURE__ */ import_react8.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" }),
331
+ /* @__PURE__ */ import_react8.default.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ import_react8.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_react8.default.createElement(import_react9.HugeiconsIcon, { icon: f.icon, size: 180 }))),
332
+ /* @__PURE__ */ import_react8.default.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: `text-[9px] uppercase tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ import_react8.default.createElement("div", { className: `p-2 rounded-full transition-colors ${isBlack ? "bg-white/10" : "bg-white/50 backdrop-blur-sm"}` }, /* @__PURE__ */ import_react8.default.createElement(import_react9.HugeiconsIcon, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react8.default.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ import_react8.default.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
313
333
  );
314
334
  })))));
315
335
  };
@@ -558,7 +578,7 @@ var ManagedContactBlock = ({
558
578
 
559
579
  // src/components/ManagedPricingBlock.tsx
560
580
  var import_react19 = __toESM(require("react"));
561
- var import_link4 = __toESM(require("next/link"));
581
+ var import_link5 = __toESM(require("next/link"));
562
582
  var CheckIcon = ({ className = "" }) => /* @__PURE__ */ import_react19.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_react19.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ import_react19.default.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
563
583
  var CrossIcon = ({ className = "" }) => /* @__PURE__ */ import_react19.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_react19.default.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ import_react19.default.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
564
584
  var ManagedPricingBlock = ({
@@ -574,7 +594,7 @@ var ManagedPricingBlock = ({
574
594
  },
575
595
  /* @__PURE__ */ import_react19.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-black text-base block mb-1" }, plan.name), /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-3xl text-black" }, plan.price), plan.period && /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-xs text-neutral-500" }, plan.period)), /* @__PURE__ */ import_react19.default.createElement("p", { className: "text-xs text-neutral-500 mt-2" }, plan.description)),
576
596
  plan.isPremium ? /* @__PURE__ */ import_react19.default.createElement(ThreeDButton, { href: plan.ctaHref, className: "mb-6 w-full" }, plan.ctaText) : /* @__PURE__ */ import_react19.default.createElement(
577
- import_link4.default,
597
+ import_link5.default,
578
598
  {
579
599
  href: plan.ctaHref,
580
600
  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"
@@ -651,7 +671,7 @@ var ManagedBoardBlock = ({
651
671
 
652
672
  // src/components/ManagedProjectsBlock.tsx
653
673
  var import_react22 = __toESM(require("react"));
654
- var import_link5 = __toESM(require("next/link"));
674
+ var import_link6 = __toESM(require("next/link"));
655
675
  var GridSection = ({
656
676
  children,
657
677
  isLast = false,
@@ -674,13 +694,13 @@ var ManagedProjectsBlock = ({
674
694
  ), /* @__PURE__ */ import_react22.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react22.default.createElement(GridSection, null, tagline && /* @__PURE__ */ import_react22.default.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 text-left block uppercase" }, tagline), /* @__PURE__ */ import_react22.default.createElement("h1", { className: "text-4xl md:text-5xl mt-4 text-black tracking-tight text-left" }, title)), projects.map((project, index) => {
675
695
  const isLast = index === projects.length - 1;
676
696
  const projectContent = /* @__PURE__ */ import_react22.default.createElement("div", { className: "group block w-full" }, /* @__PURE__ */ import_react22.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_react22.default.createElement("div", { className: "flex items-center gap-3 md:gap-4" }, /* @__PURE__ */ import_react22.default.createElement("h2", { className: "text-[16px] text-black transition-all flex items-center gap-2" }, project.title, /* @__PURE__ */ import_react22.default.createElement("span", { className: "text-[12px] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300" }, project.isExternal ? "\u2197" : "\u2192")), /* @__PURE__ */ import_react22.default.createElement("span", { className: `text-[9px] px-2.5 py-1 rounded-full tracking-[0.15em] uppercase transition-colors ${project.status.toLowerCase() === "production" ? "bg-black text-white" : "bg-neutral-100 text-neutral-500 group-hover:bg-neutral-200 group-hover:text-black"}` }, project.status)), /* @__PURE__ */ import_react22.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-500 shrink-0 uppercase" }, project.date)), /* @__PURE__ */ import_react22.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));
677
- return /* @__PURE__ */ import_react22.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_react22.default.createElement("a", { href: project.link, target: "_blank", rel: "noopener noreferrer", className: "block outline-none" }, projectContent) : /* @__PURE__ */ import_react22.default.createElement(import_link5.default, { href: project.link, className: "block outline-none" }, projectContent));
697
+ return /* @__PURE__ */ import_react22.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_react22.default.createElement("a", { href: project.link, target: "_blank", rel: "noopener noreferrer", className: "block outline-none" }, projectContent) : /* @__PURE__ */ import_react22.default.createElement(import_link6.default, { href: project.link, className: "block outline-none" }, projectContent));
678
698
  }))));
679
699
  };
680
700
 
681
701
  // src/components/ManagedNotFoundBlock.tsx
682
702
  var import_react23 = __toESM(require("react"));
683
- var import_link6 = __toESM(require("next/link"));
703
+ var import_link7 = __toESM(require("next/link"));
684
704
  var ManagedNotFoundBlock = ({
685
705
  title = "404 - Page Not Found",
686
706
  description = "The page you are looking for does not exist or has been moved.",
@@ -696,7 +716,7 @@ var ManagedNotFoundBlock = ({
696
716
  },
697
717
  /* @__PURE__ */ import_react23.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" })
698
718
  )), /* @__PURE__ */ import_react23.default.createElement("h1", { className: "text-xl md:text-3xl text-black tracking-tight mb-4" }, title), /* @__PURE__ */ import_react23.default.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 mb-12" }, description), /* @__PURE__ */ import_react23.default.createElement(
699
- import_link6.default,
719
+ import_link7.default,
700
720
  {
701
721
  href: backLinkHref,
702
722
  className: "text-[11px] tracking-[0.2em] text-neutral-400 hover:text-black transition-colors pb-1 uppercase"
@@ -876,7 +896,7 @@ var NumberInput = ({
876
896
 
877
897
  // src/components/PortfolioHero.tsx
878
898
  var import_react29 = __toESM(require("react"));
879
- var import_link7 = __toESM(require("next/link"));
899
+ var import_link8 = __toESM(require("next/link"));
880
900
  var import_image7 = __toESM(require("next/image"));
881
901
  var import_react30 = require("@hugeicons/react");
882
902
  var import_core_free_icons6 = require("@hugeicons/core-free-icons");
@@ -918,7 +938,7 @@ var PortfolioHero = ({
918
938
  secondaryCtaHref
919
939
  }) => {
920
940
  const heroContentRef = useScrollAnimation();
921
- return /* @__PURE__ */ import_react29.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 bg-white" }, /* @__PURE__ */ import_react29.default.createElement(
941
+ return /* @__PURE__ */ import_react29.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_react29.default.createElement(
922
942
  "div",
923
943
  {
924
944
  ref: heroContentRef,
@@ -954,7 +974,7 @@ var PortfolioHero = ({
954
974
  },
955
975
  primaryCtaText
956
976
  )), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ import_react29.default.createElement(
957
- import_link7.default,
977
+ import_link8.default,
958
978
  {
959
979
  href: secondaryCtaHref,
960
980
  className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em] uppercase rounded-full px-8 py-3.5 bg-neutral-100 transition-colors text-black hover:bg-neutral-200 outline-none"
package/dist/index.mjs CHANGED
@@ -165,7 +165,7 @@ var Footer = ({
165
165
  copyrightText,
166
166
  topSection
167
167
  }) => {
168
- 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-16 mb-12 text-left" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-sm flex flex-col items-start justify-between" }, /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("p", { className: "text-[14px] text-neutral-600 leading-relaxed " }, description))), /* @__PURE__ */ React4.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-x-8 gap-y-12 w-full lg:w-auto text-left" }, columns.map((col, idx) => /* @__PURE__ */ React4.createElement("div", { key: idx }, /* @__PURE__ */ React4.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6" }, 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" }, link.label) : /* @__PURE__ */ React4.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))))), /* @__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(
168
+ 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-16 mb-12 text-left" }, /* @__PURE__ */ React4.createElement("div", { className: "max-w-sm flex flex-col items-start justify-between" }, /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("p", { className: "text-[14px] text-neutral-600 leading-relaxed" }, description))), /* @__PURE__ */ React4.createElement("div", { className: "flex flex-wrap justify-start gap-x-16 gap-y-12 w-full lg:w-auto text-left" }, columns.map((col, idx) => /* @__PURE__ */ React4.createElement("div", { key: idx, className: "min-w-30" }, /* @__PURE__ */ React4.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 whitespace-nowrap" }, 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" }, link.label) : /* @__PURE__ */ React4.createElement(Link3, { href: link.href, className: "hover:text-black transition-colors" }, link.label)))))))), /* @__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
169
  "a",
170
170
  {
171
171
  key: idx,
@@ -181,6 +181,7 @@ var Footer = ({
181
181
 
182
182
  // src/components/HeroSection.tsx
183
183
  import React5 from "react";
184
+ import Link4 from "next/link";
184
185
  import Image2 from "next/image";
185
186
  var HeroSection = ({
186
187
  badgeText,
@@ -190,7 +191,9 @@ var HeroSection = ({
190
191
  subtitle,
191
192
  ctaText,
192
193
  ctaHref,
193
- showImage = true,
194
+ secondaryCtaText,
195
+ secondaryCtaHref,
196
+ showImage = false,
194
197
  imageSrc = "/assets/ai.avif"
195
198
  }) => {
196
199
  return /* @__PURE__ */ React5.createElement("section", { className: "relative pt-32 sm:pt-40 pb-16 flex flex-col items-center overflow-hidden w-full" }, /* @__PURE__ */ React5.createElement(
@@ -209,7 +212,14 @@ var HeroSection = ({
209
212
  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")`
210
213
  }
211
214
  }
212
- ), /* @__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" }, /* @__PURE__ */ React5.createElement("div", { className: "inline-flex items-center gap-1.5 mb-6 px-3.5 py-1.5 rounded-full bg-white/10 backdrop-blur-md shadow-xs" }, /* @__PURE__ */ React5.createElement("span", { className: "flex h-2 w-2 rounded-full bg-[#3ae9a8]" }), /* @__PURE__ */ React5.createElement("span", { className: "text-[11px] tracking-wider text-white" }, badgeText)), /* @__PURE__ */ React5.createElement("h1", { className: "text-4xl sm:text-5xl md:text-6xl text-white tracking-tight leading-[1.3] max-w-3xl mb-6" }, titlePrefix, /* @__PURE__ */ React5.createElement("span", { className: "relative inline-block mx-1.5 px-3 py-1 bg-[#21a473]/25 border border-[#3ae9a8] rounded-sm text-white select-none whitespace-nowrap" }, /* @__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: "16", height: "20", 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 font-mono font-medium px-2 py-0.5 rounded-full border border-white tracking-wide" }, cursorLabel)))), /* @__PURE__ */ React5.createElement("p", { className: "text-sm sm:text-base md:text-lg text-[#bbf7df]/90 max-w-xl mx-auto mb-8 font-light leading-relaxed" }, subtitle), /* @__PURE__ */ React5.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React5.createElement(ThreeDButton, { href: ctaHref }, ctaText)), showImage && /* @__PURE__ */ React5.createElement("div", { className: "w-full max-w-4xl mx-auto px-2 sm:px-6" }, /* @__PURE__ */ React5.createElement("div", { className: "relative w-full flex flex-col items-center" }, /* @__PURE__ */ React5.createElement("div", { className: "relative w-full rounded-t-xl overflow-hidden border-[5px] border-[#1c1c1e] bg-[#1c1c1e] shadow-2xl aspect-video" }, /* @__PURE__ */ React5.createElement("div", { className: "absolute top-1.5 left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-[#0a0a0b] rounded-full flex items-center justify-center z-30" }, /* @__PURE__ */ React5.createElement("div", { className: "w-1 h-1 bg-[#1a2d42] rounded-full" })), /* @__PURE__ */ React5.createElement("div", { className: "relative w-full h-full rounded-sm overflow-hidden" }, /* @__PURE__ */ React5.createElement(
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 -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
+ Link4,
217
+ {
218
+ href: secondaryCtaHref,
219
+ className: "w-full sm:w-60 inline-flex items-center justify-center text-[12px] tracking-widest rounded-full px-8 py-2.5 bg-white text-black transition-colors hover:bg-neutral-200 outline-none"
220
+ },
221
+ secondaryCtaText
222
+ )), showImage && /* @__PURE__ */ React5.createElement("div", { className: "w-full max-w-4xl mx-auto px-2 sm:px-6" }, /* @__PURE__ */ React5.createElement("div", { className: "relative w-full flex flex-col items-center" }, /* @__PURE__ */ React5.createElement("div", { className: "relative w-full rounded-t-xl overflow-hidden border-[5px] border-[#1c1c1e] bg-[#1c1c1e] shadow-2xl aspect-video" }, /* @__PURE__ */ React5.createElement("div", { className: "absolute top-1.5 left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-[#0a0a0b] rounded-full flex items-center justify-center z-30" }, /* @__PURE__ */ React5.createElement("div", { className: "w-1 h-1 bg-[#1a2d42] rounded-full" })), /* @__PURE__ */ React5.createElement("div", { className: "relative w-full h-full rounded-sm overflow-hidden" }, /* @__PURE__ */ React5.createElement(
213
223
  Image2,
214
224
  {
215
225
  src: imageSrc,
@@ -226,35 +236,45 @@ var HeroSection = ({
226
236
  import React6 from "react";
227
237
  import { HugeiconsIcon as HugeiconsIcon3 } from "@hugeicons/react";
228
238
  var AppBento2 = ({ tagline, headline, features }) => {
229
- return /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("div", { className: "w-full flex justify-center px-4" }, /* @__PURE__ */ React6.createElement("div", { className: "max-w-6xl w-full" }, /* @__PURE__ */ React6.createElement("div", { className: "relative overflow-hidden mb-8 text-left" }, /* @__PURE__ */ React6.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React6.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 block mb-4" }, tagline), /* @__PURE__ */ React6.createElement("h2", { className: "text-3xl md:text-4xl tracking-tight text-black leading-[1.1]" }, headline))), /* @__PURE__ */ React6.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
230
- const isHighlight = f.isWhite !== void 0 ? f.isWhite : f.isBrand || i === 1;
239
+ return /* @__PURE__ */ React6.createElement("div", { className: "w-full py-16" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full flex justify-center px-4" }, /* @__PURE__ */ React6.createElement("div", { className: "max-w-6xl w-full" }, /* @__PURE__ */ React6.createElement("div", { className: "relative overflow-hidden mb-12 text-left" }, /* @__PURE__ */ React6.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React6.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 block mb-4 uppercase" }, tagline), /* @__PURE__ */ React6.createElement("h2", { className: "text-3xl md:text-4xl tracking-tight text-black leading-[1.1]" }, headline))), /* @__PURE__ */ React6.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
240
+ const isWhite = i === 0;
241
+ const isBlack = i === 1;
242
+ const isNeutral = i === 2;
243
+ const getBgStyle = () => {
244
+ if (isWhite) return "bg-white";
245
+ if (isBlack) return "bg-black";
246
+ if (isNeutral) return "bg-neutral-200";
247
+ return "bg-neutral-100";
248
+ };
249
+ const getShadowStyle = () => {
250
+ if (isBlack) return `
251
+ inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
252
+ inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
253
+ 0 4px 0 0 #0c0c0c,
254
+ 0 12px 24px rgba(0, 0, 0, 0.1)
255
+ `;
256
+ return "none";
257
+ };
258
+ const textColor = isBlack ? "text-white" : "text-black";
259
+ const subTextColor = isBlack ? "text-neutral-300" : "text-neutral-600";
260
+ const labelColor = isBlack ? "text-neutral-400" : "text-neutral-500";
231
261
  return /* @__PURE__ */ React6.createElement(
232
262
  "div",
233
263
  {
234
264
  key: i,
235
- className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-70 transition-all duration-500 group text-left ${isHighlight ? "bg-black hover:-translate-y-1.5 active:translate-y-0.5" : "bg-neutral-100 hover:-translate-y-1"} ${f.size}`,
236
- style: {
237
- boxShadow: isHighlight ? `
238
- inset 0 1.5px 0 0 rgba(255, 255, 255, 0.35),
239
- inset 0 -3px 0 0 rgba(0, 0, 0, 0.6),
240
- 0 4px 0 0 #0c0c0c,
241
- 0 12px 24px rgba(0, 0, 0, 0.15)
242
- ` : "none"
243
- }
265
+ className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-500 group text-left ${getBgStyle()} ${f.size}`,
266
+ style: { boxShadow: getShadowStyle() }
244
267
  },
245
268
  /* @__PURE__ */ React6.createElement(
246
269
  "div",
247
270
  {
248
271
  className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
249
- style: {
250
- 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")`,
251
- backgroundRepeat: "repeat"
252
- }
272
+ 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")` }
253
273
  }
254
274
  ),
255
- isHighlight && /* @__PURE__ */ React6.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" }),
256
- /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ React6.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isHighlight ? "text-white/5" : "text-black/5"}` }, /* @__PURE__ */ React6.createElement(HugeiconsIcon3, { icon: f.icon, size: 180 }))),
257
- /* @__PURE__ */ React6.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ React6.createElement("span", { className: `text-[9px] tracking-widest ${isHighlight ? "text-neutral-400" : "text-neutral-500"}` }, f.label), /* @__PURE__ */ React6.createElement("div", { className: `p-2 rounded-full transition-colors ${isHighlight ? "bg-white/10" : "bg-white"}` }, /* @__PURE__ */ React6.createElement(HugeiconsIcon3, { icon: f.icon, size: 20, className: `transition-colors ${isHighlight ? "text-white" : "text-neutral-600 group-hover:text-black"}` }))), /* @__PURE__ */ React6.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React6.createElement("h3", { className: `text-xl mb-2 tracking-tight ${isHighlight ? "text-white" : "text-black"}` }, f.title), /* @__PURE__ */ React6.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${isHighlight ? "text-neutral-300" : "text-neutral-600"}` }, f.desc)))
275
+ isBlack && /* @__PURE__ */ React6.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" }),
276
+ /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ React6.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__ */ React6.createElement(HugeiconsIcon3, { icon: f.icon, size: 180 }))),
277
+ /* @__PURE__ */ React6.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ React6.createElement("span", { className: `text-[9px] uppercase tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ React6.createElement("div", { className: `p-2 rounded-full transition-colors ${isBlack ? "bg-white/10" : "bg-white/50 backdrop-blur-sm"}` }, /* @__PURE__ */ React6.createElement(HugeiconsIcon3, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ React6.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React6.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ React6.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
258
278
  );
259
279
  })))));
260
280
  };
@@ -503,7 +523,7 @@ var ManagedContactBlock = ({
503
523
 
504
524
  // src/components/ManagedPricingBlock.tsx
505
525
  import React12 from "react";
506
- import Link4 from "next/link";
526
+ import Link5 from "next/link";
507
527
  var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React12.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
508
528
  var CrossIcon = ({ className = "" }) => /* @__PURE__ */ React12.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React12.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "#F5F5F5" }), /* @__PURE__ */ React12.createElement("path", { d: "M15 9L9 15M9 9l6 6", stroke: "#D4D4D4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
509
529
  var ManagedPricingBlock = ({
@@ -519,7 +539,7 @@ var ManagedPricingBlock = ({
519
539
  },
520
540
  /* @__PURE__ */ React12.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React12.createElement("span", { className: "text-black text-base block mb-1" }, plan.name), /* @__PURE__ */ React12.createElement("div", { className: "flex items-baseline gap-1" }, /* @__PURE__ */ React12.createElement("span", { className: "text-3xl text-black" }, plan.price), plan.period && /* @__PURE__ */ React12.createElement("span", { className: "text-xs text-neutral-500" }, plan.period)), /* @__PURE__ */ React12.createElement("p", { className: "text-xs text-neutral-500 mt-2" }, plan.description)),
521
541
  plan.isPremium ? /* @__PURE__ */ React12.createElement(ThreeDButton, { href: plan.ctaHref, className: "mb-6 w-full" }, plan.ctaText) : /* @__PURE__ */ React12.createElement(
522
- Link4,
542
+ Link5,
523
543
  {
524
544
  href: plan.ctaHref,
525
545
  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"
@@ -596,7 +616,7 @@ var ManagedBoardBlock = ({
596
616
 
597
617
  // src/components/ManagedProjectsBlock.tsx
598
618
  import React14 from "react";
599
- import Link5 from "next/link";
619
+ import Link6 from "next/link";
600
620
  var GridSection = ({
601
621
  children,
602
622
  isLast = false,
@@ -619,13 +639,13 @@ var ManagedProjectsBlock = ({
619
639
  ), /* @__PURE__ */ React14.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React14.createElement(GridSection, null, tagline && /* @__PURE__ */ React14.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 text-left block uppercase" }, tagline), /* @__PURE__ */ React14.createElement("h1", { className: "text-4xl md:text-5xl mt-4 text-black tracking-tight text-left" }, title)), projects.map((project, index) => {
620
640
  const isLast = index === projects.length - 1;
621
641
  const projectContent = /* @__PURE__ */ React14.createElement("div", { className: "group block w-full" }, /* @__PURE__ */ React14.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__ */ React14.createElement("div", { className: "flex items-center gap-3 md:gap-4" }, /* @__PURE__ */ React14.createElement("h2", { className: "text-[16px] text-black transition-all flex items-center gap-2" }, project.title, /* @__PURE__ */ React14.createElement("span", { className: "text-[12px] opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300" }, project.isExternal ? "\u2197" : "\u2192")), /* @__PURE__ */ React14.createElement("span", { className: `text-[9px] px-2.5 py-1 rounded-full tracking-[0.15em] uppercase transition-colors ${project.status.toLowerCase() === "production" ? "bg-black text-white" : "bg-neutral-100 text-neutral-500 group-hover:bg-neutral-200 group-hover:text-black"}` }, project.status)), /* @__PURE__ */ React14.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-500 shrink-0 uppercase" }, project.date)), /* @__PURE__ */ React14.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 max-w-4xl text-left transition-colors group-hover:text-black" }, project.description));
622
- return /* @__PURE__ */ React14.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__ */ React14.createElement("a", { href: project.link, target: "_blank", rel: "noopener noreferrer", className: "block outline-none" }, projectContent) : /* @__PURE__ */ React14.createElement(Link5, { href: project.link, className: "block outline-none" }, projectContent));
642
+ return /* @__PURE__ */ React14.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__ */ React14.createElement("a", { href: project.link, target: "_blank", rel: "noopener noreferrer", className: "block outline-none" }, projectContent) : /* @__PURE__ */ React14.createElement(Link6, { href: project.link, className: "block outline-none" }, projectContent));
623
643
  }))));
624
644
  };
625
645
 
626
646
  // src/components/ManagedNotFoundBlock.tsx
627
647
  import React15 from "react";
628
- import Link6 from "next/link";
648
+ import Link7 from "next/link";
629
649
  var ManagedNotFoundBlock = ({
630
650
  title = "404 - Page Not Found",
631
651
  description = "The page you are looking for does not exist or has been moved.",
@@ -641,7 +661,7 @@ var ManagedNotFoundBlock = ({
641
661
  },
642
662
  /* @__PURE__ */ React15.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" })
643
663
  )), /* @__PURE__ */ React15.createElement("h1", { className: "text-xl md:text-3xl text-black tracking-tight mb-4" }, title), /* @__PURE__ */ React15.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-600 mb-12" }, description), /* @__PURE__ */ React15.createElement(
644
- Link6,
664
+ Link7,
645
665
  {
646
666
  href: backLinkHref,
647
667
  className: "text-[11px] tracking-[0.2em] text-neutral-400 hover:text-black transition-colors pb-1 uppercase"
@@ -821,7 +841,7 @@ var NumberInput = ({
821
841
 
822
842
  // src/components/PortfolioHero.tsx
823
843
  import React20, { useEffect as useEffect3, useRef as useRef2 } from "react";
824
- import Link7 from "next/link";
844
+ import Link8 from "next/link";
825
845
  import Image7 from "next/image";
826
846
  import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react";
827
847
  import { ArrowRight01Icon as ArrowRight01Icon2 } from "@hugeicons/core-free-icons";
@@ -863,7 +883,7 @@ var PortfolioHero = ({
863
883
  secondaryCtaHref
864
884
  }) => {
865
885
  const heroContentRef = useScrollAnimation();
866
- return /* @__PURE__ */ React20.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 bg-white" }, /* @__PURE__ */ React20.createElement(
886
+ return /* @__PURE__ */ React20.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__ */ React20.createElement(
867
887
  "div",
868
888
  {
869
889
  ref: heroContentRef,
@@ -899,7 +919,7 @@ var PortfolioHero = ({
899
919
  },
900
920
  primaryCtaText
901
921
  )), secondaryCtaText && secondaryCtaHref && /* @__PURE__ */ React20.createElement(
902
- Link7,
922
+ Link8,
903
923
  {
904
924
  href: secondaryCtaHref,
905
925
  className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em] uppercase rounded-full px-8 py-3.5 bg-neutral-100 transition-colors text-black hover:bg-neutral-200 outline-none"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",