agent-bento-grid

1"use client";
2 
3import { useState, useEffect } from "react";
4import { motion } from "framer-motion";
5import {
6  ChatCircle,
7  Brain,
8  Database,
9  TerminalWindow,
10  Code,
11  FileText,
12  SlackLogo,
13  NotionLogo,
14  Check,
15  CircleNotch,
16  Clock,
17  Minus,
18  Globe,
19} from "@phosphor-icons/react";
20import { cn } from "@/lib/utils";
21 
22/* ──────────────────────────────────────────────────────
23   Niche: AI Agent Workspace
24   Grid: 3 cards top row · 2 cards bottom row
25   Each FeatCard takes: title, description, children (visual)
26────────────────────────────────────────────────────── */
27 
28interface FeatCardProps {
29  title: string;
30  description: string;
31  children: React.ReactNode;
32  /** Optional extra classes for sizing/spanning */
33  className?: string;
34}
35 
36export function FeatCard({ title, description, children, className = "" }: FeatCardProps) {
37  return (
38    <motion.div
39      initial={{ opacity: 0, y: 16 }}
40      animate={{ opacity: 1, y: 0 }}
41      transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
42      className={cn(
43        "group relative flex flex-col gap-2 overflow-hidden rounded-[20px] p-4",
44        "bg-white dark:bg-neutral-900",
45        "shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.04)]",
46        "dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05),0_0_0_1px_rgba(255,255,255,0.05),0_2px_4px_rgba(0,0,0,0.2)]",
47        className
48      )}
49    >
50      <div className="z-10 flex flex-col gap-1.5">
51        <h3 className="font-semibold text-foreground text-sm tracking-tight">{title}</h3>
52        <p className="text-muted-foreground text-xs leading-relaxed max-w-[90%]">{description}</p>
53      </div>
54      <div className="relative mt-2 flex-1 w-full rounded-[14px] overflow-hidden border border-border/50 bg-background/50 dark:bg-neutral-950/50">
55        {children}
56      </div>
57    </motion.div>
58  );
59}
60 
61/* ─────────────────────────────────────────────
62   Card1 – Agent Pipeline
63   Minimalist precise node graph with real-time task flows
64   ───────────────────────────────────────────── */
65 
66// … truncated