Components
Loading preview...
Feature Grid A responsive grid component designed to showcase a list of features or services. Each item in the grid consists of an image, a title, and a description, presented in a clean, card-like format. It's fully responsive, theme-adaptive, and includes a subtle animation on hover to enhance user interaction.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/feature-gridimport { FeatureGrid, type Feature } from "@/components/ui/feature-grid";
// Data for the feature grid, mimicking the provided image
const platformFeatures: Feature[] = [
{
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-OVVSrD4GRutENdVA3QzYLe5KXwBWVq.png&w=320&q=75",
imageAlt: "Meal programs icon",
title: "Meal programs",
description: "Create weekly or monthly meal stipends for your employees, who can then order on Uber Eats. It's easy to set restrictions for time of day, location, and meal budget.",
href: "#",
},
{
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-N7V0aMs36OlOl3QUJEzHT6diM5hJ6Z.png&w=320&q=75",
imageAlt: "Meal planning icon",
title: "Meal planning",
description: "Put in-office meals on autopilot for your whole team. Use the meal planning feature on UberEats.com to schedule recurring group orders and have your employees add their favorite options.",
href: "#",
},
{
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ptreaSKDFQqhY7oF7Qw6s18YOwh68e.png&w=320&q=75",
imageAlt: "Gift cards icon",
title: "Gift cards",
description: "Show your appreciation for clients and employees with Uber gift cards for rides and meals that will never expire.",
href: "#",
},
{
imageSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-l7sGnL4PG73upUHUi2mGVGegEvkNDs.png&w=320&q=75",
imageAlt: "Vouchers icon",
title: "Vouchers",
description: "Cover the cost of a single meal by sending employees or clients a meal voucher to be redeemed on Uber Eats. You only pay for what is used.",
href: "#",
},
];
// The demo component that showcases the FeatureGrid
const FeatureGridDemo = () => {
return (
<div className="w-full max-w-6xl mx-auto p-4 md:p-8">
<div className="mb-10 text-center">
<h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
One platform gives you the control to provide meals in multiple ways
</h1>
<p className="mt-4 max-w-3xl mx-auto text-lg text-muted-foreground">
Whether you want to give employees a monthly meal stipend or cover the cost of a single meal, our flexible suite of solutions has you covered.
</p>
</div>
<FeatureGrid features={platformFeatures} />
</div>
);
};
export default FeatureGridDemo;