'use client' import { useState, useEffect } from 'react' // Animated product mini-previews shown framed on the landing hero, as if // they were small screenshots of the real app. They intentionally use the // app's own design tokens (bg-card, text-foreground, etc.) so they read as // the actual product UI sitting inside the editorial marketing page. function IcoUsers({ className }: { className?: string }) { return } function IcoTask({ className }: { className?: string }) { return } function IcoLock({ className }: { className?: string }) { return } function IcoDoc({ className }: { className?: string }) { return } function IcoEye({ className }: { className?: string }) { return } function IcoPin({ className }: { className?: string }) { return } export function MiniMemberTable() { const [activeRow, setActiveRow] = useState(0) const members = [ { name: 'Alex Chen', tier: 'PLUS', status: 'current' }, { name: 'Jordan Mills', tier: 'BASIC', status: 'current' }, { name: 'Sam Rivera', tier: 'PLUS', status: 'late' }, { name: 'Casey Wong', tier: 'BASIC', status: 'current' }, ] useEffect(() => { const t = setInterval(() => setActiveRow(p => (p + 1) % members.length), 2000) return () => clearInterval(t) }, [members.length]) return (
Members {members.length}
{members.map((m, i) => (
{m.name.split(' ').map(n => n[0]).join('')}
{m.name} {m.tier}
))}
) } export function MiniTaskList() { const [checkedIndex, setCheckedIndex] = useState(-1) const tasks = [ { title: 'Clean laser cutter lens', area: 'Laser' }, { title: 'Restock filament', area: '3D Print' }, { title: 'Update wiki docs', area: 'Admin' }, ] useEffect(() => { const t = setInterval(() => { setCheckedIndex(p => (p >= tasks.length - 1 ? -1 : p + 1)) }, 1500) return () => clearInterval(t) }, [tasks.length]) return (
Tasks +
{tasks.map((t, i) => (
{i <= checkedIndex && ( )}
{t.title} {t.area}
))}
) } export function MiniPayments() { const [linking, setLinking] = useState(false) useEffect(() => { const t = setInterval(() => setLinking(p => !p), 2000) return () => clearInterval(t) }, []) return (
Payments 2 unlinked
PAYPAL $50.00 {linking ? 'LINKED' : '+ LINK'}
VENMO $75.00 LINKED
) } export function MiniOps() { const [revealedIndex, setRevealedIndex] = useState(-1) const [tab, setTab] = useState<'secrets' | 'kb'>('secrets') const secrets = [ { label: 'WiFi Password', area: 'Network' }, { label: 'Alarm Code', area: 'Security' }, { label: 'PayPal API Key', area: 'Finance' }, ] const kb = [ { title: 'Open / Close Procedure', area: 'Ops', pinned: true }, { title: 'Laser Cutter Safety', area: 'Laser', pinned: false }, { title: 'Board Meeting Runbook', area: 'Admin', pinned: true }, ] useEffect(() => { if (tab !== 'secrets') return const t = setInterval(() => { setRevealedIndex(p => (p >= secrets.length - 1 ? -1 : p + 1)) }, 1800) return () => clearInterval(t) }, [tab, secrets.length]) useEffect(() => { const t = setInterval(() => { setTab(p => (p === 'secrets' ? 'kb' : 'secrets')) setRevealedIndex(-1) }, 5000) return () => clearInterval(t) }, []) return (
Ops
{(['secrets', 'kb'] as const).map(t => ( ))}
{tab === 'secrets' && secrets.map((s, i) => (
{s.label} {s.area}
{i === revealedIndex ? ••••1234 : reveal}
))} {tab === 'kb' && kb.map((k) => (
{k.title} {k.pinned && } {k.area}
))}
) } export function MiniDashboard() { const [tick, setTick] = useState(0) useEffect(() => { const t = setInterval(() => setTick(p => p + 1), 3000) return () => clearInterval(t) }, []) const members = 47 + (tick % 3) return (
Members

{members}

Tasks

12

Due this week 3 late
{Array.from({ length: 12 }).map((_, i) => (
))}
) } // Curated cluster used on the landing hero. export function HeroPreviewCluster() { return (
) }