Components
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.
Loading preview...
import { ResourceGrid, Resource } from "@/components/ui/resource-grid"; // Adjust path as needed
// Sample data for the demo
const resourcesData: Resource[] = [
{
imageSrc: "https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?q=80&w=2070&auto=format&fit=crop",
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://images.unsplash.com/photo-1552664730-d307ca884978?q=80&w=2070&auto=format&fit=crop",
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://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8Zm9vZHxlbnwwfHwwfHx8MA%3D%3D?q=80&w=1974&auto=format&fit=crop",
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>
);
}