Components
Feature Grid This component, FeatureGrid, is designed to display a title and a collection of features in a responsive grid layout. It's highly reusable, as all content is passed in via props.
Loading preview...
// demo.tsx
import React from "react";
import { FeatureGrid } from "@/components/ui/feature-grid"; // Adjust path as needed
// Data for the feature grid, mirroring the content from the image
const platformFeatures = [
{
iconSrc: "https://tb-static.uber.com/prod/udam-assets/0fc461cc-d4bd-4fef-89c5-70c93242847e.svg",
iconAlt: "Globe icon",
title: "Available globally",
description: "Uber for Business is available in 6,000+ cities across 32 countries, making it easy to scale employee meal solutions to current international offices, or as you grow.",
},
{
iconSrc: "https://tb-static.uber.com/prod/udam-assets/64062703-15a9-497d-88e6-96e14ac7086f.svg",
iconAlt: "Computer monitor icon",
title: "One platform for meals and rides",
description: "Easily manage employee rides and eats on one intuitive platform and avoid dealing with multiple billing systems, vendor invoices, and more.",
},
{
iconSrc: "https://tb-static.uber.com/prod/udam-assets/72e574e2-5962-4162-8d4d-f86d4f45f53f.svg",
iconAlt: "Storefront icon",
title: "Focused on sustainability",
description: "Whether it's multimodal delivery to cut down on emissions, utensil opt-in to reduce plastic waste, or group orders to improve efficiency, we operate with sustainability in mind.",
},
{
iconSrc: "https://tb-static.uber.com/prod/udam-assets/b7ba1d21-81ed-4c78-8aa6-30872763c419.svg",
iconAlt: "Savings icon",
title: "More ways to save",
description: "Set spending limits on meal programs or offer vouchers (you pay only for the amount used). Plus, order by group size to avoid bulk orders. Additionally, sign up for Uber One for added discounts.",
},
];
const FeatureGridDemo = () => {
return (
<div className="w-full bg-background">
<FeatureGrid
title={
<>
Why Uber for Business? The proof is in the <span className="text-primary">platform</span>
</>
}
features={platformFeatures}
/>
</div>
);
};
export default FeatureGridDemo;