'use client'; import type React from 'react'; import { cn } from '@/lib/utils'; import { Home, MapPin, Compass, Building, Heart, HomeIcon, Camera, } from 'lucide-react'; import { Card, CardHeader, CardContent, CardFooter, } from '@/components/ui/card'; import { motion } from 'framer-motion'; interface BentoItem { title: string; description: string; icon: React.ReactNode; status?: string; tags?: string[]; meta?: string; cta?: string; colSpan?: number; hasPersistentHover?: boolean; } interface BentoGridProps { items: BentoItem[]; } const itemsSample: BentoItem[] = [ { title: 'Component Library', meta: '100+ components', description: 'Explore our extensive collection of ready-to-use UI components built with Next.js and Tailwind CSS. Perfect for quickly building beautiful, responsive websites.', icon: , status: 'Popular', tags: ['UI', 'Components', 'Tailwind'], colSpan: 2, hasPersistentHover: true, }, { title: 'Responsive Design', meta: 'All devices', description: 'Every component is fully responsive and works beautifully on all screen sizes, from mobile to desktop.', icon: , status: 'Essential', tags: ['Mobile', 'Desktop'], }, { title: 'Theme Support', description: 'All components support both light and dark modes out of the box, with seamless transitions.', icon: , status: 'New', }, { title: 'Performance Optimized', description: 'Built with performance in mind, ensuring fast load times and smooth interactions.', icon: , meta: 'Lighthouse 100', tags: ['Speed', 'Optimization'], }, { title: 'Accessibility', description: 'All components follow WCAG guidelines and are fully accessible to all users.', icon: , meta: 'WCAG 2.1 AA', tags: ['A11y', 'Inclusive'], }, { title: 'Developer Experience', meta: 'TypeScript', description: 'Clean, well-documented code with TypeScript support for a seamless development experience.', icon: , status: 'Featured', tags: ['DX', 'TypeScript'], }, { title: 'Open Source', meta: 'MIT License', description: 'MVPBlocks is completely free and open-source. Use it for personal and commercial projects without any restrictions or attribution requirements.', icon: , status: 'Free', tags: ['Open Source', 'MIT'], colSpan: 2, }, ]; export default function BentoGrid({ items = itemsSample }: BentoGridProps) { return (

{/* Decorative elements */}

{items.map((item, index) => (

{item.icon}

{item.status || 'Active'}

{item.title} {item.meta && ( {item.meta} )}

{item.description}

{item.tags?.map((tag) => ( #{tag} ))}

{item.cta || 'Explore →'}

))}

); }