feat(docs): add animated product website

docs/components/transfer-flow.tsx

@@ -0,0 +1,108 @@
+import { Icon, type IconName } from "@/components/icons";
+
+const steps: Array<{
+  number: string;
+  icon: IconName;
+  title: string;
+  text: string;
+}> = [
+  {
+    number: "01",
+    icon: "folder",
+    title: "Pick anything",
+    text: "Choose one file, a whole batch, or a complete folder. Its structure stays intact.",
+  },
+  {
+    number: "02",
+    icon: "qr",
+    title: "Pass a tiny invitation",
+    text: "Share a QR code, tap an NFC tag, or send a portable .vnd invitation file.",
+  },
+  {
+    number: "03",
+    icon: "shield",
+    title: "Let them knock",
+    text: "Every new receiver asks first by default. You choose approve or refuse.",
+  },
+  {
+    number: "04",
+    icon: "verified",
+    title: "Stream and verify",
+    text: "Files move over an authenticated encrypted connection and are verified as they arrive.",
+  },
+  {
+    number: "05",
+    icon: "stop",
+    title: "Close the door",
+    text: "Follow each receiver, cancel in progress, or stop sharing to revoke the invitation.",
+  },
+];
+
+export function TransferFlow() {
+  return (
+    <div className="flow-layout">
+      <div className="flow-visual" aria-hidden="true">
+        <div className="flow-visual-glow" />
+        <div className="flow-device flow-device-sender">
+          <span className="flow-device-camera" />
+          <div className="flow-device-content">
+            <span className="flow-mini-label">SELECTED</span>
+            <div className="flow-file-stack">
+              <span><Icon name="file" /></span>
+              <span><Icon name="file" /></span>
+              <span><Icon name="file" /></span>
+            </div>
+            <strong>Project files</strong>
+            <small>18 items · 248 MB</small>
+          </div>
+        </div>
+        <svg className="flow-track" viewBox="0 0 480 600">
+          <defs>
+            <linearGradient id="flow-gradient" x1="90" y1="80" x2="401" y2="520" gradientUnits="userSpaceOnUse">
+              <stop stopColor="#C778FF" />
+              <stop offset="0.5" stopColor="#A855F7" />
+              <stop offset="1" stopColor="#7628EA" />
+            </linearGradient>
+            <filter id="flow-blur" x="-50%" y="-50%" width="200%" height="200%">
+              <feGaussianBlur stdDeviation="18" />
+            </filter>
+          </defs>
+          <path className="flow-track-shadow" d="M132 141c216 14 240 88 153 159-89 73-43 157 81 160" />
+          <path className="flow-track-base" d="M132 141c216 14 240 88 153 159-89 73-43 157 81 160" />
+          <path className="flow-track-energy" d="M132 141c216 14 240 88 153 159-89 73-43 157 81 160" />
+          <circle className="flow-moving-drop" cx="0" cy="0" r="11" fill="url(#flow-gradient)" />
+          <circle className="flow-moving-halo" cx="0" cy="0" r="24" fill="#A855F7" opacity="0.18" filter="url(#flow-blur)" />
+          <g className="flow-gate">
+            <rect x="197" y="274" width="88" height="50" rx="17" fill="#FFFCFF" stroke="#D8B4FE" />
+            <path d="m241 286 12 5v8.5c0 7.2-5.1 12.1-12 14.2-6.9-2.1-12-7-12-14.2V291Z" fill="url(#flow-gradient)" />
+            <path d="m235.5 299 3.5 3.5 7.5-8" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" />
+          </g>
+        </svg>
+        <div className="flow-device flow-device-receiver">
+          <span className="flow-device-camera" />
+          <div className="flow-device-content flow-received-content">
+            <span className="flow-complete-ring"><Icon name="check" /></span>
+            <strong>All received</strong>
+            <small>18 items verified</small>
+          </div>
+        </div>
+        <span className="flow-annotation flow-annotation-one">E2E</span>
+        <span className="flow-annotation flow-annotation-two">VERIFIED</span>
+      </div>
+      <ol className="flow-steps">
+        {steps.map((step) => (
+          <li key={step.number} className="flow-step">
+            <div className="flow-step-icon">
+              <Icon name={step.icon} />
+            </div>
+            <div>
+              <span className="flow-step-number">{step.number}</span>
+              <h3>{step.title}</h3>
+              <p>{step.text}</p>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}