Components
Loading preview...
All-in-one tools for automation, content management, scheduling, and AI-powered efficiency.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/bento-gridimport { 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://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0"
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://images.unsplash.com/photo-1542435503-956c469947f6?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0"
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://images.unsplash.com/photo-1506784983877-45594efa4cbe?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0"
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://plus.unsplash.com/premium_photo-1683121718643-fb18d2668d53?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fGFpfGVufDB8fDB8fHww"
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>
);
}