"use client"; /** * @author: @dorianbaffier * @description: Bento Grid * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ArrowUpRight, CheckCircle2, Clock, Mic, Plus, Sparkles, Zap, } from "lucide-react"; import { motion, useMotionValue, useTransform, type Variants, } from "motion/react"; import Link from "next/link"; import { useEffect, useRef, useState } from "react"; import Anthropic from "@/components/icons/anthropic"; import AnthropicDark from "@/components/icons/anthropic-dark"; import DeepSeek from "@/components/icons/deepseek"; import Google from "@/components/icons/gemini"; import MistralAI from "@/components/icons/mistral"; import OpenAI from "@/components/icons/open-ai"; import OpenAIDark from "@/components/icons/open-ai-dark"; import { cn } from "@/lib/utils"; interface BentoItem { id: string; title: string; description: string; icons?: boolean; href?: string; feature?: | "chart" | "counter" | "code" | "timeline" | "spotlight" | "icons" | "typing" | "metrics"; spotlightItems?: string[]; timeline?: Array<{ year: string; event: string }>; code?: string; codeLang?: string; typingText?: string; metrics?: Array<{ label: string; value: number; suffix?: string; color?: string; }>; statistic?: { value: string; label: string; start?: number; end?: number; suffix?: string; }; size?: "sm" | "md" | "lg"; className?: string; } const bentoItems: BentoItem[] = [ { id: "main", title: "Building tomorrow's technology", description: "We architect and develop enterprise-grade applications that scale seamlessly with cloud-native technologies and microservices.", href: "#", feature: "spotlight", spotlightItems: [ "Microservices architecture", "Serverless computing", "Container orchestration", "API-first design", "Event-driven systems", ], size: "lg", className: "col-span-2 row-span-1 md:col-span-2 md:row-span-1", }, { id: "stat1", title: "AI Agents & Automation", description: "Intelligent agents that learn, adapt, and automate complex workflows", href: "#", feature: "typing", typingText: "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};", size: "md", className: "col-span-2 row-span-1 col-start-1 col-end-3", }, { id: "partners", title: "Trusted partners", description: "Working with the leading AI and cloud providers to deliver cutting-edge solutions", icons: true, href: "#", feature: "icons", size: "md", className: "col-span-1 row-span-1", }, { id: "innovation", title: "Innovation timeline", description: "Pioneering the future of AI and cloud computing with breakthrough innovations", href: "#", feature: "timeline", timeline: [ { year: "2020", event: "Launch of Cloud-Native Platform" }, { year: "2021", event: "Advanced AI Integration & LLM APIs" }, { year: "2022", event: "Multi-Agent Systems & RAG Architecture" }, { year: "2023", event: "Autonomous AI Agents & Neural Networks" }, { year: "2024", event: "AGI-Ready Infrastructure & Edge Computing", }, ], size: "sm", className: "col-span-1 row-span-1", }, ]; const fadeInUp: Variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut", }, }, }; const staggerContainer: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.15, delayChildren: 0.3, }, }, }; const SpotlightFeature = ({ items }: { items: string[] }) => (

{item}

); const CounterAnimation = ({ start, end, suffix = "", }: { start: number; end: number; suffix?: string; }) => { const [count, setCount] = useState(start); useEffect(() => { const duration = 2000; const frameRate = 1000 / 60; const totalFrames = Math.round(duration / frameRate); let currentFrame = 0; const counter = setInterval(() => { currentFrame++; const progress = currentFrame / totalFrames; const easedProgress = 1 - (1 - progress) ** 3; const current = start + (end - start) * easedProgress; setCount(Math.min(current, end)); if (currentFrame === totalFrames) { clearInterval(counter); } }, frameRate); return () => clearInterval(counter); }, [start, end]); return (

{count.toFixed(1).replace(/\.0$/, "")} {suffix}

); }; const ChartAnimation = ({ value }: { value: number }) => (

); const IconsFeature = () => (

OpenAI

Anthropic

Google

Mistral

DeepSeek

); const TimelineFeature = ({ timeline, }: { timeline: Array<{ year: string; event: string }>; }) => (

{timeline.map((item) => (

{item.year}

{item.event}

))}

); const TypingCodeFeature = ({ text }: { text: string }) => { const [displayedText, setDisplayedText] = useState(""); const [currentIndex, setCurrentIndex] = useState(0); const terminalRef = useRef(null); useEffect(() => { if (currentIndex < text.length) { const timeout = setTimeout( () => { setDisplayedText((prev) => prev + text[currentIndex]); setCurrentIndex((prev) => prev + 1); if (terminalRef.current) { terminalRef.current.scrollTop = terminalRef.current.scrollHeight; } }, Math.random() * 30 + 10 ); // Random typing speed for realistic effect return () => clearTimeout(timeout); } }, [currentIndex, text]); // Reset animation when component unmounts and remounts useEffect(() => { setDisplayedText(""); setCurrentIndex(0); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

server.ts

          {displayedText}
          |

); }; const MetricsFeature = ({ metrics, }: { metrics: Array<{ label: string; value: number; suffix?: string; color?: string; }>; }) => { const getColorClass = (color = "emerald") => { const colors = { emerald: "bg-emerald-500 dark:bg-emerald-400", blue: "bg-blue-500 dark:bg-blue-400", violet: "bg-violet-500 dark:bg-violet-400", amber: "bg-amber-500 dark:bg-amber-400", rose: "bg-rose-500 dark:bg-rose-400", }; return colors[color as keyof typeof colors] || colors.emerald; }; return (

{metrics.map((metric, index) => (

{metric.label === "Uptime" && } {metric.label === "Response time" && ( )} {metric.label === "Cost reduction" && ( )} {metric.label}

{metric.value} {metric.suffix}

))}

); }; function AIInput_Voice() { const [submitted, setSubmitted] = useState(false); const [time, setTime] = useState(0); const [isClient, setIsClient] = useState(false); const [isDemo, setIsDemo] = useState(true); useEffect(() => { setIsClient(true); }, []); useEffect(() => { let intervalId: NodeJS.Timeout; if (submitted) { intervalId = setInterval(() => { setTime((t) => t + 1); }, 1000); } else { setTime(0); } return () => clearInterval(intervalId); }, [submitted]); const formatTime = (seconds: number) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins.toString().padStart(2, "0")}:${secs .toString() .padStart(2, "0")}`; }; useEffect(() => { if (!isDemo) return; let timeoutId: NodeJS.Timeout; const runAnimation = () => { setSubmitted(true); timeoutId = setTimeout(() => { setSubmitted(false); timeoutId = setTimeout(runAnimation, 1000); }, 3000); }; const initialTimeout = setTimeout(runAnimation, 100); return () => { clearTimeout(timeoutId); clearTimeout(initialTimeout); }; }, [isDemo]); const handleClick = () => { if (isDemo) { setIsDemo(false); setSubmitted(false); } else { setSubmitted((prev) => !prev); } }; return (

{formatTime(time)}

{[...Array(48)].map((_, i) => (

))}

{submitted ? "Listening..." : "Click to speak"}

); } const BentoCard = ({ item }: { item: BentoItem }) => { const [isHovered, setIsHovered] = useState(false); const x = useMotionValue(0); const y = useMotionValue(0); const rotateX = useTransform(y, [-100, 100], [2, -2]); const rotateY = useTransform(x, [-100, 100], [-2, 2]); function handleMouseMove(event: React.MouseEvent) { const rect = event.currentTarget.getBoundingClientRect(); const width = rect.width; const height = rect.height; const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; const xPct = mouseX / width - 0.5; const yPct = mouseY / height - 0.5; x.set(xPct * 100); y.set(yPct * 100); } function handleMouseLeave() { x.set(0); y.set(0); setIsHovered(false); } return ( setIsHovered(true)} onMouseMove={handleMouseMove} style={{ rotateX, rotateY, transformStyle: "preserve-3d", }} transition={{ type: "spring", stiffness: 300, damping: 20 }} variants={fadeInUp} whileHover={{ y: -5 }} >

{item.title}

{item.description}

{/* Feature specific content */} {item.feature === "spotlight" && item.spotlightItems && ( )} {item.feature === "counter" && item.statistic && (

)} {item.feature === "chart" && item.statistic && (

{item.statistic.label} {item.statistic.end} {item.statistic.suffix}

)} {item.feature === "timeline" && item.timeline && ( )} {item.feature === "icons" && } {item.feature === "typing" && item.typingText && ( )} {item.feature === "metrics" && item.metrics && ( )} {item.icons && !item.feature && (

)}

); }; export default function BentoGrid() { return (

{/* Bento Grid */}

Voice Assistant

Interact with our AI using natural voice commands. Experience seamless voice-driven interactions with advanced speech recognition.

); }

Bento Grid

Instalação

Dependências