@saasflare/ui 3.2.0 → 3.3.0

package/dist/index.js

@@ -342,6 +342,30 @@ function useFocusTrap(active) {
   }, [active]);
   return setRef;
 }
+function useCountdown(target) {
+  const targetMs = new Date(target).getTime();
+  const calculate = () => {
+    const diff = Math.max(0, targetMs - Date.now());
+    return {
+      days: Math.floor(diff / (1e3 * 60 * 60 * 24)),
+      hours: Math.floor(diff / (1e3 * 60 * 60) % 24),
+      minutes: Math.floor(diff / (1e3 * 60) % 60),
+      seconds: Math.floor(diff / 1e3 % 60),
+      totalMs: diff,
+      isExpired: diff <= 0
+    };
+  };
+  const [value, setValue] = React5.useState(calculate);
+  React5.useEffect(() => {
+    const timer = setInterval(() => {
+      const next = calculate();
+      setValue(next);
+      if (next.isExpired) clearInterval(timer);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [targetMs]);
+  return value;
+}
 function useFileDialog(options = {}) {
   const { accept, multiple = false, directory = false, capture, onChange } = options;
   const [files, setFiles] = React5.useState([]);
@@ -3298,10 +3322,10 @@ var Observer = class {
         });
       }
     };
-    this.custom = (jsx84, data) => {
+    this.custom = (jsx120, data) => {
       const id = (data == null ? void 0 : data.id) || toastsCounter++;
       this.create({
-        jsx: jsx84(id),
+        jsx: jsx120(id),
         id,
         ...data
       });
@@ -8378,6 +8402,2113 @@ function AuroraBackground({
     }
   );
 }
+function formatTime(s) {
+  if (!isFinite(s) || s < 0) return "0:00";
+  const m37 = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m37}:${String(sec).padStart(2, "0")}`;
+}
+function AudioPlayer({
+  src,
+  title,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
+  const audioRef = React5.useRef(null);
+  const [playing, setPlaying] = React5.useState(false);
+  const [current, setCurrent] = React5.useState(0);
+  const [duration, setDuration] = React5.useState(0);
+  const toggle = React5.useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (playing) {
+      audio.pause();
+    } else {
+      audio.play();
+    }
+    setPlaying(!playing);
+  }, [playing]);
+  React5.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const onTime = () => setCurrent(audio.currentTime);
+    const onMeta = () => setDuration(audio.duration);
+    const onEnded = () => setPlaying(false);
+    audio.addEventListener("timeupdate", onTime);
+    audio.addEventListener("loadedmetadata", onMeta);
+    audio.addEventListener("ended", onEnded);
+    return () => {
+      audio.removeEventListener("timeupdate", onTime);
+      audio.removeEventListener("loadedmetadata", onMeta);
+      audio.removeEventListener("ended", onEnded);
+    };
+  }, []);
+  const seek = React5.useCallback((e) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.currentTime = Number(e.target.value);
+  }, []);
+  const progress = duration > 0 ? current / duration * 100 : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "audio-player",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: chunk2GOPD64T_js.cn(
+        "flex items-center gap-3 rounded-xl border surface-card px-4 py-3",
+        "transition-all duration-200 hover:shadow-md",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90",
+            "aria-label": playing ? "Pause" : "Play",
+            children: playing ? /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.PauseIcon, { weight: sf.iconWeight, className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.PlayIcon, { weight: sf.iconWeight, className: "ml-0.5 size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium truncate", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: formatTime(current) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "h-1 rounded-full bg-primary transition-[width]",
+                  style: { width: `${progress}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 0,
+                  max: duration || 0,
+                  value: current,
+                  onChange: seek,
+                  className: "absolute inset-0 h-1 w-full cursor-pointer opacity-0",
+                  "aria-label": "Seek"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: formatTime(duration) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var COL_MAP = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+function BentoGrid({
+  children,
+  columns = 3,
+  gap = 4,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn(
+        "grid grid-cols-1",
+        COL_MAP[columns],
+        className
+      ),
+      style: { gap: `${gap * 0.25}rem` },
+      "data-slot": "bento-grid",
+      children
+    }
+  );
+}
+var COL_SPAN_MAP = {
+  1: "",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4"
+};
+var ROW_SPAN_MAP = {
+  1: "",
+  2: "md:row-span-2",
+  3: "md:row-span-3"
+};
+function BentoGridItem({
+  children,
+  colSpan = 1,
+  rowSpan = 1,
+  index = 0,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.div,
+    {
+      initial: reduced ? false : { opacity: 0, y: 16 },
+      whileInView: reduced ? void 0 : { opacity: 1, y: 0 },
+      viewport: { once: true, margin: "-60px" },
+      transition: reduced ? chunkITALEYDI_js.noMotion : { ...chunkITALEYDI_js.springGentle, delay: index * 0.08 },
+      "data-slot": "bento-grid-item",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: chunk2GOPD64T_js.cn(
+        "rounded-xl border surface-card p-6 text-card-foreground",
+        "transition-all duration-200 hover:-translate-y-px hover:shadow-md",
+        "motion-reduce:hover:transform-none",
+        COL_SPAN_MAP[colSpan],
+        ROW_SPAN_MAP[rowSpan],
+        className
+      ),
+      children
+    }
+  );
+}
+function BlurFade({
+  children,
+  delay = 0,
+  blur = 8,
+  yOffset = 12,
+  duration = 0.5,
+  once = true,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const ref = React5.useRef(null);
+  const isInView = react.useInView(ref, { once, margin: "-50px" });
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.div,
+    {
+      ref,
+      initial: { opacity: 0, y: yOffset, filter: `blur(${blur}px)` },
+      animate: isInView ? { opacity: 1, y: 0, filter: "blur(0px)" } : { opacity: 0, y: yOffset, filter: `blur(${blur}px)` },
+      transition: { duration, delay, ease: "easeOut" },
+      className: chunk2GOPD64T_js.cn("will-change-[opacity,transform,filter]", className),
+      "data-slot": "blur-fade",
+      children
+    }
+  );
+}
+function BorderBeam({
+  color = "hsl(var(--primary))",
+  colorFrom = "transparent",
+  duration = 6,
+  size = 150,
+  borderRadius = "inherit",
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  if (reduced) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes sf-border-beam {
+          0% { offset-distance: 0%; }
+          100% { offset-distance: 100%; }
+        }
+      ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunk2GOPD64T_js.cn("pointer-events-none absolute inset-0", className),
+        style: { borderRadius },
+        "aria-hidden": "true",
+        "data-slot": "border-beam",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              borderRadius,
+              /* The beam travels along the rect path */
+              offsetPath: `rect(0 auto auto 0 round ${borderRadius})`,
+              animation: `sf-border-beam ${duration}s linear infinite`,
+              background: `linear-gradient(to left, ${color}, ${colorFrom})`,
+              width: size,
+              height: size,
+              opacity: 0.7,
+              filter: "blur(4px)"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function Compare({
+  before,
+  after,
+  beforeLabel,
+  afterLabel,
+  initialPosition = 50,
+  aspectRatio = "16/9",
+  className
+}) {
+  const [position, setPosition] = React5.useState(initialPosition);
+  const containerRef = React5.useRef(null);
+  const dragging = React5.useRef(false);
+  const updatePosition = React5.useCallback((clientX) => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+    setPosition(x / rect.width * 100);
+  }, []);
+  const onPointerDown = React5.useCallback(
+    (e) => {
+      dragging.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const onPointerMove = React5.useCallback(
+    (e) => {
+      if (!dragging.current) return;
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const onPointerUp = React5.useCallback(() => {
+    dragging.current = false;
+  }, []);
+  const onKeyDown = React5.useCallback((e) => {
+    if (e.key === "ArrowLeft") setPosition((p) => Math.max(0, p - 2));
+    else if (e.key === "ArrowRight") setPosition((p) => Math.min(100, p + 2));
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: chunk2GOPD64T_js.cn(
+        "relative select-none overflow-hidden rounded-xl border shadow-sm",
+        className
+      ),
+      style: { aspectRatio },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      "data-slot": "compare",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: after }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0 overflow-hidden",
+            style: { width: `${position}%` },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-full",
+                style: { width: containerRef.current?.offsetWidth ?? "100%" },
+                children: before
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-y-0 z-10 flex w-1 cursor-col-resize items-center bg-white shadow-lg",
+            style: { left: `${position}%`, transform: "translateX(-50%)" },
+            role: "slider",
+            "aria-label": "Comparison slider",
+            "aria-valuenow": Math.round(position),
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            tabIndex: 0,
+            onKeyDown,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-white shadow-md", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 1L1 7L4 13M10 1L13 7L10 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          }
+        ),
+        beforeLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-3 top-3 rounded-md bg-black/50 px-2 py-1 text-xs font-medium text-white backdrop-blur-sm", children: beforeLabel }),
+        afterLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-3 top-3 rounded-md bg-black/50 px-2 py-1 text-xs font-medium text-white backdrop-blur-sm", children: afterLabel })
+      ]
+    }
+  );
+}
+function seeded(seed) {
+  const x = Math.sin(seed * 9301 + 49297) * 233280;
+  return x - Math.floor(x);
+}
+function Confetti({
+  active,
+  count = 40,
+  colors = [
+    "hsl(var(--primary))",
+    "hsl(var(--chart-1))",
+    "hsl(var(--chart-2))",
+    "hsl(var(--chart-3))",
+    "hsl(var(--chart-4))"
+  ],
+  duration = 3e3,
+  onComplete,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const [visible, setVisible] = React5.useState(false);
+  React5.useEffect(() => {
+    if (!active || reduced) return;
+    setVisible(true);
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onComplete?.();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [active, reduced, duration, onComplete]);
+  const particles = React5.useMemo(
+    () => Array.from({ length: count }, (_, i) => {
+      const r = (s) => seeded(i * 100 + s);
+      return {
+        id: i,
+        color: colors[i % colors.length],
+        x: 50 + (r(1) - 0.5) * 60,
+        endX: (r(2) - 0.5) * 200,
+        endY: -(100 + r(3) * 300),
+        size: 4 + r(4) * 6,
+        rotation: r(5) * 720,
+        delay: r(6) * 0.3,
+        animDuration: 1.5 + r(7) * 1.5
+      };
+    }),
+    [count, colors]
+  );
+  if (!visible || reduced) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn("pointer-events-none fixed inset-0 z-[9999] overflow-hidden", className),
+      "aria-hidden": "true",
+      "data-slot": "confetti",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes sf-confetti-burst {
+          0% {
+            transform: translate(0, 0) rotate(0deg);
+            opacity: 1;
+          }
+          100% {
+            transform: translate(var(--cx), var(--cy)) rotate(var(--cr));
+            opacity: 0;
+          }
+        }
+      ` }),
+        particles.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${p.x}%`,
+              bottom: 0,
+              width: p.size,
+              height: p.size * 0.6,
+              backgroundColor: p.color,
+              borderRadius: p.id % 3 === 0 ? "50%" : "1px",
+              ["--cx"]: `${p.endX}px`,
+              ["--cy"]: `${p.endY}px`,
+              ["--cr"]: `${p.rotation}deg`,
+              animation: `sf-confetti-burst ${p.animDuration}s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${p.delay}s forwards`
+            }
+          },
+          p.id
+        ))
+      ]
+    }
+  );
+}
+function pad(n) {
+  return String(Math.max(0, Math.floor(n))).padStart(2, "0");
+}
+function Countdown({
+  days,
+  hours,
+  minutes,
+  seconds,
+  showLabels = true,
+  className
+}) {
+  const units = [
+    { value: days, label: "Days" },
+    { value: hours, label: "Hours" },
+    { value: minutes, label: "Minutes" },
+    { value: seconds, label: "Seconds" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn("flex items-center gap-2 md:gap-3", className),
+      "data-slot": "countdown",
+      role: "timer",
+      "aria-label": `${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`,
+      children: units.map((unit, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 md:gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-14 items-center justify-center rounded-lg border bg-card text-2xl font-bold tabular-nums shadow-sm md:size-16 md:text-3xl", children: pad(unit.value) }),
+          showLabels && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1.5 text-[10px] uppercase tracking-wider text-muted-foreground", children: unit.label })
+        ] }),
+        i < units.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-5 text-xl font-bold text-muted-foreground", "aria-hidden": "true", children: ":" })
+      ] }, unit.label))
+    }
+  );
+}
+function SafariMock({
+  children,
+  url = "https://example.com",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn("overflow-hidden rounded-xl border bg-background shadow-xl", className),
+      "data-slot": "safari-mock",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b bg-muted/50 px-4 py-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-[#ff5f57]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-[#febc2e]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-3 rounded-full bg-[#28c840]" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-md flex-1 items-center justify-center rounded-md bg-background/80 px-3 py-1 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "mr-1.5 size-3 text-muted-foreground/50",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: url })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children })
+      ]
+    }
+  );
+}
+function IPhoneMock({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn(
+        "relative mx-auto w-[280px] rounded-[2.5rem] border-[6px] border-foreground/10 bg-background p-1.5 shadow-xl",
+        className
+      ),
+      "data-slot": "iphone-mock",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 top-2 z-10 h-5 w-24 -translate-x-1/2 rounded-full bg-foreground/10" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[2rem] bg-background", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-2 text-[10px] font-semibold text-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "9:41" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-0.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-0.5 rounded-sm bg-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 w-0.5 rounded-sm bg-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-0.5 rounded-sm bg-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3.5 w-0.5 rounded-sm bg-foreground" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: "100%" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mt-1.5 h-1 w-28 rounded-full bg-foreground/20" })
+      ]
+    }
+  );
+}
+var DockContext = React5.createContext(null);
+function useDock() {
+  const ctx = React5.useContext(DockContext);
+  if (!ctx) throw new Error("DockItem must be used within a Dock");
+  return ctx;
+}
+function Dock({
+  children,
+  magnification = 1.5,
+  distance = 100,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const mouseX = react.useMotionValue(Infinity);
+  return /* @__PURE__ */ jsxRuntime.jsx(DockContext.Provider, { value: { mouseX, magnification, distance, reduced }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.nav,
+    {
+      onMouseMove: (e) => mouseX.set(e.pageX),
+      onMouseLeave: () => mouseX.set(Infinity),
+      "data-slot": "dock",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: chunk2GOPD64T_js.cn(
+        "mx-auto flex h-14 items-end gap-2 rounded-2xl border surface-card px-3 pb-2",
+        className
+      ),
+      role: "toolbar",
+      "aria-label": "Dock",
+      children
+    }
+  ) });
+}
+var BASE_SIZE = 40;
+function DockItem({
+  children,
+  label,
+  onClick,
+  className
+}) {
+  const { mouseX, magnification, distance, reduced } = useDock();
+  const ref = React5.useRef(null);
+  const distanceFromMouse = react.useTransform(mouseX, (val) => {
+    const bounds = ref.current?.getBoundingClientRect();
+    if (!bounds) return distance + 1;
+    return val - (bounds.x + bounds.width / 2);
+  });
+  const maxSize = BASE_SIZE * magnification;
+  const sizeTransform = react.useTransform(
+    distanceFromMouse,
+    [-distance, 0, distance],
+    [BASE_SIZE, maxSize, BASE_SIZE]
+  );
+  const size = react.useSpring(sizeTransform, { stiffness: 300, damping: 25 });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.m.button,
+    {
+      ref,
+      onClick,
+      style: reduced ? { width: BASE_SIZE, height: BASE_SIZE } : { width: size, height: size },
+      className: chunk2GOPD64T_js.cn(
+        "relative flex items-center justify-center rounded-xl bg-muted transition-colors hover:bg-muted/80",
+        "group",
+        className
+      ),
+      "aria-label": label,
+      "data-slot": "dock-item",
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground shadow-md opacity-0 transition-opacity group-hover:opacity-100",
+            role: "tooltip",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+function FeatureCard({
+  icon,
+  title,
+  description,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "feature-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: chunk2GOPD64T_js.cn(
+        "rounded-xl border surface-card p-6",
+        "transition-all duration-200 hover:-translate-y-px hover:shadow-md",
+        "motion-reduce:hover:transform-none",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary [&_svg]:size-5", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-sm leading-relaxed text-muted-foreground", children: description })
+      ]
+    }
+  );
+}
+function FlipWords({
+  words,
+  interval = 2500,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const [index, setIndex] = React5.useState(0);
+  const next = React5.useCallback(() => {
+    setIndex((prev) => (prev + 1) % words.length);
+  }, [words.length]);
+  React5.useEffect(() => {
+    if (reduced || words.length <= 1) return;
+    const timer = setInterval(next, interval);
+    return () => clearInterval(timer);
+  }, [reduced, words.length, interval, next]);
+  const longestWord = React5.useMemo(
+    () => words.reduce((a, b) => a.length >= b.length ? a : b, ""),
+    [words]
+  );
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: words[0] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: chunk2GOPD64T_js.cn("relative inline-block text-left align-baseline", className),
+      "data-slot": "flip-words",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "invisible", "aria-hidden": "true", children: longestWord }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+          react.m.span,
+          {
+            initial: { y: "100%", opacity: 0 },
+            animate: { y: 0, opacity: 1 },
+            exit: { y: "-100%", opacity: 0 },
+            transition: chunkITALEYDI_js.springBouncy,
+            className: "absolute inset-0",
+            "aria-live": "polite",
+            children: words[index]
+          },
+          words[index]
+        ) })
+      ]
+    }
+  );
+}
+function GalleryLightbox({
+  images,
+  open,
+  index,
+  onClose,
+  onIndexChange,
+  className
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps();
+  const prev = React5.useCallback(() => {
+    onIndexChange((index - 1 + images.length) % images.length);
+  }, [index, images.length, onIndexChange]);
+  const next = React5.useCallback(() => {
+    onIndexChange((index + 1) % images.length);
+  }, [index, images.length, onIndexChange]);
+  React5.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose, prev, next]);
+  React5.useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsxs(
+    react.m.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      className: chunk2GOPD64T_js.cn(
+        "fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm",
+        className
+      ),
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Image gallery",
+      "data-slot": "gallery-lightbox",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "absolute right-4 top-4 z-10 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20",
+            "aria-label": "Close gallery",
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.XIcon, { weight: sf.iconWeight, className: "size-6" })
+          }
+        ),
+        images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              prev();
+            },
+            className: "absolute left-4 z-10 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20",
+            "aria-label": "Previous image",
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.CaretLeftIcon, { weight: sf.iconWeight, className: "size-6" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.m.img,
+          {
+            src: images[index],
+            alt: `Image ${index + 1} of ${images.length}`,
+            initial: { opacity: 0, scale: 0.95 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.95 },
+            transition: { duration: 0.2 },
+            className: "max-h-[85vh] max-w-[90vw] rounded-lg object-contain",
+            onClick: (e) => e.stopPropagation()
+          },
+          index
+        ),
+        images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              next();
+            },
+            className: "absolute right-4 z-10 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20",
+            "aria-label": "Next image",
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.CaretRightIcon, { weight: sf.iconWeight, className: "size-6" })
+          }
+        ),
+        images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-sm text-white backdrop-blur-sm", children: [
+          index + 1,
+          " / ",
+          images.length
+        ] })
+      ]
+    }
+  ) });
+}
+function useMousePosition(options = {}) {
+  const { ref, enabled = true, useRAF = true } = options;
+  const [position, setPosition] = React5.useState({ x: 0, y: 0 });
+  const rafRef = React5.useRef(void 0);
+  const updatePosition = React5.useCallback(
+    (clientX, clientY) => {
+      const perform = () => {
+        if (ref?.current) {
+          const rect = ref.current.getBoundingClientRect();
+          setPosition({ x: clientX - rect.left, y: clientY - rect.top });
+        } else {
+          setPosition({ x: clientX, y: clientY });
+        }
+      };
+      if (useRAF) {
+        if (rafRef.current) cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(perform);
+      } else {
+        perform();
+      }
+    },
+    [ref, useRAF]
+  );
+  React5.useEffect(() => {
+    if (!enabled) return;
+    const target = ref?.current ?? window;
+    const handler = (event) => {
+      const e = event;
+      updatePosition(e.clientX, e.clientY);
+    };
+    target.addEventListener("mousemove", handler, { passive: true });
+    return () => {
+      target.removeEventListener("mousemove", handler);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [ref, enabled, updatePosition]);
+  return position;
+}
+function GlowingEffect({
+  color = "hsl(var(--primary))",
+  spread = 150,
+  blur = 20,
+  opacity = 0.4,
+  borderRadius = "inherit",
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const ref = React5.useRef(null);
+  const pos = useMousePosition({ ref, enabled: !reduced });
+  const [hovered, setHovered] = React5.useState(false);
+  if (reduced) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: chunk2GOPD64T_js.cn("pointer-events-none absolute inset-0", className),
+      style: { borderRadius },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      "aria-hidden": "true",
+      "data-slot": "glowing-effect",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-0 transition-opacity duration-300",
+          style: {
+            opacity: hovered ? opacity : 0,
+            background: `radial-gradient(${spread}px circle at ${pos.x}px ${pos.y}px, ${color}, transparent 70%)`,
+            filter: `blur(${blur}px)`,
+            borderRadius,
+            /* Mask to show glow only on borders, not fill */
+            maskImage: `
+            linear-gradient(black, black),
+            linear-gradient(black, black)
+          `,
+            maskComposite: "exclude",
+            WebkitMaskComposite: "xor",
+            maskClip: "border-box, content-box",
+            WebkitMaskClip: "border-box, content-box",
+            padding: "2px"
+          }
+        }
+      )
+    }
+  );
+}
+function GradientText({
+  children,
+  colors = [
+    "hsl(var(--primary))",
+    "hsl(var(--chart-1))",
+    "hsl(var(--chart-2))"
+  ],
+  animate = true,
+  speed = 6,
+  angle = 90,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const shouldAnimate = animate && !reduced;
+  const gradient = `linear-gradient(${angle}deg, ${colors.join(", ")}, ${colors[0]})`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    shouldAnimate && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes sf-gradient-shift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: chunk2GOPD64T_js.cn(
+          "bg-clip-text text-transparent",
+          className
+        ),
+        style: {
+          backgroundImage: gradient,
+          backgroundSize: shouldAnimate ? "200% 200%" : "100% 100%",
+          ...shouldAnimate && {
+            animation: `sf-gradient-shift ${speed}s ease infinite`
+          }
+        },
+        "data-slot": "gradient-text",
+        children
+      }
+    )
+  ] });
+}
+function HeroVideoDialog({
+  videoSrc,
+  thumbnailSrc,
+  thumbnailAlt,
+  aspectRatio = "16/9",
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const sf = chunk2GOPD64T_js.useSaasflareProps();
+  const [open, setOpen] = React5.useState(false);
+  const close = React5.useCallback(() => setOpen(false), []);
+  const onKeyDown = React5.useCallback(
+    (e) => {
+      if (e.key === "Escape") close();
+    },
+    [close]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className: chunk2GOPD64T_js.cn(
+          "group relative w-full cursor-pointer overflow-hidden rounded-xl border shadow-lg",
+          className
+        ),
+        style: { aspectRatio },
+        "aria-label": `Play video: ${thumbnailAlt}`,
+        "data-slot": "hero-video-dialog",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: thumbnailSrc,
+              alt: thumbnailAlt,
+              className: "size-full object-cover transition-transform duration-300 group-hover:scale-105"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-white/90 shadow-xl backdrop-blur-sm transition-transform group-hover:scale-110", children: /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.PlayIcon, { weight: sf.iconWeight, className: "ml-1 size-7 text-foreground" }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsxs(
+      react.m.div,
+      {
+        initial: reduced ? { opacity: 1 } : { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: reduced ? { opacity: 0 } : { opacity: 0 },
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm",
+        onClick: close,
+        onKeyDown,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Video player",
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              className: "absolute right-4 top-4 z-10 rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/20",
+              "aria-label": "Close video",
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunkR3AVBLJ3_js.XIcon, { weight: sf.iconWeight, className: "size-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.m.div,
+            {
+              initial: reduced ? false : { scale: 0.9, opacity: 0 },
+              animate: { scale: 1, opacity: 1 },
+              exit: reduced ? { opacity: 0 } : { scale: 0.9, opacity: 0 },
+              transition: reduced ? chunkITALEYDI_js.noMotion : chunkITALEYDI_js.springBouncy,
+              className: "w-full max-w-5xl px-4",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-xl", style: { aspectRatio }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "iframe",
+                {
+                  src: videoSrc,
+                  className: "size-full",
+                  allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                  allowFullScreen: true,
+                  title: thumbnailAlt
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+function Hotspot({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk2GOPD64T_js.cn("relative", className), "data-slot": "hotspot", children });
+}
+function HotspotMarker({
+  x,
+  y,
+  label,
+  description,
+  color = "hsl(var(--primary))",
+  className
+}) {
+  const [hovered, setHovered] = React5.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn("absolute z-10", className),
+      style: { left: `${x}%`, top: `${y}%`, transform: "translate(-50%, -50%)" },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      "data-slot": "hotspot-marker",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute inset-0 animate-ping rounded-full opacity-30",
+            style: { backgroundColor: color, width: 24, height: 24, margin: -4 },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "relative size-4 rounded-full border-2 border-background shadow-md",
+            style: { backgroundColor: color },
+            "aria-label": label
+          }
+        ),
+        hovered && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-lg bg-popover px-3 py-2 text-sm shadow-lg", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-popover-foreground", children: label }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+        ] })
+      ]
+    }
+  );
+}
+function ImageSwapHover({
+  src,
+  hoverSrc,
+  alt,
+  aspectRatio = "1/1",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn("group relative overflow-hidden rounded-xl", className),
+      style: { aspectRatio },
+      "data-slot": "image-swap-hover",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt,
+            className: "absolute inset-0 size-full object-cover transition-opacity duration-300 group-hover:opacity-0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: hoverSrc,
+            alt,
+            className: "absolute inset-0 size-full object-cover opacity-0 transition-opacity duration-300 group-hover:opacity-100",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function Marquee({
+  children,
+  reverse = false,
+  speed = 40,
+  pauseOnHover = true,
+  gap = 48,
+  repeat = 2,
+  vertical = false,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunk2GOPD64T_js.cn(
+          "flex items-center overflow-hidden",
+          vertical ? "flex-col" : "flex-row",
+          className
+        ),
+        style: { gap },
+        "data-slot": "marquee",
+        children
+      }
+    );
+  }
+  const animationName = vertical ? "marquee-vertical" : "marquee-horizontal";
+  const direction = reverse ? "reverse" : "normal";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn(
+        "group relative flex overflow-hidden",
+        vertical ? "flex-col" : "flex-row",
+        className
+      ),
+      "data-slot": "marquee",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes marquee-horizontal {
+          from { transform: translateX(0); }
+          to { transform: translateX(-100%); }
+        }
+        @keyframes marquee-vertical {
+          from { transform: translateY(0); }
+          to { transform: translateY(-100%); }
+        }
+      ` }),
+        Array.from({ length: repeat }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: chunk2GOPD64T_js.cn(
+              "flex shrink-0 items-center",
+              vertical ? "flex-col" : "flex-row",
+              pauseOnHover && "group-hover:[animation-play-state:paused]"
+            ),
+            style: {
+              gap,
+              animation: `${animationName} ${speed}s linear infinite`,
+              animationDirection: direction
+            },
+            "aria-hidden": i > 0,
+            children
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+function MouseGradientBlob({
+  size = 500,
+  colors = ["hsl(var(--primary))", "hsl(var(--chart-2))"],
+  opacity = 0.15,
+  blur = 80,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const mouseX = react.useMotionValue(0);
+  const mouseY = react.useMotionValue(0);
+  const blobX = react.useSpring(mouseX, { stiffness: 150, damping: 20 });
+  const blobY = react.useSpring(mouseY, { stiffness: 150, damping: 20 });
+  const onMouseMove = React5.useCallback(
+    (e) => {
+      const target = e.currentTarget;
+      const rect = target.getBoundingClientRect();
+      mouseX.set(e.clientX - rect.left - size / 2);
+      mouseY.set(e.clientY - rect.top - size / 2);
+    },
+    [mouseX, mouseY, size]
+  );
+  React5.useEffect(() => {
+    const parent = document.querySelector("[data-blob-container]");
+    if (!parent || reduced) return;
+    parent.addEventListener("mousemove", onMouseMove, { passive: true });
+    return () => parent.removeEventListener("mousemove", onMouseMove);
+  }, [onMouseMove, reduced]);
+  if (reduced) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-blob-container": true,
+      className: chunk2GOPD64T_js.cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        react.m.div,
+        {
+          style: {
+            x: blobX,
+            y: blobY,
+            width: size,
+            height: size,
+            background: `radial-gradient(circle, ${colors[0]} 0%, ${colors[1]} 50%, transparent 70%)`,
+            opacity,
+            filter: `blur(${blur}px)`,
+            borderRadius: "50%",
+            position: "absolute",
+            top: 0,
+            left: 0
+          }
+        }
+      )
+    }
+  );
+}
+function MovingBorder({
+  children,
+  colors = ["hsl(var(--primary))", "hsl(var(--chart-1))", "hsl(var(--chart-2))"],
+  duration = 6,
+  borderWidth = 1.5,
+  borderRadius = "0.75rem",
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const gradientStops = [...colors, colors[0]].join(", ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !reduced && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes sf-border-rotate {
+            from { --sf-border-angle: 0deg; }
+            to { --sf-border-angle: 360deg; }
+          }
+          @property --sf-border-angle {
+            syntax: "<angle>";
+            initial-value: 0deg;
+            inherits: false;
+          }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: chunk2GOPD64T_js.cn("relative", className),
+        style: {
+          padding: borderWidth,
+          borderRadius,
+          background: reduced ? `linear-gradient(135deg, ${gradientStops})` : `conic-gradient(from var(--sf-border-angle, 0deg), ${gradientStops})`,
+          ...reduced ? {} : { animation: `sf-border-rotate ${duration}s linear infinite` }
+        },
+        "data-slot": "moving-border",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative bg-background",
+            style: { borderRadius: `calc(${borderRadius} - ${borderWidth}px)` },
+            children
+          }
+        )
+      }
+    )
+  ] });
+}
+var VARIANTS = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  slideUp: {
+    initial: { opacity: 0, y: 16 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -16 }
+  },
+  slideDown: {
+    initial: { opacity: 0, y: -16 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 16 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.96 }
+  }
+};
+function PageTransition({
+  children,
+  variant = "fade",
+  duration = 0.3,
+  transitionKey,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  }
+  const preset = VARIANTS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.div,
+    {
+      initial: preset.initial,
+      animate: preset.animate,
+      exit: preset.exit,
+      transition: { duration, ease: "easeInOut" },
+      className: chunk2GOPD64T_js.cn("will-change-[opacity,transform]", className),
+      children
+    },
+    transitionKey
+  ) });
+}
+function ParallaxSection({
+  children,
+  speed = 0.5,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const ref = React5.useRef(null);
+  const { scrollYProgress } = react.useScroll({
+    target: ref,
+    offset: ["start end", "end start"]
+  });
+  const offset = (1 - speed) * 100;
+  const y = react.useTransform(scrollYProgress, [0, 1], [`-${offset}px`, `${offset}px`]);
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: chunk2GOPD64T_js.cn("relative overflow-hidden", className), "data-slot": "parallax-section", children: /* @__PURE__ */ jsxRuntime.jsx(react.m.div, { style: { y }, children }) });
+}
+function seededRandom(seed) {
+  const x = Math.sin(seed * 9301 + 49297) * 233280;
+  return x - Math.floor(x);
+}
+function ParticlesBackground({
+  count = 20,
+  color = "hsl(var(--primary))",
+  maxSize = 4,
+  minSize = 1,
+  maxOpacity = 0.3,
+  speed = 1,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const particles = React5.useMemo(
+    () => Array.from({ length: count }, (_, i) => {
+      const r = (seed) => seededRandom(i * 100 + seed);
+      const size = minSize + r(1) * (maxSize - minSize);
+      const duration = (15 + r(2) * 25) / speed;
+      const delay = r(3) * -duration;
+      return {
+        id: i,
+        size,
+        x: r(4) * 100,
+        y: r(5) * 100,
+        opacity: 0.05 + r(6) * maxOpacity,
+        duration,
+        delay,
+        driftX: (r(7) - 0.5) * 40,
+        driftY: -20 - r(8) * 40
+      };
+    }),
+    [count, minSize, maxSize, maxOpacity, speed]
+  );
+  if (reduced) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      "aria-hidden": "true",
+      "data-slot": "particles-background",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes sf-particle-drift {
+          0%, 100% { transform: translate(0, 0); }
+          50% { transform: translate(var(--drift-x), var(--drift-y)); }
+        }
+      ` }),
+        particles.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${p.x}%`,
+              top: `${p.y}%`,
+              width: p.size,
+              height: p.size,
+              backgroundColor: color,
+              borderRadius: "50%",
+              opacity: p.opacity,
+              ["--drift-x"]: `${p.driftX}px`,
+              ["--drift-y"]: `${p.driftY}px`,
+              animation: `sf-particle-drift ${p.duration}s ease-in-out ${p.delay}s infinite`
+            }
+          },
+          p.id
+        ))
+      ]
+    }
+  );
+}
+function RetroGrid({
+  gridColor = "hsl(var(--border))",
+  gridSize = 60,
+  angle = 65,
+  opacity = 0.4,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      "aria-hidden": "true",
+      "data-slot": "retro-grid",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            backgroundImage: `
+            linear-gradient(to right, ${gridColor} 1px, transparent 1px),
+            linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)
+          `,
+            backgroundSize: `${gridSize}px ${gridSize}px`,
+            opacity,
+            transform: `perspective(500px) rotateX(${angle}deg)`,
+            transformOrigin: "bottom center",
+            maskImage: "linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)",
+            WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)"
+          }
+        }
+      )
+    }
+  );
+}
+var DIRECTION_OFFSET = {
+  up: { x: 0, y: 24 },
+  down: { x: 0, y: -24 },
+  left: { x: -24, y: 0 },
+  right: { x: 24, y: 0 },
+  none: { x: 0, y: 0 }
+};
+function RevealOnScroll({
+  children,
+  direction = "up",
+  delay = 0,
+  rootMargin = "-80px",
+  once = true,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const ref = React5.useRef(null);
+  const isInView = react.useInView(ref, { once, margin: rootMargin });
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children });
+  }
+  const offset = DIRECTION_OFFSET[direction];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.div,
+    {
+      ref,
+      initial: { opacity: 0, x: offset.x, y: offset.y },
+      animate: isInView ? { opacity: 1, x: 0, y: 0 } : { opacity: 0, x: offset.x, y: offset.y },
+      transition: { ...chunkITALEYDI_js.springGentle, delay },
+      className: chunk2GOPD64T_js.cn("will-change-[opacity,transform]", className),
+      "data-slot": "reveal-on-scroll",
+      children
+    }
+  );
+}
+function ShimmerButton({
+  children,
+  shimmerColor = "rgba(255,255,255,0.2)",
+  speed = 2.5,
+  background = "hsl(var(--primary))",
+  className,
+  ...props
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !reduced && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes sf-shimmer-slide {
+            from { transform: translateX(-100%) rotate(-15deg); }
+            to { transform: translateX(200%) rotate(-15deg); }
+          }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        className: chunk2GOPD64T_js.cn(
+          "relative inline-flex h-10 items-center justify-center overflow-hidden rounded-md px-6 text-sm font-medium text-primary-foreground shadow-sm transition-all hover:brightness-110",
+          className
+        ),
+        style: { background },
+        "data-slot": "shimmer-button",
+        ...props,
+        children: [
+          !reduced && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-0",
+              style: {
+                background: `linear-gradient(
+                -15deg,
+                transparent 30%,
+                ${shimmerColor} 50%,
+                transparent 70%
+              )`,
+                backgroundSize: "200% 100%",
+                animation: `sf-shimmer-slide ${speed}s ease-in-out infinite`
+              },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children })
+        ]
+      }
+    )
+  ] });
+}
+var PROVIDERS = {
+  google: {
+    label: "Google",
+    bg: "bg-white hover:bg-gray-50 border",
+    fg: "text-gray-700",
+    icon: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+  },
+  apple: {
+    label: "Apple",
+    bg: "bg-black hover:bg-gray-900",
+    fg: "text-white",
+    icon: "M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"
+  },
+  github: {
+    label: "GitHub",
+    bg: "bg-[#24292f] hover:bg-[#1b1f23]",
+    fg: "text-white",
+    icon: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+  },
+  microsoft: {
+    label: "Microsoft",
+    bg: "bg-white hover:bg-gray-50 border",
+    fg: "text-gray-700",
+    icon: "M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"
+  },
+  twitter: {
+    label: "X (Twitter)",
+    bg: "bg-black hover:bg-gray-900",
+    fg: "text-white",
+    icon: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+  }
+};
+function SocialButton({
+  provider,
+  label: labelOverride,
+  iconOnly = false,
+  className,
+  ...props
+}) {
+  const config = PROVIDERS[provider];
+  const displayLabel = labelOverride ?? `Continue with ${config.label}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: chunk2GOPD64T_js.cn(
+        "inline-flex items-center justify-center gap-3 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors",
+        config.bg,
+        config.fg,
+        iconOnly && "px-2.5",
+        className
+      ),
+      "aria-label": displayLabel,
+      "data-slot": "social-button",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-5", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: config.icon }) }),
+        !iconOnly && /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayLabel })
+      ]
+    }
+  );
+}
+function SpotlightCard({
+  children,
+  spotlightColor = "hsl(var(--primary))",
+  spotlightSize = 250,
+  spotlightOpacity = 0.08,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const cardRef = React5.useRef(null);
+  const position = useMousePosition({ ref: cardRef, enabled: !reduced });
+  const [isHovered, setIsHovered] = React5.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.m.div,
+    {
+      ref: cardRef,
+      onMouseEnter: reduced ? void 0 : () => setIsHovered(true),
+      onMouseLeave: reduced ? void 0 : () => setIsHovered(false),
+      "data-slot": "spotlight-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: chunk2GOPD64T_js.cn(
+        "relative overflow-hidden rounded-xl border surface-card p-6 text-card-foreground",
+        "transition-all duration-200 hover:-translate-y-px hover:shadow-md",
+        "motion-reduce:hover:transform-none",
+        className
+      ),
+      children: [
+        !reduced && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 transition-opacity duration-300",
+            style: {
+              opacity: isHovered ? 1 : 0,
+              background: `radial-gradient(${spotlightSize}px circle at ${position.x}px ${position.y}px, ${spotlightColor} 0%, transparent 70%)`,
+              ...spotlightOpacity < 1 && { opacity: isHovered ? spotlightOpacity : 0 }
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
+function StatCard({
+  value,
+  label,
+  icon,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "stat-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: chunk2GOPD64T_js.cn(
+        "flex flex-col items-center rounded-xl border surface-card p-6 text-center",
+        "transition-all duration-200 hover:-translate-y-px hover:shadow-md",
+        "motion-reduce:hover:transform-none",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 text-primary [&_svg]:size-6", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold tracking-tight", children: value }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+function Steps({
+  children,
+  current = 0,
+  direction = "horizontal",
+  className
+}) {
+  const items = React5.Children.toArray(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunk2GOPD64T_js.cn(
+        "flex",
+        direction === "horizontal" ? "flex-row items-start" : "flex-col",
+        className
+      ),
+      "data-slot": "steps",
+      role: "list",
+      children: items.map((child, i) => {
+        const status = i < current ? "completed" : i === current ? "active" : "pending";
+        const isLast = i === items.length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: chunk2GOPD64T_js.cn(
+              "flex",
+              direction === "horizontal" ? "flex-1 flex-col items-center" : "flex-row gap-4"
+            ),
+            role: "listitem",
+            "aria-current": status === "active" ? "step" : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk2GOPD64T_js.cn(
+                "flex items-center",
+                direction === "horizontal" ? "w-full" : "flex-col"
+              ), children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: chunk2GOPD64T_js.cn(
+                      "flex size-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors",
+                      status === "completed" && "border-primary bg-primary text-primary-foreground",
+                      status === "active" && "border-primary bg-background text-primary",
+                      status === "pending" && "border-muted-foreground/30 bg-background text-muted-foreground"
+                    ),
+                    children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) : child.props.icon ?? i + 1
+                  }
+                ),
+                !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: chunk2GOPD64T_js.cn(
+                      direction === "horizontal" ? "h-0.5 flex-1" : "w-0.5 min-h-8 flex-1",
+                      status === "completed" ? "bg-primary" : "bg-border"
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk2GOPD64T_js.cn(
+                direction === "horizontal" ? "mt-2 text-center" : "pb-8"
+              ), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: chunk2GOPD64T_js.cn(
+                  "text-sm font-medium",
+                  status === "pending" && "text-muted-foreground"
+                ), children: child.props.title }),
+                child.props.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: child.props.description })
+              ] })
+            ]
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function Step(_props) {
+  return null;
+}
+function StickyScrollReveal({
+  items,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const containerRef = React5.useRef(null);
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk2GOPD64T_js.cn("space-y-16", className), "data-slot": "sticky-scroll-reveal", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold", children: item.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: item.description })
+      ] }),
+      item.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border bg-muted/50 p-4", children: item.content })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: chunk2GOPD64T_js.cn("relative", className),
+      "data-slot": "sticky-scroll-reveal",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid gap-8 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative md:h-fit", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-32 space-y-24", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          StickyItem,
+          {
+            item,
+            index: i,
+            total: items.length,
+            containerRef
+          },
+          i
+        )) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-24", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-32", children: /* @__PURE__ */ jsxRuntime.jsx(
+          StickyContent,
+          {
+            content: item.content,
+            index: i,
+            total: items.length,
+            containerRef
+          }
+        ) }, i)) })
+      ] })
+    }
+  );
+}
+function StickyItem({
+  item,
+  index,
+  total,
+  containerRef
+}) {
+  const { scrollYProgress } = react.useScroll({
+    target: containerRef,
+    offset: ["start start", "end end"]
+  });
+  const sectionStart = index / total;
+  const sectionEnd = (index + 1) / total;
+  const opacity = react.useTransform(
+    scrollYProgress,
+    [sectionStart, sectionStart + 0.05, sectionEnd - 0.05, sectionEnd],
+    [0.3, 1, 1, 0.3]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.m.div, { style: { opacity }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold", children: item.title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: item.description })
+  ] });
+}
+function StickyContent({
+  content,
+  index,
+  total,
+  containerRef
+}) {
+  const { scrollYProgress } = react.useScroll({
+    target: containerRef,
+    offset: ["start start", "end end"]
+  });
+  const sectionStart = index / total;
+  const sectionEnd = (index + 1) / total;
+  const opacity = react.useTransform(
+    scrollYProgress,
+    [sectionStart, sectionStart + 0.05, sectionEnd - 0.05, sectionEnd],
+    [0, 1, 1, 0]
+  );
+  if (!content) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.m.div,
+    {
+      style: { opacity },
+      className: "overflow-hidden rounded-xl border bg-muted/50 p-4",
+      children: content
+    }
+  );
+}
+function TeamCard({
+  name,
+  role,
+  photo,
+  bio,
+  socials,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "team-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: chunk2GOPD64T_js.cn(
+        "flex flex-col items-center rounded-xl border surface-card p-6 text-center",
+        "transition-all duration-200 hover:-translate-y-px hover:shadow-md",
+        "motion-reduce:hover:transform-none",
+        className
+      ),
+      children: [
+        photo && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: photo,
+            alt: name,
+            className: "mb-4 size-24 rounded-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold", children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: role }),
+        bio && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: bio }),
+        socials && socials.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex gap-2", children: socials.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: s.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            "aria-label": s.label,
+            children: s.icon
+          },
+          s.label
+        )) })
+      ]
+    }
+  );
+}
+function TestimonialCard({
+  quote,
+  name,
+  role,
+  avatar,
+  rating,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = chunk2GOPD64T_js.useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "testimonial-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: chunk2GOPD64T_js.cn(
+        "flex flex-col rounded-xl border surface-card p-6",
+        "transition-all duration-200 hover:-translate-y-px hover:shadow-md",
+        "motion-reduce:hover:transform-none",
+        className
+      ),
+      children: [
+        rating && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 flex gap-0.5", "aria-label": `${rating} out of 5 stars`, children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: chunk2GOPD64T_js.cn("size-4", i < rating ? "text-warning" : "text-muted-foreground/20"),
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { className: "flex-1 text-sm leading-relaxed text-foreground", children: [
+          "\u201C",
+          quote,
+          "\u201D"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
+          avatar && /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: avatar,
+              alt: name,
+              className: "size-10 rounded-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold", children: name }),
+            role && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: role })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TextGenerateEffect({
+  text,
+  stagger = 0.05,
+  duration = 0.4,
+  once = true,
+  as: Tag = "p",
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const ref = React5.useRef(null);
+  const isInView = react.useInView(ref, { once, margin: "-50px" });
+  const words = React5.useMemo(() => text.split(/\s+/), [text]);
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, children: text });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      ref,
+      className: chunk2GOPD64T_js.cn("inline", className),
+      "data-slot": "text-generate-effect",
+      children: words.map((word, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        react.m.span,
+        {
+          initial: { opacity: 0, filter: "blur(4px)" },
+          animate: isInView ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: "blur(4px)" },
+          transition: { duration, delay: i * stagger },
+          className: "inline-block",
+          children: [
+            word,
+            i < words.length - 1 && "\xA0"
+          ]
+        },
+        `${word}-${i}`
+      ))
+    }
+  );
+}
+function Timeline({ children, className }) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const containerRef = React5.useRef(null);
+  const { scrollYProgress } = react.useScroll({
+    target: containerRef,
+    offset: ["start 80%", "end 50%"]
+  });
+  const beamHeight = react.useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: chunk2GOPD64T_js.cn("relative", className),
+      "data-slot": "timeline",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-4 top-0 h-full w-0.5 bg-border md:left-1/2 md:-translate-x-px" }),
+        !reduced && /* @__PURE__ */ jsxRuntime.jsx(
+          react.m.div,
+          {
+            className: "absolute left-4 top-0 w-0.5 bg-primary md:left-1/2 md:-translate-x-px",
+            style: { height: beamHeight }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative space-y-12", children })
+      ]
+    }
+  );
+}
+function TimelineItem({
+  title,
+  date,
+  children,
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.m.div,
+    {
+      initial: reduced ? false : { opacity: 0, y: 16 },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, margin: "-80px" },
+      transition: reduced ? { duration: 0 } : { duration: 0.5, ease: "easeOut" },
+      className: chunk2GOPD64T_js.cn("relative pl-12 md:pl-0", className),
+      "data-slot": "timeline-item",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[11px] top-1.5 size-3 rounded-full border-2 border-primary bg-background md:left-1/2 md:-translate-x-1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:ml-[calc(50%+2rem)] md:max-w-[calc(50%-3rem)]", children: [
+          date && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block text-sm text-muted-foreground", children: date }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-muted-foreground", children })
+        ] })
+      ]
+    }
+  );
+}
+function TracingBeam({
+  children,
+  color = "hsl(var(--primary))",
+  trackColor = "hsl(var(--border))",
+  className
+}) {
+  const reduced = chunk2GOPD64T_js.useReducedMotion();
+  const containerRef = React5.useRef(null);
+  const { scrollYProgress } = react.useScroll({
+    target: containerRef,
+    offset: ["start 20%", "end 80%"]
+  });
+  const beamHeight = react.useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+  const dotY = react.useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+  if (reduced) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk2GOPD64T_js.cn("border-l-2 border-primary/30 pl-8", className), children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: chunk2GOPD64T_js.cn("relative pl-10", className),
+      "data-slot": "tracing-beam",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute left-3 top-0 h-full w-px",
+            style: { backgroundColor: trackColor }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.m.div,
+          {
+            className: "absolute left-3 top-0 w-px",
+            style: { height: beamHeight, backgroundColor: color }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.m.div,
+          {
+            className: "absolute left-[9px] size-1.5 rounded-full",
+            style: {
+              top: dotY,
+              backgroundColor: color,
+              boxShadow: `0 0 8px ${color}`
+            }
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
 
 // src/types/theme-props.ts
 var PALETTES = [
@@ -8491,7 +10622,7 @@ function StatefulButton({
     }
   );
 }
-var PROVIDERS = [
+var PROVIDERS2 = [
   "google",
   "github",
   "apple",
@@ -9226,6 +11357,7 @@ exports.AlertTitle = AlertTitle;
 exports.AnimatedTooltip = AnimatedTooltip;
 exports.AppleAuthButton = AppleAuthButton;
 exports.AspectRatio = AspectRatio;
+exports.AudioPlayer = AudioPlayer;
 exports.AuroraBackground = AuroraBackground;
 exports.Avatar = Avatar;
 exports.AvatarBadge = AvatarBadge;
@@ -9235,6 +11367,10 @@ exports.AvatarGroupCount = AvatarGroupCount;
 exports.AvatarImage = AvatarImage;
 exports.Badge = Badge;
 exports.BarList = BarList;
+exports.BentoGrid = BentoGrid;
+exports.BentoGridItem = BentoGridItem;
+exports.BlurFade = BlurFade;
+exports.BorderBeam = BorderBeam;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -9268,6 +11404,8 @@ exports.ComboboxItem = ComboboxItem;
 exports.ComboboxList = ComboboxList;
 exports.ComboboxSeparator = ComboboxSeparator;
 exports.ComboboxTrigger = ComboboxTrigger;
+exports.Compare = Compare;
+exports.Confetti = Confetti;
 exports.ContextMenu = ContextMenu;
 exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
 exports.ContextMenuContent = ContextMenuContent;
@@ -9283,6 +11421,7 @@ exports.ContextMenuSub = ContextMenuSub;
 exports.ContextMenuSubContent = ContextMenuSubContent;
 exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
 exports.ContextMenuTrigger = ContextMenuTrigger;
+exports.Countdown = Countdown;
 exports.DataToolbar = DataToolbar;
 exports.DataToolbarActions = DataToolbarActions;
 exports.DataToolbarFilters = DataToolbarFilters;
@@ -9291,6 +11430,8 @@ exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DirectionProvider = DirectionProvider2;
 exports.DiscordAuthButton = DiscordAuthButton;
+exports.Dock = Dock;
+exports.DockItem = DockItem;
 exports.DribbbleAuthButton = DribbbleAuthButton;
 exports.DropdownMenu = DropdownMenu;
 exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
@@ -9316,6 +11457,7 @@ exports.EmptyMedia = EmptyMedia;
 exports.EmptyState = EmptyState;
 exports.EmptyTitle = EmptyTitle;
 exports.FacebookAuthButton = FacebookAuthButton;
+exports.FeatureCard = FeatureCard;
 exports.Field = Field;
 exports.FieldContent = FieldContent;
 exports.FieldDescription = FieldDescription;
@@ -9326,6 +11468,7 @@ exports.FieldLegend = FieldLegend;
 exports.FieldSeparator = FieldSeparator;
 exports.FieldSet = FieldSet;
 exports.FieldTitle = FieldTitle;
+exports.FlipWords = FlipWords;
 exports.Form = Form;
 exports.FormControl = FormControl;
 exports.FormDescription = FormDescription;
@@ -9333,13 +11476,21 @@ exports.FormField = FormField;
 exports.FormItem = FormItem;
 exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
+exports.GalleryLightbox = GalleryLightbox;
 exports.GitHubAuthButton = GitHubAuthButton;
 exports.GitLabAuthButton = GitLabAuthButton;
+exports.GlowingEffect = GlowingEffect;
 exports.GoogleAuthButton = GoogleAuthButton;
+exports.GradientText = GradientText;
+exports.HeroVideoDialog = HeroVideoDialog;
+exports.Hotspot = Hotspot;
+exports.HotspotMarker = HotspotMarker;
 exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;
 exports.HoverCardTrigger = HoverCardTrigger;
+exports.IPhoneMock = IPhoneMock;
 exports.Icons = Icons;
+exports.ImageSwapHover = ImageSwapHover;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
 exports.InputGroupAddon = InputGroupAddon;
@@ -9361,6 +11512,7 @@ exports.Kbd = Kbd;
 exports.KbdGroup = KbdGroup;
 exports.Label = Label5;
 exports.LinkedInAuthButton = LinkedInAuthButton;
+exports.Marquee = Marquee;
 exports.MediumAuthButton = MediumAuthButton;
 exports.Menubar = Menubar;
 exports.MenubarCheckboxItem = MenubarCheckboxItem;
@@ -9380,6 +11532,8 @@ exports.MenubarSubTrigger = MenubarSubTrigger;
 exports.MenubarTrigger = MenubarTrigger;
 exports.MetricCard = MetricCard;
 exports.MicrosoftAuthButton = MicrosoftAuthButton;
+exports.MouseGradientBlob = MouseGradientBlob;
+exports.MovingBorder = MovingBorder;
 exports.NativeSelect = NativeSelect;
 exports.NativeSelectOptGroup = NativeSelectOptGroup;
 exports.NativeSelectOption = NativeSelectOption;
@@ -9395,6 +11549,7 @@ exports.NotificationCenter = NotificationCenter;
 exports.NumberInput = NumberInput;
 exports.PALETTES = PALETTES;
 exports.PageHeader = PageHeader;
+exports.PageTransition = PageTransition;
 exports.Pagination = Pagination;
 exports.PaginationContent = PaginationContent;
 exports.PaginationEllipsis = PaginationEllipsis;
@@ -9402,6 +11557,8 @@ exports.PaginationItem = PaginationItem;
 exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
+exports.ParallaxSection = ParallaxSection;
+exports.ParticlesBackground = ParticlesBackground;
 exports.PayPalAuthButton = PayPalAuthButton;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
@@ -9415,8 +11572,11 @@ exports.RadioGroup = RadioGroup4;
 exports.RadioGroupItem = RadioGroupItem;
 exports.Rating = Rating;
 exports.RedditAuthButton = RedditAuthButton;
-exports.SOCIAL_AUTH_PROVIDERS = PROVIDERS;
+exports.RetroGrid = RetroGrid;
+exports.RevealOnScroll = RevealOnScroll;
+exports.SOCIAL_AUTH_PROVIDERS = PROVIDERS2;
 exports.STYLES = STYLES;
+exports.SafariMock = SafariMock;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
 exports.ScrollToTopButton = ScrollToTopButton;
@@ -9442,6 +11602,7 @@ exports.SheetFooter = SheetFooter;
 exports.SheetHeader = SheetHeader;
 exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
+exports.ShimmerButton = ShimmerButton;
 exports.Sidebar = Sidebar;
 exports.SidebarContent = SidebarContent;
 exports.SidebarFooter = SidebarFooter;
@@ -9469,9 +11630,15 @@ exports.Skeleton = Skeleton;
 exports.SlackAuthButton = SlackAuthButton;
 exports.Slider = Slider;
 exports.SocialAuthButton = SocialAuthButton;
+exports.SocialButton = SocialButton;
 exports.SparkChart = SparkChart;
 exports.Spinner = Spinner;
+exports.SpotlightCard = SpotlightCard;
+exports.StatCard = StatCard;
 exports.StatefulButton = StatefulButton;
+exports.Step = Step;
+exports.Steps = Steps;
+exports.StickyScrollReveal = StickyScrollReveal;
 exports.StripeAuthButton = StripeAuthButton;
 exports.Switch = Switch;
 exports.Table = Table;
@@ -9487,10 +11654,15 @@ exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.TagInput = TagInput;
+exports.TeamCard = TeamCard;
+exports.TestimonialCard = TestimonialCard;
+exports.TextGenerateEffect = TextGenerateEffect;
 exports.Textarea = Textarea;
 exports.ThemeModeMultiToggle = ThemeModeMultiToggle;
 exports.ThemeModeToggle = ThemeModeToggle;
 exports.TikTokAuthButton = TikTokAuthButton;
+exports.Timeline = Timeline;
+exports.TimelineItem = TimelineItem;
 exports.Toaster = Toaster3;
 exports.Toggle = Toggle;
 exports.ToggleGroup = ToggleGroup;
@@ -9500,6 +11672,7 @@ exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TopLoadingBar = TopLoadingBar;
+exports.TracingBeam = TracingBeam;
 exports.Tracker = Tracker;
 exports.TreeView = TreeView;
 exports.TypewriterText = TypewriterText;
@@ -9509,6 +11682,7 @@ exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
 exports.toggleVariants = toggleVariants;
+exports.useCountdown = useCountdown;
 exports.useDirection = useDirection2;
 exports.useDisclosure = useDisclosure;
 exports.useFileDialog = useFileDialog;