"use client"; import React, { useState } from "react"; import { motion } from "framer-motion"; import { Zap, Layers, ShieldCheck, ArrowUpRight, Plus, LayoutGrid, CheckCircle2 } from "lucide-react"; const BENTO_STEPS = [ { id: "step-1", title: "Initialize Database", desc: "Connect your primary data source to begin indexing assets.", icon: , color: "blue" }, { id: "step-2", title: "Security Protocols", desc: "Define access roles and encrypted API keys.", icon: , color: "fuchsia" }, { id: "step-3", title: "Live Deployment", desc: "Launch your workspace to the edge network.", icon: , color: "amber" } ]; export default function BentoOnboardingEmptyState() { const [completedSteps, setCompletedSteps] = useState([]); const toggleStep = (id: string) => { setCompletedSteps(prev => prev.includes(id) ? prev.filter(s => s !== id) : [...prev, id] ); }; const progress = (completedSteps.length / BENTO_STEPS.length) * 100; return (

{/* Background Noise & Glow */}

{/* Header Section */}

Workspace Setup Required

Your engine is offline.

Complete the configuration matrix below to activate your dashboard. Each step unlocks specific modules for your production environment.

{/* Progress Indicator */}

Ready to Launch: {Math.round(progress)}%

{/* Bento Grid */}

{BENTO_STEPS.map((step, idx) => ( toggleStep(step.id)} className="group relative cursor-pointer" >

{completedSteps.includes(step.id) ? : step.icon}

{step.title}

{step.desc}

{completedSteps.includes(step.id) ? "Verified" : "Pending"}

{/* Ambient glow in hover */}

))}

{/* Global Action */}

{progress === 100 ? ( <>Launch Instance ) : ( <>Synthesize Workspace )}

Auto-saving configuration to cloud...

); }