Flutter Savings Goal Progress Card

WDiv(
  className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-gray-900 shadow-xl dark:bg-gray-950',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center gap-3',
          children: [
            WDiv(
              className: 'flex items-center justify-center w-11 h-11 rounded-2xl bg-amber-500/20 dark:bg-amber-500/20',
              child: WIcon(
                Icons.account_balance_wallet,
                className: 'text-amber-400 text-xl dark:text-amber-400'
              ),
            ),
            WDiv(
              className: 'flex flex-col',
              children: [
                WText(
                  'Bali Trip 2026',
                  className: 'text-base font-bold text-white'
                ),
                WText(
                  'Travel fund',
                  className: 'text-xs text-gray-400 dark:text-gray-500'
                ),
              ],
            ),
          ],
        ),
        WIcon(
          Icons.flag,
          className: 'text-amber-400 text-lg dark:text-amber-400'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-baseline gap-2',
      children: [
        WText(
          '$1,840',
          className: 'text-4xl font-extrabold text-white'
        ),
        WText(
          'of $4,500',
          className: 'text-sm font-medium text-gray-400 dark:text-gray-500'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col gap-2 w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center w-full h-3 rounded-full bg-gray-800 dark:bg-gray-800',
          child: WDiv(
            className: 'h-3 w-[138px] rounded-full bg-gradient-to-r from-amber-400 to-amber-500 dark:from-amber-400 dark:to-amber-500',
            child: WSpacer(
              className: 'w-[138px] h-3'
            ),
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WText(
              '41% saved',
              className: 'text-xs font-semibold text-amber-400 dark:text-amber-400'
            ),
            WText(
              'Next milestone $2,000',
              className: 'text-xs text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
      ],
    ),
    WButton(
      className: 'w-full rounded-2xl px-5 py-3 bg-amber-500 hover:bg-amber-400 shadow-lg dark:bg-amber-500 dark:hover:bg-amber-400',
      child: WDiv(
        className: 'flex flex-row items-center justify-center gap-2',
        children: [
          WIcon(
            Icons.add,
            className: 'text-gray-900 text-lg'
          ),
          WText(
            'Add Funds',
            className: 'text-base font-bold text-gray-900'
          ),
        ],
      ),
    ),
  ],
)