Lifestyle Apps Grid A responsive and animated grid component to showcase a collection of applications or services, inspired by the Eternal Zomato UI.
import { LifestyleAppsGrid } from '@/components/ui/apps-grid';
// Data for the app cards. This array can be fetched from an API.
const appsData = [
{
name: 'zomato',
description: 'Get the app now to start ordering your favorite dishes!',
iconSrc: 'https://cdn.21st.dev/assets/mirror/b0/b01ea6c5d523b3cd7a0521f986df98d5a8f931891bbd28609eb72079462b3257.png',
href: 'https://www.zomato.com',
bgColor: 'hsl(4, 86%, 96%)', // Light Red
},
{
name: 'blinkit',
description: 'Choose from 10,000+ products & get them delivered in minutes.',
iconSrc: 'https://cdn.21st.dev/assets/mirror/45/4565ed85b70e12d3280fd9f9e810c5e59d8dbad20658c4c30e4162d6bf11e207.png',
href: 'https://www.blinkit.com',
bgColor: 'hsl(51, 98%, 93%)', // Light Yellow
},
{
name: 'district',
description: 'The best of events, movies, dining, and everything you love!',
iconSrc: 'https://cdn.21st.dev/assets/mirror/89/8925f36ad5e428738950f5c255aad400bc4f20be3777db7e943b9aeab9efc670.jpg',
bgColor: 'hsl(270, 100%, 96%)', // Light Purple
},
{
name: 'hyperpure',
description: 'Offering complete supply chain solution for your restaurant.',
iconSrc: 'https://cdn.21st.dev/assets/mirror/aa/aa59ccabb1035edafdf7d6dc9d45ac3b000de52bb1c75cf612d739b544c1e375.png',
bgColor: 'hsl(3, 86%, 96%)', // Another shade of Light Red/Pink
},
];
const LifestyleAppsGridDemo = () => {
return (
<div className="w-full bg-background">
<LifestyleAppsGrid apps={appsData} />
</div>
);
};
export default LifestyleAppsGridDemo;