Apps Grid

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://b.zmtcdn.com/data/o2_assets/d1eee2be61cf47e2332cb7c49475c0981739777714.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://b.zmtcdn.com/data/o2_assets/071cb96db84f20eea3a39804e113bdee1739777655.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://b.zmtcdn.com/data/o2_assets/38bf2d77d9391b8b1866e3ae2b5fe19a1739777683.png',
    bgColor: 'hsl(270, 100%, 96%)', // Light Purple
  },
  {
    name: 'hyperpure',
    description: 'Offering complete supply chain solution for your restaurant.',
    iconSrc: 'https://b.zmtcdn.com/data/o2_assets/9207cd0fc68c4ac55cfd3bfa00c02a351739777699.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;