Resource Grid A responsive grid component designed to display a collection of resources, such as articles, guides, or case studies. Each item in the grid is presented as a card with an image, title, description, and a call-to-action link. The component features subtle hover animations to enhance user interaction and is fully theme-adaptive using shadcn/ui CSS variables.
import { ResourceGrid, Resource } from "@/components/ui/resource-grid"; // Adjust path as needed
// Sample data for the demo
const resourcesData: Resource[] = [
{
imageSrc: "https://cdn.21st.dev/assets/mirror/d9/d9e1ca792d565a030b0a060d495dfb00df76ada83a59addbf4060529b47869c5.jpg",
title: "Simplify team meals with group orders",
description: "See how group orders with Uber Eats help bring camaraderie back to the table—whether in the office or at home.",
linkText: "Read the post",
linkHref: "#",
},
{
imageSrc: "https://cdn.21st.dev/assets/mirror/37/376b2c0e088cd01068241c586198de20bb656e0108ff96d3e9c3691eae80fef7.jpg",
title: "Retain top talent with meal programs",
description: "Discover how meal programs can help revitalize employees and increase engagement, one meal at a time.",
linkText: "Learn more",
linkHref: "#",
},
{
imageSrc: "https://cdn.21st.dev/assets/mirror/60/6003a8062a0ea3d92fcd007989baac580efb333cbf7fcd9f607a78c538099bad.jpg",
title: "Stand out with One membership",
description: "Read about how an Uber One membership gives your business and employees savings and members-only perks.",
linkText: "View our guide",
linkHref: "#",
},
];
// Demo component to showcase the ResourceGrid
export default function ResourceGridDemo() {
return (
<div className="bg-background">
<ResourceGrid
title="Explore more resources"
resources={resourcesData}
/>
</div>
);
}