"use client"; import React from "react"; import { motion } from "framer-motion"; import { BarChart3, Users, Zap, Globe } from "lucide-react"; export default function Classic4BlockBento() { const items = [ { title: "Real-time Analytics", value: "+148%", description: "Monitor your growth with live data tracking.", icon: BarChart3, color: "text-blue-500", bg: "bg-blue-500/10", }, { title: "Global Reach", value: "190+", description: "Expand your business to countries worldwide.", icon: Globe, color: "text-emerald-500", bg: "bg-emerald-500/10", }, { title: "System Speed", value: "45ms", description: "Experience lightning-fast response times.", icon: Zap, color: "text-amber-500", bg: "bg-amber-500/10", }, { title: "Active Users", value: "82k", description: "Join a growing community of professionals.", icon: Users, color: "text-purple-500", bg: "bg-purple-500/10", }, ]; return (

{/* Responsive Bento Grid: Forced 1 col on small widths, 2x2 on larger */}

{items.map((item, index) => ( {/* Top Row: Icon & Badge */}

{/* Bottom Content */}

{item.value}

{item.title}

{item.description}

{/* Subtle hover gradient */}

))}

); }