@saasflare/ui 3.2.0 → 3.3.0

package/dist/index.mjs

@@ -3,15 +3,15 @@ import { Calendar } from './chunk-XNDTCYSO.mjs';
 import { buttonVariants, Button } from './chunk-2ONA6OMO.mjs';
 export { Button, buttonVariants } from './chunk-2ONA6OMO.mjs';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './chunk-5C65JNGY.mjs';
-import { useSaasflareMotion, springGentle, springBouncy, spring } from './chunk-OZAWULTM.mjs';
+import { useSaasflareMotion, springGentle, springBouncy, spring, noMotion } from './chunk-OZAWULTM.mjs';
 export { fadeIn, noMotion, scaleIn, slideDown, slideUp, spring, springBouncy, springGentle, springStiff, useSaasflareMotion } from './chunk-OZAWULTM.mjs';
-import { CaretDownIcon, CheckIcon, CaretUpIcon, CircleIcon, CaretRightIcon, XIcon, CircleNotchIcon, XCircleIcon, WarningIcon, InfoIcon, CheckCircleIcon, DotsThreeIcon, MagnifyingGlassIcon, CaretLeftIcon, SidebarSimpleIcon, ArrowUpIcon, TiktokLogoIcon, DribbbleLogoIcon, GitlabLogoIcon, StripeLogoIcon, PaypalLogoIcon, RedditLogoIcon, SlackLogoIcon, MediumLogoIcon, LinkedinLogoIcon, FacebookLogoIcon, DiscordLogoIcon, XLogoIcon, MicrosoftOutlookLogoIcon, AppleLogoIcon, GithubLogoIcon, GoogleLogoIcon, SunIcon, MoonIcon, MonitorIcon } from './chunk-GI6VN7XU.mjs';
+import { CaretDownIcon, CheckIcon, CaretUpIcon, CircleIcon, CaretRightIcon, XIcon, CircleNotchIcon, XCircleIcon, WarningIcon, InfoIcon, CheckCircleIcon, DotsThreeIcon, MagnifyingGlassIcon, CaretLeftIcon, SidebarSimpleIcon, PauseIcon, PlayIcon, ArrowUpIcon, TiktokLogoIcon, DribbbleLogoIcon, GitlabLogoIcon, StripeLogoIcon, PaypalLogoIcon, RedditLogoIcon, SlackLogoIcon, MediumLogoIcon, LinkedinLogoIcon, FacebookLogoIcon, DiscordLogoIcon, XLogoIcon, MicrosoftOutlookLogoIcon, AppleLogoIcon, GithubLogoIcon, GoogleLogoIcon, SunIcon, MoonIcon, MonitorIcon } from './chunk-GI6VN7XU.mjs';
 export { ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon, CheckCircleIcon, CheckIcon, CircleIcon, CircleNotchIcon, DotsSixVerticalIcon, DotsThreeIcon, IconBase, InfoIcon, MagnifyingGlassIcon, MinusIcon, MonitorIcon, MoonIcon, PauseIcon, PlayIcon, QuotesIcon, SidebarSimpleIcon, SunIcon, WarningIcon, XCircleIcon, XIcon } from './chunk-GI6VN7XU.mjs';
-import { useSaasflareProps, cn } from './chunk-RMQBB72G.mjs';
+import { useSaasflareProps, cn, useReducedMotion } from './chunk-RMQBB72G.mjs';
 export { SaasflareProvider, SaasflareScript, SaasflareShell, SmoothScrollProvider, cn, useAnimation, useLocalStorage, useReducedMotion, useSaasflareProps, useSaasflareTheme } from './chunk-RMQBB72G.mjs';
 import * as React5 from 'react';
-import React5__default, { useState, useCallback, useMemo, useRef, useEffect, Suspense } from 'react';
-import { m, useMotionValue, useSpring, useTransform, AnimatePresence } from 'motion/react';
+import React5__default, { createContext, useState, useCallback, useMemo, useRef, useEffect, Children, Suspense, useContext } from 'react';
+import { m, useMotionValue, useSpring, useTransform, AnimatePresence, useInView, useScroll } from 'motion/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -294,6 +294,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] = useState(calculate);
+  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] = useState([]);
@@ -3250,10 +3274,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
       });
