Components
Feature Section This component displays a title and a list of features, each with an icon, title, and description. It's designed to be highly reusable for showcasing key benefits or points. It includes a staggered fade-in animation for the feature items to enhance visual appeal.
Loading preview...
// demo.tsx
import { FeatureSection, Feature } from '@/components/ui/feature-section';
/**
* Mock data for the feature section demo.
* Replace image URLs with your actual asset links.
*/
const whyShopFeatures: Feature[] = [
{
iconSrc: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-vB3yCpbqsZG8AszLPHliTtHLMv24hJ.png&w=1000&q=75', // Placeholder image
title: 'Superfast Delivery',
description: 'Get your order delivered to your doorstep at the earliest from dark stores near you.',
},
{
iconSrc: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-dAl3njirA4NBVpbQvBuAG6YLwKu9eE.png&w=1000&q=75', // Placeholder image
title: 'Best Prices & Offers',
description: 'Best price destination with offers directly from the manufacturers.',
},
{
iconSrc: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-p3OMGbs2h59gaJTcMXxo3CLy7ZVsIZ.png&w=1000&q=75', // Placeholder image
title: 'Wide Assortment',
description: 'Choose from 5000+ products across food, personal care, household & other categories.',
},
];
/**
* A demo component to showcase the FeatureSection.
*/
const FeatureSectionDemo = () => {
return (
<div className="w-full bg-background">
<FeatureSection title="Why shop from blinkit?" features={whyShopFeatures} />
</div>
);
};
export default FeatureSectionDemo;