st to overly polished digital experiences.", }, { id: 3, title: "Geometric Patterns", description: "Structured chaos in visual form.", icon: , color: "bg-green-200", expandedContent: "Geometric patterns form the backbone of our neo-brutalist approach. We use bold shapes, grids, and unexpected arrangements to create visual interest and guide the user's eye through the interface in surprising ways.", }, { id: 4, title: "Playful Interactions", description: "Unexpected moments of delight.", icon: , color: "bg-purple-200", expandedContent: "We believe digital experiences should be fun. Our interfaces incorporate playful interactions, surprising animations, and unexpected elements that bring joy to everyday tasks and keep users engaged with your product.", }, { id: 5, title: "Typographic Contrast", description: "Bold statements through text.", icon: , color: "bg-pink-200", expandedContent: "Typography plays a central role in our neo-brutalist designs. We use dramatic size contrasts, unexpected placements, and bold font choices to create hierarchy and visual interest that commands attention and improves readability.", }, ]; return (

{items.map((item, index) => ( setExpandedId(item.id)} whileHover={{ y: -5, scale: 1.02 }} transition={{ type: "spring", stiffness: 300, damping: 20 }} >

{index === 0 && (

)} {item.icon} {item.title} {item.description}

{/* Popup indication dots */}

))}

{expandedId && ( <> setExpandedId(null)} /> item.id === expandedId)?.color} fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-8 rounded-none border-4 bo

RetroUI Bento Grids Blocks

Bento Grid 01