@@ -8330,6 +8354,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 = useSaasflareProps({ surface, radius, animated });
+  const audioRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [current, setCurrent] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const toggle = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (playing) {
+      audio.pause();
+    } else {
+      audio.play();
+    }
+    setPlaying(!playing);
+  }, [playing]);
+  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 = 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__ */ jsxs(
+    "div",
+    {
+      "data-slot": "audio-player",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: 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__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
+        /* @__PURE__ */ 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__ */ jsx(PauseIcon, { weight: sf.iconWeight, className: "size-4" }) : /* @__PURE__ */ jsx(PlayIcon, { weight: sf.iconWeight, className: "ml-0.5 size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium truncate", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] tabular-nums text-muted-foreground", children: formatTime(current) }),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-1 rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-1 rounded-full bg-primary transition-[width]",
+                  style: { width: `${progress}%` }
+                }
+              ) }),
+              /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    "div",
+    {
+      className: 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 = useSaasflareProps({ surface, radius, animated });
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      initial: reduced ? false : { opacity: 0, y: 16 },
+      whileInView: reduced ? void 0 : { opacity: 1, y: 0 },
+      viewport: { once: true, margin: "-60px" },
+      transition: reduced ? noMotion : { ...springGentle, delay: index * 0.08 },
+      "data-slot": "bento-grid-item",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: 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 = useReducedMotion();
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once, margin: "-50px" });
+  if (reduced) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
+  return /* @__PURE__ */ jsx(
+    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: 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 = useReducedMotion();
+  if (reduced) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes sf-border-beam {
+          0% { offset-distance: 0%; }
+          100% { offset-distance: 100%; }
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("pointer-events-none absolute inset-0", className),
+        style: { borderRadius },
+        "aria-hidden": "true",
+        "data-slot": "border-beam",
+        children: /* @__PURE__ */ 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] = useState(initialPosition);
+  const containerRef = useRef(null);
+  const dragging = useRef(false);
+  const updatePosition = 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 = useCallback(
+    (e) => {
+      dragging.current = true;
+      e.target.setPointerCapture(e.pointerId);
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (!dragging.current) return;
+      updatePosition(e.clientX);
+    },
+    [updatePosition]
+  );
+  const onPointerUp = useCallback(() => {
+    dragging.current = false;
+  }, []);
+  const onKeyDown = 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__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative select-none overflow-hidden rounded-xl border shadow-sm",
+        className
+      ),
+      style: { aspectRatio },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      "data-slot": "compare",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: after }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 overflow-hidden",
+            style: { width: `${position}%` },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full",
+                style: { width: containerRef.current?.offsetWidth ?? "100%" },
+                children: before
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-white shadow-md", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 1L1 7L4 13M10 1L13 7L10 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          }
+        ),
+        beforeLabel && /* @__PURE__ */ 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__ */ 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 = useReducedMotion();
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    if (!active || reduced) return;
+    setVisible(true);
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onComplete?.();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [active, reduced, duration, onComplete]);
+  const particles = 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__ */ jsxs(
+    "div",
+    {
+      className: cn("pointer-events-none fixed inset-0 z-[9999] overflow-hidden", className),
+      "aria-hidden": "true",
+      "data-slot": "confetti",
+      children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    "div",
+    {
+      className: 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__ */ jsxs("div", { className: "flex items-center gap-2 md:gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ 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__ */ jsx("span", { className: "mt-1.5 text-[10px] uppercase tracking-wider text-muted-foreground", children: unit.label })
+        ] }),
+        i < units.length - 1 && /* @__PURE__ */ 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__ */ jsxs(
+    "div",
+    {
+      className: cn("overflow-hidden rounded-xl border bg-background shadow-xl", className),
+      "data-slot": "safari-mock",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b bg-muted/50 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-[#ff5f57]" }),
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-[#febc2e]" }),
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-[#28c840]" })
+          ] }),
+          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: "truncate", children: url })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
+      ]
+    }
+  );
+}
+function IPhoneMock({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: 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__ */ 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__ */ jsxs("div", { className: "overflow-hidden rounded-[2rem] bg-background", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-2 text-[10px] font-semibold text-foreground", children: [
+            /* @__PURE__ */ jsx("span", { children: "9:41" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-0.5", children: [
+                /* @__PURE__ */ jsx("div", { className: "h-2 w-0.5 rounded-sm bg-foreground" }),
+                /* @__PURE__ */ jsx("div", { className: "h-2.5 w-0.5 rounded-sm bg-foreground" }),
+                /* @__PURE__ */ jsx("div", { className: "h-3 w-0.5 rounded-sm bg-foreground" }),
+                /* @__PURE__ */ jsx("div", { className: "h-3.5 w-0.5 rounded-sm bg-foreground" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "ml-1", children: "100%" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-1.5 h-1 w-28 rounded-full bg-foreground/20" })
+      ]
+    }
+  );
+}
+var DockContext = createContext(null);
+function useDock() {
+  const ctx = 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 = useSaasflareProps({ surface, radius, animated });
+  const reduced = useReducedMotion();
+  const mouseX = useMotionValue(Infinity);
+  return /* @__PURE__ */ jsx(DockContext.Provider, { value: { mouseX, magnification, distance, reduced }, children: /* @__PURE__ */ jsx(
+    m.nav,
+    {
+      onMouseMove: (e) => mouseX.set(e.pageX),
+      onMouseLeave: () => mouseX.set(Infinity),
+      "data-slot": "dock",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: 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 = useRef(null);
+  const distanceFromMouse = 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 = useTransform(
+    distanceFromMouse,
+    [-distance, 0, distance],
+    [BASE_SIZE, maxSize, BASE_SIZE]
+  );
+  const size = useSpring(sizeTransform, { stiffness: 300, damping: 25 });
+  return /* @__PURE__ */ jsxs(
+    m.button,
+    {
+      ref,
+      onClick,
+      style: reduced ? { width: BASE_SIZE, height: BASE_SIZE } : { width: size, height: size },
+      className: 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__ */ 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 = useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "feature-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: 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__ */ 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__ */ jsx("h3", { className: "text-base font-semibold", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm leading-relaxed text-muted-foreground", children: description })
+      ]
+    }
+  );
+}
+function FlipWords({
+  words,
+  interval = 2500,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const [index, setIndex] = useState(0);
+  const next = useCallback(() => {
+    setIndex((prev) => (prev + 1) % words.length);
+  }, [words.length]);
+  useEffect(() => {
+    if (reduced || words.length <= 1) return;
+    const timer = setInterval(next, interval);
+    return () => clearInterval(timer);
+  }, [reduced, words.length, interval, next]);
+  const longestWord = useMemo(
+    () => words.reduce((a, b) => a.length >= b.length ? a : b, ""),
+    [words]
+  );
+  if (reduced) {
+    return /* @__PURE__ */ jsx("span", { className, children: words[0] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("relative inline-block text-left align-baseline", className),
+      "data-slot": "flip-words",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "invisible", "aria-hidden": "true", children: longestWord }),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+          m.span,
+          {
+            initial: { y: "100%", opacity: 0 },
+            animate: { y: 0, opacity: 1 },
+            exit: { y: "-100%", opacity: 0 },
+            transition: springBouncy,
+            className: "absolute inset-0",
+            "aria-live": "polite",
+            children: words[index]
+          },
+          words[index]
+        ) })
+      ]
+    }
+  );
+}
+function GalleryLightbox({
+  images,
+  open,
+  index,
+  onClose,
+  onIndexChange,
+  className
+}) {
+  const sf = useSaasflareProps();
+  const prev = useCallback(() => {
+    onIndexChange((index - 1 + images.length) % images.length);
+  }, [index, images.length, onIndexChange]);
+  const next = useCallback(() => {
+    onIndexChange((index + 1) % images.length);
+  }, [index, images.length, onIndexChange]);
+  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]);
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      className: 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__ */ 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__ */ jsx(XIcon, { weight: sf.iconWeight, className: "size-6" })
+          }
+        ),
+        images.length > 1 && /* @__PURE__ */ 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__ */ jsx(CaretLeftIcon, { weight: sf.iconWeight, className: "size-6" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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__ */ 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__ */ jsx(CaretRightIcon, { weight: sf.iconWeight, className: "size-6" })
+          }
+        ),
+        images.length > 1 && /* @__PURE__ */ 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] = useState({ x: 0, y: 0 });
+  const rafRef = useRef(void 0);
+  const updatePosition = 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]
+  );
+  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 = useReducedMotion();
+  const ref = useRef(null);
+  const pos = useMousePosition({ ref, enabled: !reduced });
+  const [hovered, setHovered] = useState(false);
+  if (reduced) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: 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__ */ 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 = useReducedMotion();
+  const shouldAnimate = animate && !reduced;
+  const gradient = `linear-gradient(${angle}deg, ${colors.join(", ")}, ${colors[0]})`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    shouldAnimate && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes sf-gradient-shift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+          }
+        ` }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: 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 = useReducedMotion();
+  const sf = useSaasflareProps();
+  const [open, setOpen] = useState(false);
+  const close = useCallback(() => setOpen(false), []);
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") close();
+    },
+    [close]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className: 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__ */ jsx(
+            "img",
+            {
+              src: thumbnailSrc,
+              alt: thumbnailAlt,
+              className: "size-full object-cover transition-transform duration-300 group-hover:scale-105"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30", children: /* @__PURE__ */ 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__ */ jsx(PlayIcon, { weight: sf.iconWeight, className: "ml-1 size-7 text-foreground" }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(
+      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__ */ 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__ */ jsx(XIcon, { weight: sf.iconWeight, className: "size-6" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            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 ? noMotion : springBouncy,
+              className: "w-full max-w-5xl px-4",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl", style: { aspectRatio }, children: /* @__PURE__ */ 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__ */ jsx("div", { className: cn("relative", className), "data-slot": "hotspot", children });
+}
+function HotspotMarker({
+  x,
+  y,
+  label,
+  description,
+  color = "hsl(var(--primary))",
+  className
+}) {
+  const [hovered, setHovered] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: 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__ */ 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__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "relative size-4 rounded-full border-2 border-background shadow-md",
+            style: { backgroundColor: color },
+            "aria-label": label
+          }
+        ),
+        hovered && /* @__PURE__ */ 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__ */ jsx("p", { className: "font-semibold text-popover-foreground", children: label }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+        ] })
+      ]
+    }
+  );
+}
+function ImageSwapHover({
+  src,
+  hoverSrc,
+  alt,
+  aspectRatio = "1/1",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("group relative overflow-hidden rounded-xl", className),
+      style: { aspectRatio },
+      "data-slot": "image-swap-hover",
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            className: "absolute inset-0 size-full object-cover transition-opacity duration-300 group-hover:opacity-0"
+          }
+        ),
+        /* @__PURE__ */ 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 = useReducedMotion();
+  if (reduced) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: 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__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative flex overflow-hidden",
+        vertical ? "flex-col" : "flex-row",
+        className
+      ),
+      "data-slot": "marquee",
+      children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            className: 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 = useReducedMotion();
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+  const blobX = useSpring(mouseX, { stiffness: 150, damping: 20 });
+  const blobY = useSpring(mouseY, { stiffness: 150, damping: 20 });
+  const onMouseMove = 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]
+  );
+  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__ */ jsx(
+    "div",
+    {
+      "data-blob-container": true,
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        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 = useReducedMotion();
+  const gradientStops = [...colors, colors[0]].join(", ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !reduced && /* @__PURE__ */ 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__ */ jsx(
+      "div",
+      {
+        className: 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__ */ 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 = useReducedMotion();
+  if (reduced) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
+  const preset = VARIANTS[variant];
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+    m.div,
+    {
+      initial: preset.initial,
+      animate: preset.animate,
+      exit: preset.exit,
+      transition: { duration, ease: "easeInOut" },
+      className: cn("will-change-[opacity,transform]", className),
+      children
+    },
+    transitionKey
+  ) });
+}
+function ParallaxSection({
+  children,
+  speed = 0.5,
+  className
+}) {
+  const reduced = useReducedMotion();
+  const ref = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start end", "end start"]
+  });
+  const offset = (1 - speed) * 100;
+  const y = useTransform(scrollYProgress, [0, 1], [`-${offset}px`, `${offset}px`]);
+  if (reduced) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("relative overflow-hidden", className), "data-slot": "parallax-section", children: /* @__PURE__ */ jsx(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 = useReducedMotion();
+  const particles = 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__ */ jsxs(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      "aria-hidden": "true",
+      "data-slot": "particles-background",
+      children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      "aria-hidden": "true",
+      "data-slot": "retro-grid",
+      children: /* @__PURE__ */ 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 = useReducedMotion();
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once, margin: rootMargin });
+  if (reduced) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
+  const offset = DIRECTION_OFFSET[direction];
+  return /* @__PURE__ */ jsx(
+    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: { ...springGentle, delay },
+      className: 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 = useReducedMotion();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !reduced && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes sf-shimmer-slide {
+            from { transform: translateX(-100%) rotate(-15deg); }
+            to { transform: translateX(200%) rotate(-15deg); }
+          }
+        ` }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: 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__ */ 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__ */ 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__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: 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__ */ jsx("svg", { className: "size-5", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: config.icon }) }),
+        !iconOnly && /* @__PURE__ */ jsx("span", { children: displayLabel })
+      ]
+    }
+  );
+}
+function SpotlightCard({
+  children,
+  spotlightColor = "hsl(var(--primary))",
+  spotlightSize = 250,
+  spotlightOpacity = 0.08,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  const reduced = useReducedMotion();
+  const cardRef = useRef(null);
+  const position = useMousePosition({ ref: cardRef, enabled: !reduced });
+  const [isHovered, setIsHovered] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    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: 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__ */ 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__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
+function StatCard({
+  value,
+  label,
+  icon,
+  className,
+  surface,
+  radius,
+  animated
+}) {
+  const sf = useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "stat-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: 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__ */ jsx("div", { className: "mb-3 text-primary [&_svg]:size-6", children: icon }),
+        /* @__PURE__ */ jsx("p", { className: "text-3xl font-bold tracking-tight", children: value }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+function Steps({
+  children,
+  current = 0,
+  direction = "horizontal",
+  className
+}) {
+  const items = Children.toArray(children);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: 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__ */ jsxs(
+          "div",
+          {
+            className: 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__ */ jsxs("div", { className: cn(
+                "flex items-center",
+                direction === "horizontal" ? "w-full" : "flex-col"
+              ), children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: 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__ */ 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__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : child.props.icon ?? i + 1
+                  }
+                ),
+                !isLast && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      direction === "horizontal" ? "h-0.5 flex-1" : "w-0.5 min-h-8 flex-1",
+                      status === "completed" ? "bg-primary" : "bg-border"
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: cn(
+                direction === "horizontal" ? "mt-2 text-center" : "pb-8"
+              ), children: [
+                /* @__PURE__ */ jsx("p", { className: cn(
+                  "text-sm font-medium",
+                  status === "pending" && "text-muted-foreground"
+                ), children: child.props.title }),
+                child.props.description && /* @__PURE__ */ 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 = useReducedMotion();
+  const containerRef = useRef(null);
+  if (reduced) {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-16", className), "data-slot": "sticky-scroll-reveal", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "grid gap-8 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: item.title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: item.description })
+      ] }),
+      item.content && /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-muted/50 p-4", children: item.content })
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative", className),
+      "data-slot": "sticky-scroll-reveal",
+      children: /* @__PURE__ */ jsxs("div", { className: "relative grid gap-8 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative md:h-fit", children: /* @__PURE__ */ jsx("div", { className: "sticky top-32 space-y-24", children: items.map((item, i) => /* @__PURE__ */ jsx(
+          StickyItem,
+          {
+            item,
+            index: i,
+            total: items.length,
+            containerRef
+          },
+          i
+        )) }) }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-24", children: items.map((item, i) => /* @__PURE__ */ jsx("div", { className: "sticky top-32", children: /* @__PURE__ */ jsx(
+          StickyContent,
+          {
+            content: item.content,
+            index: i,
+            total: items.length,
+            containerRef
+          }
+        ) }, i)) })
+      ] })
+    }
+  );
+}
+function StickyItem({
+  item,
+  index,
+  total,
+  containerRef
+}) {
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start start", "end end"]
+  });
+  const sectionStart = index / total;
+  const sectionEnd = (index + 1) / total;
+  const opacity = useTransform(
+    scrollYProgress,
+    [sectionStart, sectionStart + 0.05, sectionEnd - 0.05, sectionEnd],
+    [0.3, 1, 1, 0.3]
+  );
+  return /* @__PURE__ */ jsxs(m.div, { style: { opacity }, children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-2xl font-bold", children: item.title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: item.description })
+  ] });
+}
+function StickyContent({
+  content,
+  index,
+  total,
+  containerRef
+}) {
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start start", "end end"]
+  });
+  const sectionStart = index / total;
+  const sectionEnd = (index + 1) / total;
+  const opacity = useTransform(
+    scrollYProgress,
+    [sectionStart, sectionStart + 0.05, sectionEnd - 0.05, sectionEnd],
+    [0, 1, 1, 0]
+  );
+  if (!content) return null;
+  return /* @__PURE__ */ jsx(
+    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 = useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "team-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: 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__ */ jsx(
+          "img",
+          {
+            src: photo,
+            alt: name,
+            className: "mb-4 size-24 rounded-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: name }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: role }),
+        bio && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: bio }),
+        socials && socials.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: socials.map((s) => /* @__PURE__ */ 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 = useSaasflareProps({ surface, radius, animated });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "testimonial-card",
+      "data-surface": sf.surface,
+      "data-radius": sf.radius,
+      className: 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__ */ jsx("div", { className: "mb-3 flex gap-0.5", "aria-label": `${rating} out of 5 stars`, children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn("size-4", i < rating ? "text-warning" : "text-muted-foreground/20"),
+            viewBox: "0 0 20 20",
+            fill: "currentColor",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ 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__ */ jsxs("blockquote", { className: "flex-1 text-sm leading-relaxed text-foreground", children: [
+          "\u201C",
+          quote,
+          "\u201D"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
+          avatar && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: avatar,
+              alt: name,
+              className: "size-10 rounded-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: name }),
+            role && /* @__PURE__ */ 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 = useReducedMotion();
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once, margin: "-50px" });
+  const words = useMemo(() => text.split(/\s+/), [text]);
+  if (reduced) {
+    return /* @__PURE__ */ jsx(Tag, { className, children: text });
+  }
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      className: cn("inline", className),
+      "data-slot": "text-generate-effect",
+      children: words.map((word, i) => /* @__PURE__ */ jsxs(
+        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 = useReducedMotion();
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start 80%", "end 50%"]
+  });
+  const beamHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative", className),
+      "data-slot": "timeline",
+      children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          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__ */ jsx("div", { className: "relative space-y-12", children })
+      ]
+    }
+  );
+}
+function TimelineItem({
+  title,
+  date,
+  children,
+  className
+}) {
+  const reduced = useReducedMotion();
+  return /* @__PURE__ */ jsxs(
+    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: cn("relative pl-12 md:pl-0", className),
+      "data-slot": "timeline-item",
+      children: [
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "md:ml-[calc(50%+2rem)] md:max-w-[calc(50%-3rem)]", children: [
+          date && /* @__PURE__ */ jsx("span", { className: "mb-1 block text-sm text-muted-foreground", children: date }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 text-muted-foreground", children })
+        ] })
+      ]
+    }
+  );
+}
+function TracingBeam({
+  children,
+  color = "hsl(var(--primary))",
+  trackColor = "hsl(var(--border))",
+  className
+}) {
+  const reduced = useReducedMotion();
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start 20%", "end 80%"]
+  });
+  const beamHeight = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+  const dotY = useTransform(scrollYProgress, [0, 1], ["0%", "100%"]);
+  if (reduced) {
+    return /* @__PURE__ */ jsx("div", { className: cn("border-l-2 border-primary/30 pl-8", className), children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative pl-10", className),
+      "data-slot": "tracing-beam",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute left-3 top-0 h-full w-px",
+            style: { backgroundColor: trackColor }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          m.div,
+          {
+            className: "absolute left-3 top-0 w-px",
+            style: { height: beamHeight, backgroundColor: color }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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 = [
@@ -8443,7 +10574,7 @@ function StatefulButton({
     }
   );
 }
-var PROVIDERS = [
+var PROVIDERS2 = [
   "google",
   "github",
   "apple",
@@ -8921,4 +11052,4 @@ function UserAvatar({ src, name, initials, size = "md", className }) {
   ] });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedTooltip, AppleAuthButton, AspectRatio, AuroraBackground, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBar, Checkbox, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataToolbar, DataToolbarActions, DataToolbarFilters, DataToolbarSearch, DatePicker, DateRangePicker, DirectionProvider2 as DirectionProvider, DiscordAuthButton, DribbbleAuthButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, FacebookAuthButton, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GitHubAuthButton, GitLabAuthButton, GoogleAuthButton, HoverCard, HoverCardContent, HoverCardTrigger, Icons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item9 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label5 as Label, LinkedInAuthButton, MediumAuthButton, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, MicrosoftAuthButton, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NumberInput, PALETTES, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PayPalAuthButton, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PricingCard, Progress, ProgressCircle, RADII, RadioGroup4 as RadioGroup, RadioGroupItem, Rating, RedditAuthButton, PROVIDERS as SOCIAL_AUTH_PROVIDERS, STYLES, ScrollArea, ScrollBar, ScrollToTopButton, SearchField, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SlackAuthButton, Slider, SocialAuthButton, SparkChart, Spinner, StatefulButton, StripeAuthButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, Textarea, ThemeModeMultiToggle, ThemeModeToggle, TikTokAuthButton, Toaster3 as Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLoadingBar, Tracker, TreeView, TypewriterText, UserAvatar, XAuthButton, badgeVariants, buttonGroupVariants, navigationMenuTriggerStyle, toggleVariants, useDirection2 as useDirection, useDisclosure, useFileDialog, useFocusTrap, useFormField, useInterval, useIsMobile, useMeasure, useMergedRef, usePagination, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedTooltip, AppleAuthButton, AspectRatio, AudioPlayer, AuroraBackground, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarList, BentoGrid, BentoGridItem, BlurFade, BorderBeam, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBar, Checkbox, CodeBlock, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, Compare, Confetti, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Countdown, DataToolbar, DataToolbarActions, DataToolbarFilters, DataToolbarSearch, DatePicker, DateRangePicker, DirectionProvider2 as DirectionProvider, DiscordAuthButton, Dock, DockItem, DribbbleAuthButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, FacebookAuthButton, FeatureCard, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FlipWords, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, GalleryLightbox, GitHubAuthButton, GitLabAuthButton, GlowingEffect, GoogleAuthButton, GradientText, HeroVideoDialog, Hotspot, HotspotMarker, HoverCard, HoverCardContent, HoverCardTrigger, IPhoneMock, Icons, ImageSwapHover, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Item9 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label5 as Label, LinkedInAuthButton, Marquee, MediumAuthButton, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MetricCard, MicrosoftAuthButton, MouseGradientBlob, MovingBorder, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotificationCenter, NumberInput, PALETTES, PageHeader, PageTransition, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, ParallaxSection, ParticlesBackground, PayPalAuthButton, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PricingCard, Progress, ProgressCircle, RADII, RadioGroup4 as RadioGroup, RadioGroupItem, Rating, RedditAuthButton, RetroGrid, RevealOnScroll, PROVIDERS2 as SOCIAL_AUTH_PROVIDERS, STYLES, SafariMock, ScrollArea, ScrollBar, ScrollToTopButton, SearchField, SectionCard, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, ShimmerButton, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SlackAuthButton, Slider, SocialAuthButton, SocialButton, SparkChart, Spinner, SpotlightCard, StatCard, StatefulButton, Step, Steps, StickyScrollReveal, StripeAuthButton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TeamCard, TestimonialCard, TextGenerateEffect, Textarea, ThemeModeMultiToggle, ThemeModeToggle, TikTokAuthButton, Timeline, TimelineItem, Toaster3 as Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLoadingBar, TracingBeam, Tracker, TreeView, TypewriterText, UserAvatar, XAuthButton, badgeVariants, buttonGroupVariants, navigationMenuTriggerStyle, toggleVariants, useCountdown, useDirection2 as useDirection, useDisclosure, useFileDialog, useFocusTrap, useFormField, useInterval, useIsMobile, useMeasure, useMergedRef, usePagination, useSidebar };