Components
Business Features The BusinessFeatures component is designed to showcase a list of features or services in a clean, grid-based layout. It features a main title and a set of items, each represented by a circular image and a corresponding label. It includes a subtle, staggered fade-in animation for the feature items to enhance visual appeal as they enter the viewport.
Loading preview...
import React from "react";
import { BusinessFeatures } from "@/components/ui/business-features";
// Sample data for the demo
const uberFeatures = {
title: "How companies leverage Uber for Business",
features: [
{
imgSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-SJxXSQiZvg2rhqvpw6hANLsmgfO4tX.png&w=1000&q=75",
label: "Business travel",
altText: "Illustration of a person with luggage at an airport",
},
{
imgSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-ECjjlDKoYtTyt2v4YWrAuIu31UYbmV.png&w=1000&q=75",
label: "Courtesy rides",
altText: "Illustration of a person wearing headphones in a car",
},
{
imgSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-g5x4D885dtv5R6gsLOR4xfwmaN8Vne.png&w=1000&q=75",
label: "Meal programs",
altText: "Illustration of food items being delivered",
},
],
};
const BusinessFeaturesDemo = () => {
return (
<div className="w-full bg-background">
<BusinessFeatures
title={uberFeatures.title}
features={uberFeatures.features}
/>
</div>
);
};
export default BusinessFeaturesDemo;