{
  "name": "bento-grid",
  "type": "registry:component",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Bento Grid\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport {\n  ArrowUpRight,\n  CheckCircle2,\n  Clock,\n  Mic,\n  Plus,\n  Sparkles,\n  Zap,\n} from \"lucide-react\";\nimport {\n  motion,\n  useMotionValue,\n  useTransform,\n  type Variants,\n} from \"motion/react\";\nimport Link from \"next/link\";\nimport { useEffect, useRef, useState } from \"react\";\nimport Anthropic from \"@/components/icons/anthropic\";\nimport AnthropicDark from \"@/components/icons/anthropic-dark\";\nimport DeepSeek from \"@/components/icons/deepseek\";\nimport Google from \"@/components/icons/gemini\";\nimport MistralAI from \"@/components/icons/mistral\";\nimport OpenAI from \"@/components/icons/open-ai\";\nimport OpenAIDark from \"@/components/icons/open-ai-dark\";\nimport { cn } from \"@/lib/utils\";\n\ninterface BentoItem {\n  id: string;\n  title: string;\n  description: string;\n  icons?: boolean;\n  href?: string;\n  feature?:\n    | \"chart\"\n    | \"counter\"\n    | \"code\"\n    | \"timeline\"\n    | \"spotlight\"\n    | \"icons\"\n    | \"typing\"\n    | \"metrics\";\n  spotlightItems?: string[];\n  timeline?: Array<{ year: string; event: string }>;\n  code?: string;\n  codeLang?: string;\n  typingText?: string;\n  metrics?: Array<{\n    label: string;\n    value: number;\n    suffix?: string;\n    color?: string;\n  }>;\n  statistic?: {\n    value: string;\n    label: string;\n    start?: number;\n    end?: number;\n    suffix?: string;\n  };\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n}\n\nconst bentoItems: BentoItem[] = [\n  {\n    id: \"main\",\n    title: \"Building tomorrow's technology\",\n    description:\n      \"We architect and develop enterprise-grade applications that scale seamlessly with cloud-native technologies and microservices.\",\n    href: \"#\",\n    feature: \"spotlight\",\n    spotlightItems: [\n      \"Microservices architecture\",\n      \"Serverless computing\",\n      \"Container orchestration\",\n      \"API-first design\",\n      \"Event-driven systems\",\n    ],\n    size: \"lg\",\n    className: \"col-span-2 row-span-1 md:col-span-2 md:row-span-1\",\n  },\n  {\n    id: \"stat1\",\n    title: \"AI Agents & Automation\",\n    description:\n      \"Intelligent agents that learn, adapt, and automate complex workflows\",\n    href: \"#\",\n    feature: \"typing\",\n    typingText:\n      \"const createAgent = async () => {\\n  const agent = new AIAgent({\\n    model: 'gpt-4-turbo',\\n    tools: [codeAnalysis, dataProcessing],\\n    memory: new ConversationalMemory()\\n  });\\n\\n  // Train on domain knowledge\\n  await agent.learn(domainData);\\n\\n  return agent;\\n};\",\n    size: \"md\",\n    className: \"col-span-2 row-span-1 col-start-1 col-end-3\",\n  },\n  {\n    id: \"partners\",\n    title: \"Trusted partners\",\n    description:\n      \"Working with the leading AI and cloud providers to deliver cutting-edge solutions\",\n    icons: true,\n    href: \"#\",\n    feature: \"icons\",\n    size: \"md\",\n    className: \"col-span-1 row-span-1\",\n  },\n  {\n    id: \"innovation\",\n    title: \"Innovation timeline\",\n    description:\n      \"Pioneering the future of AI and cloud computing with breakthrough innovations\",\n    href: \"#\",\n    feature: \"timeline\",\n    timeline: [\n      { year: \"2020\", event: \"Launch of Cloud-Native Platform\" },\n      { year: \"2021\", event: \"Advanced AI Integration & LLM APIs\" },\n      { year: \"2022\", event: \"Multi-Agent Systems & RAG Architecture\" },\n      { year: \"2023\", event: \"Autonomous AI Agents & Neural Networks\" },\n      {\n        year: \"2024\",\n        event: \"AGI-Ready Infrastructure & Edge Computing\",\n      },\n    ],\n    size: \"sm\",\n    className: \"col-span-1 row-span-1\",\n  },\n];\n\nconst fadeInUp: Variants = {\n  hidden: { opacity: 0, y: 20 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: {\n      duration: 0.5,\n      ease: \"easeOut\",\n    },\n  },\n};\n\nconst staggerContainer: Variants = {\n  hidden: { opacity: 0 },\n  visible: {\n    opacity: 1,\n    transition: {\n      staggerChildren: 0.15,\n      delayChildren: 0.3,\n    },\n  },\n};\n\nconst SpotlightFeature = ({ items }: { items: string[] }) => (\n  <ul className=\"mt-2 space-y-1.5\">\n    {items.map((item, index) => (\n      <motion.li\n        animate={{ opacity: 1, x: 0 }}\n        className=\"flex items-center gap-2\"\n        initial={{ opacity: 0, x: -10 }}\n        key={`spotlight-${item.toLowerCase().replace(/\\s+/g, \"-\")}`}\n        transition={{ delay: 0.1 * index }}\n      >\n        <CheckCircle2 className=\"h-4 w-4 flex-shrink-0 text-emerald-500 dark:text-emerald-400\" />\n        <span className=\"text-neutral-700 text-sm dark:text-neutral-300\">\n          {item}\n        </span>\n      </motion.li>\n    ))}\n  </ul>\n);\n\nconst CounterAnimation = ({\n  start,\n  end,\n  suffix = \"\",\n}: {\n  start: number;\n  end: number;\n  suffix?: string;\n}) => {\n  const [count, setCount] = useState(start);\n\n  useEffect(() => {\n    const duration = 2000;\n    const frameRate = 1000 / 60;\n    const totalFrames = Math.round(duration / frameRate);\n\n    let currentFrame = 0;\n    const counter = setInterval(() => {\n      currentFrame++;\n      const progress = currentFrame / totalFrames;\n      const easedProgress = 1 - (1 - progress) ** 3;\n      const current = start + (end - start) * easedProgress;\n\n      setCount(Math.min(current, end));\n\n      if (currentFrame === totalFrames) {\n        clearInterval(counter);\n      }\n    }, frameRate);\n\n    return () => clearInterval(counter);\n  }, [start, end]);\n\n  return (\n    <div className=\"flex items-baseline gap-1\">\n      <span className=\"font-bold text-3xl text-neutral-900 dark:text-neutral-100\">\n        {count.toFixed(1).replace(/\\.0$/, \"\")}\n      </span>\n      <span className=\"font-medium text-neutral-900 text-xl dark:text-neutral-100\">\n        {suffix}\n      </span>\n    </div>\n  );\n};\n\nconst ChartAnimation = ({ value }: { value: number }) => (\n  <div className=\"mt-2 h-2 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700\">\n    <motion.div\n      animate={{ width: `${value}%` }}\n      className=\"h-full rounded-full bg-emerald-500 dark:bg-emerald-400\"\n      initial={{ width: 0 }}\n      transition={{ duration: 1.5, ease: \"easeOut\" }}\n    />\n  </div>\n);\n\nconst IconsFeature = () => (\n  <div className=\"mt-4 grid grid-cols-3 gap-4\">\n    <motion.div className=\"group flex flex-col items-center gap-2 rounded-xl border border-neutral-200/50 bg-gradient-to-b from-neutral-100/80 to-neutral-100 p-3 transition-all duration-300 hover:border-neutral-300 dark:border-neutral-700/50 dark:from-neutral-800/80 dark:to-neutral-800 dark:hover:border-neutral-600\">\n      <div className=\"relative flex h-8 w-8 items-center justify-center\">\n        <OpenAI className=\"h-7 w-7 transition-transform dark:hidden\" />\n        <OpenAIDark className=\"hidden h-7 w-7 transition-transform dark:block\" />\n      </div>\n      <span className=\"text-center font-medium text-neutral-600 text-xs group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-neutral-200\">\n        OpenAI\n      </span>\n    </motion.div>\n    <motion.div className=\"group flex flex-col items-center gap-2 rounded-xl border border-neutral-200/50 bg-gradient-to-b from-neutral-100/80 to-neutral-100 p-3 transition-all duration-300 hover:border-neutral-300 dark:border-neutral-700/50 dark:from-neutral-800/80 dark:to-neutral-800 dark:hover:border-neutral-600\">\n      <div className=\"relative flex h-8 w-8 items-center justify-center\">\n        <Anthropic className=\"h-7 w-7 transition-transform dark:hidden\" />\n        <AnthropicDark className=\"hidden h-7 w-7 transition-transform dark:block\" />\n      </div>\n      <span className=\"text-center font-medium text-neutral-600 text-xs group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-neutral-200\">\n        Anthropic\n      </span>\n    </motion.div>\n    <motion.div className=\"group flex flex-col items-center gap-2 rounded-xl border border-neutral-200/50 bg-gradient-to-b from-neutral-100/80 to-neutral-100 p-3 transition-all duration-300 hover:border-neutral-300 dark:border-neutral-700/50 dark:from-neutral-800/80 dark:to-neutral-800 dark:hover:border-neutral-600\">\n      <div className=\"relative flex h-8 w-8 items-center justify-center\">\n        <Google className=\"h-7 w-7 transition-transform\" />\n      </div>\n      <span className=\"text-center font-medium text-neutral-600 text-xs group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-neutral-200\">\n        Google\n      </span>\n    </motion.div>\n    <motion.div className=\"group flex flex-col items-center gap-2 rounded-xl border border-neutral-200/50 bg-gradient-to-b from-neutral-100/80 to-neutral-100 p-3 transition-all duration-300 hover:border-neutral-300 dark:border-neutral-700/50 dark:from-neutral-800/80 dark:to-neutral-800 dark:hover:border-neutral-600\">\n      <div className=\"relative flex h-8 w-8 items-center justify-center\">\n        <MistralAI className=\"h-7 w-7 transition-transform\" />\n      </div>\n      <span className=\"text-center font-medium text-neutral-600 text-xs group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-neutral-200\">\n        Mistral\n      </span>\n    </motion.div>\n    <motion.div className=\"group flex flex-col items-center gap-2 rounded-xl border border-neutral-200/50 bg-gradient-to-b from-neutral-100/80 to-neutral-100 p-3 transition-all duration-300 hover:border-neutral-300 dark:border-neutral-700/50 dark:from-neutral-800/80 dark:to-neutral-800 dark:hover:border-neutral-600\">\n      <div className=\"relative flex h-8 w-8 items-center justify-center\">\n        <DeepSeek className=\"h-7 w-7 transition-transform\" />\n      </div>\n      <span className=\"text-center font-medium text-neutral-600 text-xs group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-neutral-200\">\n        DeepSeek\n      </span>\n    </motion.div>\n    <motion.div className=\"group flex flex-col items-center gap-2 rounded-xl border border-neutral-200/50 bg-gradient-to-b from-neutral-100/80 to-neutral-100 p-3 transition-all duration-300 hover:border-neutral-300 dark:border-neutral-700/50 dark:from-neutral-800/80 dark:to-neutral-800 dark:hover:border-neutral-600\">\n      <div className=\"relative flex h-8 w-8 items-center justify-center\">\n        <Plus className=\"h-6 w-6 text-neutral-600 transition-transform dark:text-neutral-400\" />\n      </div>\n      <span className=\"text-center font-medium text-neutral-600 text-xs group-hover:text-neutral-900 dark:text-neutral-400 dark:group-hover:text-neutral-200\">\n        More\n      </span>\n    </motion.div>\n  </div>\n);\n\nconst TimelineFeature = ({\n  timeline,\n}: {\n  timeline: Array<{ year: string; event: string }>;\n}) => (\n  <div className=\"relative mt-3\">\n    <div className=\"absolute top-0 bottom-0 left-[9px] w-[2px] bg-neutral-200 dark:bg-neutral-700\" />\n    {timeline.map((item) => (\n      <motion.div\n        animate={{ opacity: 1, x: 0 }}\n        className=\"relative mb-3 flex gap-3\"\n        initial={{ opacity: 0, x: -10 }}\n        key={`timeline-${item.year}-${item.event\n          .toLowerCase()\n          .replace(/\\s+/g, \"-\")}`}\n        transition={{\n          delay: (0.15 * Number.parseInt(item.year)) % 10,\n        }}\n      >\n        <div className=\"z-10 mt-0.5 h-5 w-5 flex-shrink-0 rounded-full border-2 border-neutral-300 bg-neutral-100 dark:border-neutral-600 dark:bg-neutral-800\" />\n        <div>\n          <div className=\"font-medium text-neutral-900 text-sm dark:text-neutral-100\">\n            {item.year}\n          </div>\n          <div className=\"text-neutral-600 text-xs dark:text-neutral-400\">\n            {item.event}\n          </div>\n        </div>\n      </motion.div>\n    ))}\n  </div>\n);\n\nconst TypingCodeFeature = ({ text }: { text: string }) => {\n  const [displayedText, setDisplayedText] = useState(\"\");\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const terminalRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (currentIndex < text.length) {\n      const timeout = setTimeout(\n        () => {\n          setDisplayedText((prev) => prev + text[currentIndex]);\n          setCurrentIndex((prev) => prev + 1);\n\n          if (terminalRef.current) {\n            terminalRef.current.scrollTop = terminalRef.current.scrollHeight;\n          }\n        },\n        Math.random() * 30 + 10\n      ); // Random typing speed for realistic effect\n\n      return () => clearTimeout(timeout);\n    }\n  }, [currentIndex, text]);\n\n  // Reset animation when component unmounts and remounts\n  useEffect(() => {\n    setDisplayedText(\"\");\n    setCurrentIndex(0);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div className=\"relative mt-3\">\n      <div className=\"mb-2 flex items-center gap-2\">\n        <div className=\"text-neutral-500 text-xs dark:text-neutral-400\">\n          server.ts\n        </div>\n      </div>\n      <div\n        className=\"h-[150px] overflow-y-auto rounded-md bg-neutral-900 p-3 font-mono text-neutral-100 text-xs dark:bg-black\"\n        ref={terminalRef}\n      >\n        <pre className=\"whitespace-pre-wrap\">\n          {displayedText}\n          <span className=\"animate-pulse\">|</span>\n        </pre>\n      </div>\n    </div>\n  );\n};\n\nconst MetricsFeature = ({\n  metrics,\n}: {\n  metrics: Array<{\n    label: string;\n    value: number;\n    suffix?: string;\n    color?: string;\n  }>;\n}) => {\n  const getColorClass = (color = \"emerald\") => {\n    const colors = {\n      emerald: \"bg-emerald-500 dark:bg-emerald-400\",\n      blue: \"bg-blue-500 dark:bg-blue-400\",\n      violet: \"bg-violet-500 dark:bg-violet-400\",\n      amber: \"bg-amber-500 dark:bg-amber-400\",\n      rose: \"bg-rose-500 dark:bg-rose-400\",\n    };\n    return colors[color as keyof typeof colors] || colors.emerald;\n  };\n\n  return (\n    <div className=\"mt-3 space-y-3\">\n      {metrics.map((metric, index) => (\n        <motion.div\n          animate={{ opacity: 1, y: 0 }}\n          className=\"space-y-1\"\n          initial={{ opacity: 0, y: 10 }}\n          key={`metric-${metric.label.toLowerCase().replace(/\\s+/g, \"-\")}`}\n          transition={{ delay: 0.15 * index }}\n        >\n          <div className=\"flex items-center justify-between text-sm\">\n            <div className=\"flex items-center gap-1.5 font-medium text-neutral-700 dark:text-neutral-300\">\n              {metric.label === \"Uptime\" && <Clock className=\"h-3.5 w-3.5\" />}\n              {metric.label === \"Response time\" && (\n                <Zap className=\"h-3.5 w-3.5\" />\n              )}\n              {metric.label === \"Cost reduction\" && (\n                <Sparkles className=\"h-3.5 w-3.5\" />\n              )}\n              {metric.label}\n            </div>\n            <div className=\"font-semibold text-neutral-700 dark:text-neutral-300\">\n              {metric.value}\n              {metric.suffix}\n            </div>\n          </div>\n          <div className=\"h-1.5 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700\">\n            <motion.div\n              animate={{\n                width: `${Math.min(100, metric.value)}%`,\n              }}\n              className={`h-full rounded-full ${getColorClass(metric.color)}`}\n              initial={{ width: 0 }}\n              transition={{\n                duration: 1.2,\n                ease: \"easeOut\",\n                delay: 0.15 * index,\n              }}\n            />\n          </div>\n        </motion.div>\n      ))}\n    </div>\n  );\n};\n\nfunction AIInput_Voice() {\n  const [submitted, setSubmitted] = useState(false);\n  const [time, setTime] = useState(0);\n  const [isClient, setIsClient] = useState(false);\n  const [isDemo, setIsDemo] = useState(true);\n\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  useEffect(() => {\n    let intervalId: NodeJS.Timeout;\n\n    if (submitted) {\n      intervalId = setInterval(() => {\n        setTime((t) => t + 1);\n      }, 1000);\n    } else {\n      setTime(0);\n    }\n\n    return () => clearInterval(intervalId);\n  }, [submitted]);\n\n  const formatTime = (seconds: number) => {\n    const mins = Math.floor(seconds / 60);\n    const secs = seconds % 60;\n    return `${mins.toString().padStart(2, \"0\")}:${secs\n      .toString()\n      .padStart(2, \"0\")}`;\n  };\n\n  useEffect(() => {\n    if (!isDemo) return;\n\n    let timeoutId: NodeJS.Timeout;\n    const runAnimation = () => {\n      setSubmitted(true);\n      timeoutId = setTimeout(() => {\n        setSubmitted(false);\n        timeoutId = setTimeout(runAnimation, 1000);\n      }, 3000);\n    };\n\n    const initialTimeout = setTimeout(runAnimation, 100);\n    return () => {\n      clearTimeout(timeoutId);\n      clearTimeout(initialTimeout);\n    };\n  }, [isDemo]);\n\n  const handleClick = () => {\n    if (isDemo) {\n      setIsDemo(false);\n      setSubmitted(false);\n    } else {\n      setSubmitted((prev) => !prev);\n    }\n  };\n\n  return (\n    <div className=\"w-full py-4\">\n      <div className=\"relative mx-auto flex w-full max-w-xl flex-col items-center gap-2\">\n        <button\n          className={cn(\n            \"group flex h-16 w-16 items-center justify-center rounded-xl transition-colors\",\n            submitted\n              ? \"bg-none\"\n              : \"bg-none hover:bg-black/10 dark:hover:bg-white/10\"\n          )}\n          onClick={handleClick}\n          type=\"button\"\n        >\n          {submitted ? (\n            <div\n              className=\"pointer-events-auto h-6 w-6 animate-spin cursor-pointer rounded-sm bg-black dark:bg-white\"\n              style={{ animationDuration: \"3s\" }}\n            />\n          ) : (\n            <Mic className=\"h-6 w-6 text-black/70 dark:text-white/70\" />\n          )}\n        </button>\n\n        <span\n          className={cn(\n            \"font-mono text-sm transition-opacity duration-300\",\n            submitted\n              ? \"text-black/70 dark:text-white/70\"\n              : \"text-black/30 dark:text-white/30\"\n          )}\n        >\n          {formatTime(time)}\n        </span>\n\n        <div className=\"flex h-4 w-64 items-center justify-center gap-0.5\">\n          {[...Array(48)].map((_, i) => (\n            <div\n              className={cn(\n                \"w-0.5 rounded-full transition-all duration-300\",\n                submitted\n                  ? \"animate-pulse bg-black/50 dark:bg-white/50\"\n                  : \"h-1 bg-black/10 dark:bg-white/10\"\n              )}\n              key={`voice-bar-${i}`}\n              style={\n                submitted && isClient\n                  ? {\n                      height: `${20 + Math.random() * 80}%`,\n                      animationDelay: `${i * 0.05}s`,\n                    }\n                  : undefined\n              }\n            />\n          ))}\n        </div>\n\n        <p className=\"h-4 text-black/70 text-xs dark:text-white/70\">\n          {submitted ? \"Listening...\" : \"Click to speak\"}\n        </p>\n      </div>\n    </div>\n  );\n}\n\nconst BentoCard = ({ item }: { item: BentoItem }) => {\n  const [isHovered, setIsHovered] = useState(false);\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const rotateX = useTransform(y, [-100, 100], [2, -2]);\n  const rotateY = useTransform(x, [-100, 100], [-2, 2]);\n\n  function handleMouseMove(event: React.MouseEvent<HTMLDivElement>) {\n    const rect = event.currentTarget.getBoundingClientRect();\n    const width = rect.width;\n    const height = rect.height;\n    const mouseX = event.clientX - rect.left;\n    const mouseY = event.clientY - rect.top;\n    const xPct = mouseX / width - 0.5;\n    const yPct = mouseY / height - 0.5;\n    x.set(xPct * 100);\n    y.set(yPct * 100);\n  }\n\n  function handleMouseLeave() {\n    x.set(0);\n    y.set(0);\n    setIsHovered(false);\n  }\n\n  return (\n    <motion.div\n      className=\"h-full\"\n      onHoverEnd={handleMouseLeave}\n      onHoverStart={() => setIsHovered(true)}\n      onMouseMove={handleMouseMove}\n      style={{\n        rotateX,\n        rotateY,\n        transformStyle: \"preserve-3d\",\n      }}\n      transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n      variants={fadeInUp}\n      whileHover={{ y: -5 }}\n    >\n      <Link\n        aria-label={`${item.title} - ${item.description}`}\n        className={`group relative flex h-full flex-col gap-4 rounded-xl border border-neutral-200/60 bg-gradient-to-b from-neutral-50/60 via-neutral-50/40 to-neutral-50/30 p-5 shadow-[0_4px_20px_rgb(0,0,0,0.04)] backdrop-blur-[4px] transition-all duration-500 ease-out before:absolute before:inset-0 before:rounded-xl before:bg-gradient-to-b before:from-white/10 before:via-white/20 before:to-transparent before:opacity-100 before:transition-opacity before:duration-500 after:absolute after:inset-0 after:z-[-1] after:rounded-xl after:bg-neutral-50/70 hover:border-neutral-300/50 hover:bg-gradient-to-b hover:from-neutral-50/60 hover:via-neutral-50/30 hover:to-neutral-50/20 hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] hover:backdrop-blur-[6px] dark:border-neutral-800/60 dark:from-neutral-900/60 dark:via-neutral-900/40 dark:to-neutral-900/30 dark:shadow-[0_4px_20px_rgb(0,0,0,0.2)] dark:hover:border-neutral-700/50 dark:hover:from-neutral-800/60 dark:hover:via-neutral-800/30 dark:hover:to-neutral-800/20 dark:hover:shadow-[0_8px_30px_rgb(0,0,0,0.3)] dark:after:bg-neutral-900/70 dark:before:from-black/10 dark:before:via-black/20 dark:before:to-transparent ${item.className}\n                `}\n        href={item.href || \"#\"}\n        tabIndex={0}\n      >\n        <div\n          className=\"relative z-10 flex h-full flex-col gap-3\"\n          style={{ transform: \"translateZ(20px)\" }}\n        >\n          <div className=\"flex flex-1 flex-col space-y-2\">\n            <div className=\"flex items-center justify-between\">\n              <h3 className=\"font-semibold text-neutral-900 text-xl tracking-tight transition-colors duration-300 group-hover:text-neutral-700 dark:text-neutral-100 dark:group-hover:text-neutral-300\">\n                {item.title}\n              </h3>\n              <div className=\"text-neutral-400 opacity-0 transition-opacity duration-200 group-hover:opacity-100 dark:text-neutral-500\">\n                <ArrowUpRight className=\"h-5 w-5\" />\n              </div>\n            </div>\n\n            <p className=\"text-neutral-600 text-sm tracking-tight dark:text-neutral-400\">\n              {item.description}\n            </p>\n\n            {/* Feature specific content */}\n            {item.feature === \"spotlight\" && item.spotlightItems && (\n              <SpotlightFeature items={item.spotlightItems} />\n            )}\n\n            {item.feature === \"counter\" && item.statistic && (\n              <div className=\"mt-auto pt-3\">\n                <CounterAnimation\n                  end={item.statistic.end || 100}\n                  start={item.statistic.start || 0}\n                  suffix={item.statistic.suffix}\n                />\n              </div>\n            )}\n\n            {item.feature === \"chart\" && item.statistic && (\n              <div className=\"mt-auto pt-3\">\n                <div className=\"mb-1 flex items-center justify-between\">\n                  <span className=\"font-medium text-neutral-700 text-sm dark:text-neutral-300\">\n                    {item.statistic.label}\n                  </span>\n                  <span className=\"font-medium text-neutral-700 text-sm dark:text-neutral-300\">\n                    {item.statistic.end}\n                    {item.statistic.suffix}\n                  </span>\n                </div>\n                <ChartAnimation value={item.statistic.end || 0} />\n              </div>\n            )}\n\n            {item.feature === \"timeline\" && item.timeline && (\n              <TimelineFeature timeline={item.timeline} />\n            )}\n\n            {item.feature === \"icons\" && <IconsFeature />}\n\n            {item.feature === \"typing\" && item.typingText && (\n              <TypingCodeFeature text={item.typingText} />\n            )}\n\n            {item.feature === \"metrics\" && item.metrics && (\n              <MetricsFeature metrics={item.metrics} />\n            )}\n\n            {item.icons && !item.feature && (\n              <div className=\"mt-auto flex flex-wrap items-center gap-4 border-neutral-200/70 border-t pt-4 dark:border-neutral-800/70\">\n                <OpenAI className=\"h-5 w-5 opacity-70 transition-opacity hover:opacity-100 dark:hidden\" />\n                <OpenAIDark className=\"hidden h-5 w-5 opacity-70 transition-opacity hover:opacity-100 dark:block\" />\n                <AnthropicDark className=\"hidden h-5 w-5 opacity-70 transition-opacity hover:opacity-100 dark:block\" />\n                <Anthropic className=\"h-5 w-5 opacity-70 transition-opacity hover:opacity-100 dark:hidden\" />\n                <Google className=\"h-5 w-5 opacity-70 transition-opacity hover:opacity-100\" />\n                <MistralAI className=\"h-5 w-5 opacity-70 transition-opacity hover:opacity-100\" />\n                <DeepSeek className=\"h-5 w-5 opacity-70 transition-opacity hover:opacity-100\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </Link>\n    </motion.div>\n  );\n};\n\nexport default function BentoGrid() {\n  return (\n    <section className=\"relative overflow-hidden bg-white py-24 sm:py-32 dark:bg-black\">\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Bento Grid */}\n        <motion.div\n          className=\"grid gap-6\"\n          initial=\"hidden\"\n          variants={staggerContainer}\n          viewport={{ once: true }}\n          whileInView=\"visible\"\n        >\n          <div className=\"grid gap-6 md:grid-cols-3\">\n            <motion.div className=\"md:col-span-1\" variants={fadeInUp}>\n              <BentoCard item={bentoItems[0]} />\n            </motion.div>\n            <motion.div className=\"md:col-span-2\" variants={fadeInUp}>\n              <BentoCard item={bentoItems[1]} />\n            </motion.div>\n          </div>\n          <div className=\"grid gap-6 md:grid-cols-2\">\n            <motion.div className=\"md:col-span-1\" variants={fadeInUp}>\n              <BentoCard item={bentoItems[2]} />\n            </motion.div>\n            <motion.div\n              className=\"overflow-hidden rounded-xl border border-neutral-200/50 bg-gradient-to-b from-neutral-50/80 to-neutral-50 transition-all duration-300 hover:border-neutral-400/30 hover:shadow-lg hover:shadow-neutral-200/20 md:col-span-1 dark:border-neutral-800/50 dark:from-neutral-900/80 dark:to-neutral-900 dark:hover:border-neutral-600/30 dark:hover:shadow-neutral-900/20\"\n              variants={fadeInUp}\n            >\n              <div className=\"p-5\">\n                <div className=\"mb-4 flex items-center justify-between\">\n                  <h3 className=\"font-semibold text-neutral-900 text-xl tracking-tight dark:text-neutral-100\">\n                    Voice Assistant\n                  </h3>\n                </div>\n                <p className=\"mb-4 text-neutral-600 text-sm tracking-tight dark:text-neutral-400\">\n                  Interact with our AI using natural voice commands. Experience\n                  seamless voice-driven interactions with advanced speech\n                  recognition.\n                </p>\n                <AIInput_Voice />\n              </div>\n            </motion.div>\n          </div>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n",
      "path": "/components/kokonutui/bento-grid.tsx",
      "target": "components/kokonutui/bento-grid.tsx"
    },
    {
      "type": "registry:component",
      "content": "const Anthropic = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    fill=\"#000\"\n    fillRule=\"evenodd\"\n    height=\"1em\"\n    style={{\n      flex: \"none\",\n      lineHeight: 1,\n    }}\n    viewBox=\"0 0 24 24\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>{\"Anthropic\"}</title>\n    <path d=\"M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z\" />\n  </svg>\n);\nexport default Anthropic;\n",
      "path": "/components/icons/anthropic.tsx",
      "target": "components/kokonutui/anthropic.tsx"
    },
    {
      "type": "registry:component",
      "content": "import type { SVGProps } from \"react\";\n\nconst AnthropicDark = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    fill=\"#ffff\"\n    fillRule=\"evenodd\"\n    height=\"1em\"\n    style={{\n      flex: \"none\",\n      lineHeight: 1,\n    }}\n    viewBox=\"0 0 24 24\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>{\"Anthropic\"}</title>\n    <path d=\"M13.827 3.52h3.603L24 20h-3.603l-6.57-16.48zm-7.258 0h3.767L16.906 20h-3.674l-1.343-3.461H5.017l-1.344 3.46H0L6.57 3.522zm4.132 9.959L8.453 7.687 6.205 13.48H10.7z\" />\n  </svg>\n);\nexport default AnthropicDark;\n",
      "path": "/components/icons/anthropic-dark.tsx",
      "target": "components/kokonutui/anthropic-dark.tsx"
    },
    {
      "type": "registry:component",
      "content": "const Gemini = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    height=\"1em\"\n    style={{\n      flex: \"none\",\n      lineHeight: 1,\n    }}\n    viewBox=\"0 0 24 24\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>{\"Gemini\"}</title>\n    <defs>\n      <linearGradient\n        id=\"lobe-icons-gemini-fill\"\n        x1=\"0%\"\n        x2=\"68.73%\"\n        y1=\"100%\"\n        y2=\"30.395%\"\n      >\n        <stop offset=\"0%\" stopColor=\"#1C7DFF\" />\n        <stop offset=\"52.021%\" stopColor=\"#1C69FF\" />\n        <stop offset=\"100%\" stopColor=\"#F0DCD6\" />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M12 24A14.304 14.304 0 000 12 14.304 14.304 0 0012 0a14.305 14.305 0 0012 12 14.305 14.305 0 00-12 12\"\n      fill=\"url(#lobe-icons-gemini-fill)\"\n      fillRule=\"nonzero\"\n    />\n  </svg>\n);\nexport default Gemini;\n",
      "path": "/components/icons/gemini.tsx",
      "target": "components/kokonutui/gemini.tsx"
    },
    {
      "type": "registry:component",
      "content": "const OpenAI = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    height=\"1em\"\n    preserveAspectRatio=\"xMidYMid\"\n    viewBox=\"0 0 256 260\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>OpenAI</title>\n    <path d=\"M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z\" />\n  </svg>\n);\n\nexport default OpenAI;\n",
      "path": "/components/icons/open-ai.tsx",
      "target": "components/kokonutui/open-ai.tsx"
    },
    {
      "type": "registry:component",
      "content": "import type { SVGProps } from \"react\";\n\nconst OpenAIDark = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    height=\"1em\"\n    preserveAspectRatio=\"xMidYMid\"\n    viewBox=\"0 0 256 260\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>OpenAI</title>\n    <path\n      d=\"M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z\"\n      fill=\"#fff\"\n    />\n  </svg>\n);\nexport default OpenAIDark;\n",
      "path": "/components/icons/open-ai-dark.tsx",
      "target": "components/kokonutui/open-ai-dark.tsx"
    },
    {
      "type": "registry:component",
      "content": "const MistralAI = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    height=\"1em\"\n    preserveAspectRatio=\"xMidYMid\"\n    viewBox=\"0 0 256 233\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>Mistral AI</title>\n    <path d=\"M186.18182 0h46.54545v46.54545h-46.54545z\" />\n    <path d=\"M209.45454 0h46.54545v46.54545h-46.54545z\" fill=\"#F7D046\" />\n    <path d=\"M0 0h46.54545v46.54545H0zM0 46.54545h46.54545V93.0909H0zM0 93.09091h46.54545v46.54545H0zM0 139.63636h46.54545v46.54545H0zM0 186.18182h46.54545v46.54545H0z\" />\n    <path d=\"M23.27273 0h46.54545v46.54545H23.27273z\" fill=\"#F7D046\" />\n    <path\n      d=\"M209.45454 46.54545h46.54545V93.0909h-46.54545zM23.27273 46.54545h46.54545V93.0909H23.27273z\"\n      fill=\"#F2A73B\"\n    />\n    <path d=\"M139.63636 46.54545h46.54545V93.0909h-46.54545z\" />\n    <path\n      d=\"M162.90909 46.54545h46.54545V93.0909h-46.54545zM69.81818 46.54545h46.54545V93.0909H69.81818z\"\n      fill=\"#F2A73B\"\n    />\n    <path\n      d=\"M116.36364 93.09091h46.54545v46.54545h-46.54545zM162.90909 93.09091h46.54545v46.54545h-46.54545zM69.81818 93.09091h46.54545v46.54545H69.81818z\"\n      fill=\"#EE792F\"\n    />\n    <path d=\"M93.09091 139.63636h46.54545v46.54545H93.09091z\" />\n    <path\n      d=\"M116.36364 139.63636h46.54545v46.54545h-46.54545z\"\n      fill=\"#EB5829\"\n    />\n    <path\n      d=\"M209.45454 93.09091h46.54545v46.54545h-46.54545zM23.27273 93.09091h46.54545v46.54545H23.27273z\"\n      fill=\"#EE792F\"\n    />\n    <path d=\"M186.18182 139.63636h46.54545v46.54545h-46.54545z\" />\n    <path\n      d=\"M209.45454 139.63636h46.54545v46.54545h-46.54545z\"\n      fill=\"#EB5829\"\n    />\n    <path d=\"M186.18182 186.18182h46.54545v46.54545h-46.54545z\" />\n    <path d=\"M23.27273 139.63636h46.54545v46.54545H23.27273z\" fill=\"#EB5829\" />\n    <path\n      d=\"M209.45454 186.18182h46.54545v46.54545h-46.54545zM23.27273 186.18182h46.54545v46.54545H23.27273z\"\n      fill=\"#EA3326\"\n    />\n  </svg>\n);\nexport default MistralAI;\n",
      "path": "/components/icons/mistral.tsx",
      "target": "components/kokonutui/mistral.tsx"
    },
    {
      "type": "registry:component",
      "content": "const DeepSeek = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    height=\"1em\"\n    style={{\n      flex: \"none\",\n      lineHeight: 1,\n    }}\n    viewBox=\"0 0 24 24\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>DeepSeek</title>\n    <path\n      d=\"M23.748 4.482c-.254-.124-.364.113-.512.234-.051.039-.094.09-.137.136-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.156-.708-.311-.955-.65-.172-.241-.219-.51-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.093.172.187.129.323-.082.28-.18.552-.266.833-.055.179-.137.217-.329.14a5.526 5.526 0 0 1-1.736-1.18c-.857-.828-1.631-1.742-2.597-2.458a11.365 11.365 0 0 0-.689-.471c-.985-.957.13-1.743.388-1.836.27-.098.093-.432-.779-.428-.872.004-1.67.295-2.687.684a3.055 3.055 0 0 1-.465.137 9.597 9.597 0 0 0-2.883-.102c-1.885.21-3.39 1.102-4.497 2.623C.082 8.606-.231 10.684.152 12.85c.403 2.284 1.569 4.175 3.36 5.653 1.858 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.133-.284 4.994-1.86.47.234.962.327 1.78.397.63.059 1.236-.03 1.705-.128.735-.156.684-.837.419-.961-2.155-1.004-1.682-.595-2.113-.926 1.096-1.296 2.746-2.642 3.392-7.003.05-.347.007-.565 0-.845-.004-.17.035-.237.23-.256a4.173 4.173 0 0 0 1.545-.475c1.396-.763 1.96-2.015 2.093-3.517.02-.23-.004-.467-.247-.588zM11.581 18c-2.089-1.642-3.102-2.183-3.52-2.16-.392.024-.321.471-.235.763.09.288.207.486.371.739.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.167-1.361-.802-2.5-1.86-3.301-3.307-.774-1.393-1.224-2.887-1.298-4.482-.02-.386.093-.522.477-.592a4.696 4.696 0 0 1 1.529-.039c2.132.312 3.946 1.265 5.468 2.774.868.86 1.525 1.887 2.202 2.891.72 1.066 1.494 2.082 2.48 2.914.348.292.625.514.891.677-.802.09-2.14.11-3.054-.614zm1-6.44a.306.306 0 0 1 .415-.287.302.302 0 0 1 .2.288.306.306 0 0 1-.31.307.303.303 0 0 1-.304-.308zm3.11 1.596c-.2.081-.399.151-.59.16a1.245 1.245 0 0 1-.798-.254c-.274-.23-.47-.358-.552-.758a1.73 1.73 0 0 1 .016-.588c.07-.327-.008-.537-.239-.727-.187-.156-.426-.199-.688-.199a.559.559 0 0 1-.254-.078.253.253 0 0 1-.114-.358c.028-.054.16-.186.192-.21.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.391.451.462.576.685.914.176.265.336.537.445.848.067.195-.019.354-.25.452z\"\n      fill=\"#4D6BFE\"\n    />\n  </svg>\n);\nexport default DeepSeek;\n",
      "path": "/components/icons/deepseek.tsx",
      "target": "components/kokonutui/deepseek.tsx"
    }
  ]
}