// hardware.jsx — Raseed onboarding · hardware illustrations & diagrams
// Exports: BridgeDevice, TileDevice, POSDevice, PrinterDevice, BridgeDiagram,
// TileDiagram, PhoneTap, Confetti
// NOTE: Tile/Bridge art are tasteful placeholders — swap in real 2D product
// renders when supplied. Brand-faced so they read correctly in context.
// ── Print Bridge: a small USB pass-through adapter ──────────────
function BridgeDevice({ w = 150, dark = false }) {
const body = dark ? '#1a1a14' : '#27271f';
return (
);
}
// ── The Tile: counter NFC pad, raseed-faced, optional live ripple ──
function TileDevice({ w = 150, glow = false, ripple = false }) {
return (
);
}
// ── POS terminal (card machine) ──
function POSDevice({ w = 90, dark = false }) {
return (
);
}
// ── Thermal printer ──
function PrinterDevice({ w = 110, dark = false }) {
return (
);
}
// ── Step 1 diagram: POS → Bridge → Printer ──
function BridgeDiagram({ dark = false }) {
const line = dark ? 'rgba(255,255,255,0.22)' : '#d1d1c8';
const lbl = dark ? 'rgba(255,255,255,0.55)' : '#72726a';
return (
);
}
// ── Step 4 diagram: Tile on counter beside terminal ──
function TileDiagram({ dark = false, ripple = true }) {
const lbl = dark ? 'rgba(255,255,255,0.55)' : '#72726a';
const counter = dark ? 'rgba(255,255,255,0.07)' : '#f4f4ef';
const counterEdge = dark ? 'rgba(255,255,255,0.12)' : '#e8e8e1';
return (
);
}
// ── Step 5: phone tapping the Tile (NFC) ──
function PhoneTap({ dark = false }) {
return (
);
}
// ── Confetti for the success screen ──
function Confetti({ count = 28 }) {
const colors = ['#15803d', '#4ade80', '#86efac', '#f59e0b', '#22c55e', '#bbf7d0'];
const pieces = React.useMemo(() => Array.from({ length: count }).map((_, i) => ({
left: Math.random() * 100, delay: Math.random() * 0.5, dur: 1.8 + Math.random() * 1.4,
color: colors[i % colors.length], size: 6 + Math.random() * 6, rot: Math.random() * 360,
drift: (Math.random() - 0.5) * 60,
})), [count]);
return (
{pieces.map((p, i) => (
))}