4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T9ead,"use client"; import { motion, useInView } from "motion/react"; import { useRef, type ReactNode } from "react"; type IconProps = { className?: string; }; type MessagingApp = { name: string; ring: 1 | 2 | 3; slot: number; direction: "normal" | "reverse"; duration: number; icon: (props: IconProps) => ReactNode; }; type ActionItem = { label: string; icon: (props: IconProps) => ReactNode; }; type Platform = { name: string; icon: (props: IconProps) => ReactNode; active?: boolean; }; const messagingApps: MessagingApp[] = [ { name: "Slack", ring: 3, slot: 0, direction: "normal", duration: 18, icon: SlackPlaceholderIcon }, { name: "Telegram", ring: 2, slot: 1, direction: "reverse", duration: 16, icon: TelegramPlaceholderIcon }, { name: "WhatsApp", ring: 3, slot: 2, direction: "normal", duration: 18, icon: WhatsAppPlaceholderIcon }, { name: "Gmail", ring: 2, slot: 3, direction: "reverse", duration: 16, icon: GmailPlaceholderIcon }, ]; const actionItems: ActionItem[] = [ { label: "Inbox cleanup and summarisation", icon: MailIcon }, { label: "Calendar scheduling", icon: CalendarIcon }, { label: "Smart reminders", icon: BellIcon }, { label: "Tools and workflow automations", icon: SettingsIcon }, ]; const platforms: Platform[] = [ { name: "macOS", icon: AppleIcon, active: true }, { name: "Windows", icon: WindowsIcon }, { name: "Linux", icon: LinuxIcon }, { name: "Docker", icon: DockerIcon }, { name: "Source", icon: CodeIcon }, ]; const installCommands = [ "$ pipx install openclaw", "$ openclaw login", "✓ Logged in as michael@acme.com", "$ openclaw connect slack", "✓ Connected to Slack", "$ openclaw start", "OpenClaw is ready.", ]; const savingsCharts = [ { label: "Without OpenClaw", value: "12.4h", note: "weekly admin load", color: "#a1a1aa", data: [18, 21, 19, 23, 26, 24, 28], }, { label: "With OpenClaw", value: "3.8h", note: "after automation", color: "#C62828", data: [18, 15, 13, 11, 8, 6, 5], }, ]; function getRingSize(ring: number) { return ring === 1 ? 144 : ring === 2 ? 212 : 284; } function OpenClawMark({ className }: IconProps) { return ( ); } function FingerprintIcon({ className }: IconProps) { return ( ); } function WhatsAppPlaceholderIcon({ className }: IconProps) { return ( ); } function TelegramPlaceholderIcon({ className }: IconProps) { return ( ); } function GmailPlaceholderIcon({ className }: IconProps) { return ( ); } function SlackPlaceholderIcon({ className }: IconProps) { return ( ); } function MailIcon({ className }: IconProps) { return ; } function CalendarIcon({ className }: IconProps) { return ; } function BellIcon({ className }: IconProps) { return ; } function SettingsIcon({ className }: IconProps) { return ; } function LockIcon({ className }: IconProps) { return ; } function AppleIcon({ className }: IconProps) { return ; } function WindowsIcon({ className }: IconProps) { return ; } function LinuxIcon({ className }: IconProps) { return ; } function DockerIcon({ className }: IconProps) { return ; } function CodeIcon({ className }: IconProps) { return ; } function OpenClawOrbit({ isActive }: { isActive: boolean }) { return (

{[72, 106, 142].map((size) => (

))}

{messagingApps.map((app, index) => { const Icon = app.icon; const ringSize = getRingSize(app.ring); const initialRotation = app.slot * 90 + (app.ring === 2 ? 28 : -18); const travel = app.direction === "normal" ? 360 : -360; return ( ); })}

); } function AssistantChat() { return (

Harshitlog 10:30 AM

Hey OpenClaw, clean up my inbox, flag urgent messages, and schedule a 30-minute sync with Sam tomorrow.

OpenClaw 10:30 AM

Done. I cleaned your inbox, flagged 5 urgent emails, and scheduled the sync for 10:00 AM.

); } function SecurityPanel({ isActive }: { isActive: boolean }) { const securitySlots = [ { id: "slot-1", row: "top" }, { id: "slot-2", row: "top" }, { id: "slot-3", row: "top" }, { id: "slot-4", row: "top" }, { id: "slot-5", row: "bottom" }, { id: "slot-6", row: "bottom" }, { id: "slot-7", row: "bottom" }, { id: "slot-8", row: "bottom" }, ]; const fingerprintSlots = [1, 6, 4, 3]; const lockSlots = [6, 0, 7, 2]; return (

{securitySlots.map((slot, index) => ( {fingerprintSlots.includes(index) && ( )} {lockSlots.includes(index) && ( )} ))}

); } function ActionBeam({ index }: { index: number }) { return ( ); } function ActionList() { return (

{actionItems.map((item, index) => { const Icon = item.icon; return ( {index < actionItems.length - 1 && } {item.label} ); })}

); } function InstallPanel() { return (

{platforms.map((platform) => { const Icon = platform.icon; return (

); })}

{installCommands.map((line, index) => ( {line} ))}

); } function MiniAreaChart({ chart, index }: { chart: (typeof savingsCharts)[number]; index: number }) { const max = Math.max(...chart.data); const min = Math.min(...chart.data); const range = Math.max(max - min, 1); const points = chart.data.map((value, pointIndex) => { const x = (pointIndex / (chart.data.length - 1)) * 100; const y = 72 - ((value - min) / range) * 46; return { x, y }; }); const linePath = points.map((point, pointIndex) => `${pointIndex === 0 ? "M" : "L"}${point.x},${point.y}`).join(" "); const areaPath = `${linePath} L100,82 L0,82 Z`; const gradientId = `openclaw-savings-gradient-${index}`; return (

{chart.label}

{chart.value}

{chart.note}

); } function SavingsPanel() { return (

{savingsCharts.map((chart, index) => ( ))}

); } const featureCards = [ { title: "Works in the apps you already use", description: "Chat with OpenClaw in WhatsApp, Telegram, Slack, or over email.", visual: (isActive: boolean) => , }, { title: "Personal assistant that takes actions", description: "Ask in natural language. OpenClaw gets things done across your apps and tools.", visual: () => , }, { title: "Private and secure", description: "Local-first by default, with clear permissions and audit trails you can review.", visual: (isActive: boolean) => , }, { title: "Automate busywork", description: "Let OpenClaw handle repetitive tasks so you can focus on what matters.", visual: () => , }, { title: "Get started with one command", description: "Install in seconds and connect your apps.", visual: () => , }, { title: "Save hours every week", description: "OpenClaw handles the noise so you can get more done, every day.", visual: () => , }, ]; export default function BentoGridThree() { const sectionRef = useRef(null); const isInView = useInView(sectionRef, { amount: 0.2 }); return (

OpenClaw at a glance

{featureCards.map((card, index) => (

{card.visual(isInView)}

{card.title}

{card.description}

))}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@solaceui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/bento-grid/three/index.tsx","content":"$51","type":"registry:component","target":"components/bento-grid-3.tsx"}],"className":"h-[70svh] min-h-80"}]]}]