import { BarChart3, Cloud, GitBranch, ShieldCheck, Sparkles, Zap } from "lucide-react"import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid"export default function BentoGridDemo() {  return (    <BentoGrid className="w-full max-w-2xl md:auto-rows-[8rem]">      <BentoGridItem        className="md:col-span-2"        title="Realtime insights"        description="Understand what is changing across your workspace at a glance."        header={          <div className="flex h-12 items-center justify-between rounded-lg bg-gradient-to-br from-violet-500/20 via-fuchsia-500/10 to-transparent px-4">            <BarChart3 className="size-6 text-violet-600" />            <span className="text-sm font-medium text-muted-foreground">+24.8%</span>          </div>        }        icon={<Sparkles className="size-4 text-violet-500" />}      />      <BentoGridItem        title="Fast setup"        description="Connect your tools and start shipping in minutes."        header={          <div className="flex h-12 items-center rounded-lg bg-gradient-to-br from-amber-500/20 to-orange-500/5 px-4">            <Zap className="size-6 text-amber-600" />          </div>        }        icon={<GitBranch className="size-4 text-amber-500" />}      />      <BentoGridItem        title="Secure by default"        description="Keep every project protected with sensible access controls."        header={          <div className="flex h-12 items-center rounded-lg bg-gradient-to-br from-emerald-500/20 to-teal-500/5 px-4">            <ShieldCheck className="size-6 text-emerald-600" />          </div>        }        icon={<ShieldCheck className="size-4 text-emerald-500" />}      />      <BentoGridItem        className="md:col-span-2"        title="Works wherever you do"        description="A reliable foundation for teams building products across the web."        header={          <div className="flex h-12 items-center rounded-lg bg-gradient-to-br from-sky-500/20 via-cyan-500/10 to-transparent px-4">            <Cloud className="size-6 text-sky-600" />          </div>        }        icon={<Cloud className="size-4 text-sky-500" />}      />    </BentoGrid>  )}