Flutter Profile Card UI: Avatar, Stats, and Actions

WDiv(
  className: 'mx-auto max-w-sm flex flex-col rounded-2xl border bg-white border-gray-200 shadow-xl overflow-hidden dark:bg-gray-900 dark:border-gray-800',
  children: [
    WDiv(
      className: 'h-24 w-full bg-gradient-to-br from-sky-400 via-indigo-500 to-purple-600'
    ),
    WDiv(
      className: 'flex flex-col items-center gap-3 px-6 pb-6',
      children: [
        WDiv(
          className: 'flex items-center justify-center w-20 h-20 rounded-full border-4 bg-indigo-100 border-white dark:bg-indigo-900 dark:border-gray-900',
          child: WText(
            'AC',
            className: 'text-2xl font-bold text-indigo-600 dark:text-indigo-300'
          ),
        ),
        WDiv(
          className: 'flex flex-col items-center gap-1',
          children: [
            WText(
              'Anilcan Cakir',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Flutter engineer at FlutterSDK',
              className: 'text-sm text-gray-500 dark:text-gray-400'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center justify-center gap-8 py-2',
          children: [
            WDiv(
              className: 'flex flex-col items-center',
              children: [
                WText(
                  '128',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Posts',
                  className: 'text-xs text-gray-500 dark:text-gray-400'
                )
              ]
            ),
            WDiv(
              className: 'flex flex-col items-center',
              children: [
                WText(
                  '8.4k',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Followers',
                  className: 'text-xs text-gray-500 dark:text-gray-400'
                )
              ]
            ),
            WDiv(
              className: 'flex flex-col items-center',
              children: [
                WText(
                  '312',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Following',
                  className: 'text-xs text-gray-500 dark:text-gray-400'
                )
              ]
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center gap-3 w-full',
          children: [
            WButton(
              className: 'flex-1 rounded-xl px-4 py-2.5 bg-indigo-600 hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400',
              child: WText(
                'Follow',
                className: 'text-sm font-semibold text-white text-center'
              )
            ),
            WButton(
              className: 'flex-1 rounded-xl px-4 py-2.5 border bg-white border-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700',
              child: WText(
                'Message',
                className: 'text-sm font-semibold text-gray-700 text-center dark:text-gray-200'
              )
            ),
          ],
        ),
      ],
    ),
  ],
)