Flutter Fundraising Donation Progress Card with Donors

WDiv(
  className: 'max-w-sm w-full mx-auto p-6 rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-xl',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-4',
      children: [
        WDiv(
          className: 'flex flex-row items-center px-3 py-1 rounded-full bg-emerald-50 dark:bg-emerald-950',
          children: [
            WIcon(
              Icons.water_drop,
              className: 'text-emerald-600 dark:text-emerald-400 text-sm mr-1'
            ),
            WText(
              'Clean Water',
              className: 'text-emerald-600 dark:text-emerald-400 text-xs font-bold'
            ),
          ],
        ),
        WText(
          '62% funded',
          className: 'text-gray-400 dark:text-gray-500 text-xs font-medium'
        ),
      ],
    ),
    WText(
      'Bring Water to Rural Villages',
      className: 'text-gray-900 dark:text-white text-xl font-bold mb-1'
    ),
    WText(
      'Help 1,200 families access clean drinking water this year.',
      className: 'text-gray-500 dark:text-gray-400 text-sm mb-5'
    ),
    WDiv(
      className: 'flex flex-row items-end justify-between w-full mb-2',
      children: [
        WText(
          '$24,800',
          className: 'text-gray-900 dark:text-white text-2xl font-bold'
        ),
        WText(
          'of $40,000 goal',
          className: 'text-gray-400 dark:text-gray-500 text-sm'
        ),
      ],
    ),
    WDiv(
      className: 'h-3 w-full rounded-full bg-gray-100 dark:bg-gray-800 mb-5',
      child: WDiv(
        className: 'h-3 w-3/5 rounded-full bg-gradient-to-r from-emerald-400 to-teal-500',
        children: []
      ),
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mb-5',
      children: [
        WDiv(
          className: 'flex flex-row items-center',
          children: [
            WDiv(
              className: 'w-8 h-8 rounded-full bg-gradient-to-br from-rose-400 to-pink-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center',
              child: WText(
                'A',
                className: 'text-white dark:text-white text-xs font-bold'
              ),
            ),
            WDiv(
              className: 'w-8 h-8 rounded-full bg-gradient-to-br from-indigo-400 to-blue-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center -ml-2',
              child: WText(
                'M',
                className: 'text-white dark:text-white text-xs font-bold'
              ),
            ),
            WDiv(
              className: 'w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 border-2 border-white dark:border-gray-900 flex flex-row items-center justify-center -ml-2',
              child: WText(
                'K',
                className: 'text-white dark:text-white text-xs font-bold'
              ),
            ),
            WText(
              '1,240 donors',
              className: 'text-gray-500 dark:text-gray-400 text-xs font-medium ml-3'
            ),
          ],
        ),
      ],
    ),
    WButton(
      className: 'w-full py-3 rounded-2xl bg-emerald-600 dark:bg-emerald-500 flex flex-row items-center justify-center',
      child: WText(
        'Donate Now',
        className: 'text-white dark:text-white text-sm font-bold'
      ),
    ),
  ],
)