All-in-one tools for automation, content management, scheduling, and AI-powered efficiency.
import { BentoGrid, BentoGridItem } from "@/components/ui/bento-grid";
export default function BentoGridDemo() {
const items = [
{
title: "Automated Notifications",
description: "Receive real-time alerts and updates across all your devices.",
header: (
<img
src="https://cdn.21st.dev/assets/mirror/d0/d0ea6d35461526b32bafd0777b72f3b57c75b9cc53684f9aa0b25dc45e9a3624.jpg"
alt="Abstract gradient background for notifications"
className="h-full w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
/>
),
className: "md:col-span-1",
},
{
title: "Content Management System",
description: "Easily organize, edit, and publish your documents.",
header: (
<img
src="https://cdn.21st.dev/assets/mirror/63/6309bd202446be4fcb65bee5b78f6a8af1ee4fd3e45f5c5188de033d0f378eee.jpg"
alt="Person working on a laptop with documents"
className="h-full w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
/>
),
className: "md:col-span-2",
},
{
title: "Intelligent Event Scheduling",
description: "Plan and manage your calendar with smart suggestions.",
header: (
<img
src="https://cdn.21st.dev/assets/mirror/80/80b2bcf4d22f1905998b273ef94b327e0f0b139ef8ee1e45ef2446c065b7c8d1.jpg"
alt="A calendar with events and plans"
className="h-full w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
/>
),
className: "md:col-span-2",
},
{
title: "AI-Powered Insights",
description: "Leverage artificial intelligence to understand your data.",
header: (
<img
src="https://cdn.21st.dev/assets/mirror/64/64bc44a5cfd75c7504c36f226af58973db4230566ccfcb2961675a36889e73e8.jpg"
alt="Abstract visualization of an AI neural network"
className="h-full w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
/>
),
className: "md:col-span-1",
},
];
return (
<div className="w-full p-4">
<BentoGrid>
{items.map((item, i) => (
<BentoGridItem
key={i}
title={item.title}
description={item.description}
header={item.header}
className={item.className}
/>
))}
</BentoGrid>
</div>
);
}