Bento Grid

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Bento Grid
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import {
14  ArrowUpRight,
15  CheckCircle2,
16  Clock,
17  Mic,
18  Plus,
19  Sparkles,
20  Zap,
21} from "lucide-react";
22import {
23  motion,
24  useMotionValue,
25  useTransform,
26  type Variants,
27} from "motion/react";
28import Link from "next/link";
29import { useEffect, useRef, useState } from "react";
30import Anthropic from "@/components/icons/anthropic";
31import AnthropicDark from "@/components/icons/anthropic-dark";
32import DeepSeek from "@/components/icons/deepseek";
33import Google from "@/components/icons/gemini";
34import MistralAI from "@/components/icons/mistral";
35import OpenAI from "@/components/icons/open-ai";
36import OpenAIDark from "@/components/icons/open-ai-dark";
37import { cn } from "@/lib/utils";
38 
39interface BentoItem {
40  id: string;
41  title: string;
42  description: string;
43  icons?: boolean;
44  href?: string;
45  feature?:
46    | "chart"
47    | "counter"
48    | "code"
49    | "timeline"
50    | "spotlight"
51    | "icons"
52    | "typing"
53    | "metrics";
54  spotlightItems?: string[];
55  timeline?: Array<{ year: string; event: string }>;
56  code?: string;
57  codeLang?: string;
58  typingText?: string;
59  metrics?: Array<{
60    label: string;
61    value: number;
62    suffix?: string;
63    color?: string;
64  }>;
65  statistic?: {
66    value: string;
67    label: string;
68    start?: number;
69    end?: number;
70    suffix?: string;
71  };
72  size?: "sm" | "md" | "lg";
73  className?: string;
74}
75 
76const bentoItems: BentoItem[] = [
77  {
78    id: "main",
79    title: "Building tomorrow's technology",
80    description:
81      "We architect and develop enterprise-grade applications that scale seamlessly with cloud-native technologies and microservices.",
82    href: "#",
83    feature: "spotlight",
84    spotlightItems: [
85      "Microservices architecture",
86      "Serverless computing",
87      "Container orchestration",
88      "API-first design",
89      "Event-driven systems",
90    ],
91    size: "lg",
92    className: "col-span-2 row-span-1 md:col-span-2 md:row-span-1",
93  },
94  {
95    id: "stat1",
96    title: "AI Agents & Automation",
97    description:
98      "Intelligent agents that learn, adapt, and automate complex workflows",
99    href: "#",
100    feature: "typing",
101    typingText:
102// … truncated