Flutter Loyalty Rewards Card with Tier Progress

WDiv(
  className: 'mx-auto max-w-sm flex flex-col gap-5 rounded-3xl p-6 bg-gradient-to-br from-violet-600 via-indigo-600 to-blue-700 shadow-xl dark:from-violet-700 dark:via-indigo-700 dark:to-blue-800',
  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-white/15 dark:bg-white/15',
              child: WIcon(
                Icons.star,
                className: 'text-amber-300 text-xl dark:text-amber-300'
              ),
            ),
            WDiv(
              className: 'flex flex-col',
              children: [
                WText(
                  'AURUM Rewards',
                  className: 'text-base font-bold text-white'
                ),
                WText(
                  'Member since 2021',
                  className: 'text-xs text-indigo-200 dark:text-indigo-200'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-1 rounded-full px-3 py-1 bg-amber-400/20 dark:bg-amber-400/20',
          children: [
            WIcon(
              Icons.bolt,
              className: 'text-amber-300 text-sm dark:text-amber-300'
            ),
            WText(
              'GOLD',
              className: 'text-xs font-bold text-amber-200 dark:text-amber-200'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-baseline gap-2',
      children: [
        WText(
          '12,480',
          className: 'text-4xl font-extrabold text-white'
        ),
        WText(
          'points',
          className: 'text-sm font-medium text-indigo-200 dark:text-indigo-200'
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-col gap-2 w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center w-full h-2 rounded-full bg-white/20 dark:bg-white/20',
          child: WDiv(
            className: 'h-2 w-[250px] rounded-full bg-gradient-to-r from-amber-300 to-amber-400 dark:from-amber-300 dark:to-amber-400',
            child: WSpacer(
              className: 'w-[250px] h-2'
            ),
          ),
        ),
        WDiv(
          className: 'flex flex-row items-center justify-between w-full',
          children: [
            WText(
              'Gold tier',
              className: 'text-xs font-semibold text-amber-200 dark:text-amber-200'
            ),
            WText(
              '2,520 pts to Platinum',
              className: 'text-xs text-indigo-200 dark:text-indigo-200'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-col',
          children: [
            WText(
              '•••• 4827',
              className: 'text-sm font-semibold tracking-widest text-white'
            ),
            WText(
              'Elena Marsh',
              className: 'text-xs text-indigo-200 dark:text-indigo-200'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-2',
          children: [
            WDiv(
              className: 'flex flex-row items-center gap-1 rounded-full px-3 py-2 bg-white/15 dark:bg-white/15',
              children: [
                WIcon(
                  Icons.schedule,
                  className: 'text-white text-sm'
                ),
                WText(
                  'History',
                  className: 'text-xs font-semibold text-white'
                ),
              ],
            ),
            WDiv(
              className: 'flex flex-row items-center gap-1 rounded-full px-3 py-2 bg-amber-400 dark:bg-amber-400',
              children: [
                WIcon(
                  Icons.arrow_forward,
                  className: 'text-indigo-900 text-sm dark:text-indigo-900'
                ),
                WText(
                  'Redeem',
                  className: 'text-xs font-bold text-indigo-900 dark:text-indigo-900'
                ),
              ],
            ),
          ],
        ),
      ],
    ),
  ],
)