Flutter OTP Verification PIN Entry Card

WDiv(
  className: '''
    mx-auto w-[400px] flex flex-col items-center gap-5 p-8 rounded-3xl
    bg-white dark:bg-gray-900
    border border-gray-200 dark:border-gray-800
    shadow-xl shadow-black/5 dark:shadow-black/40
  ''',
  children: [
    WDiv(
      className: '''
        w-16 h-16 rounded-2xl
        bg-indigo-100 dark:bg-indigo-950
        flex flex-row items-center justify-center
      ''',
      child: WIcon(
        Icons.mail,
        className: 'text-3xl text-indigo-600 dark:text-indigo-400',
      ),
    ),
    WDiv(
      className: 'flex flex-col items-center gap-1',
      children: [
        WText(
          'Verify your number',
          className: 'text-xl font-bold text-gray-900 dark:text-white',
        ),
        WText(
          'Enter the 6-digit code sent to +1 (555) 012-3489',
          className: 'text-sm text-center text-gray-500 dark:text-gray-400',
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center justify-center gap-2',
      children: [
        WDiv(
          className: '''
            w-12 h-14 rounded-xl border-2
            border-gray-200 dark:border-gray-700
            bg-gray-50 dark:bg-gray-800
            flex flex-row items-center justify-center
          ''',
          child: WText(
            '8',
            className: 'text-2xl font-bold text-gray-900 dark:text-white',
          ),
        ),
        WDiv(
          className: '''
            w-12 h-14 rounded-xl border-2
            border-gray-200 dark:border-gray-700
            bg-gray-50 dark:bg-gray-800
            flex flex-row items-center justify-center
          ''',
          child: WText(
            '2',
            className: 'text-2xl font-bold text-gray-900 dark:text-white',
          ),
        ),
        WDiv(
          className: '''
            w-12 h-14 rounded-xl border-2
            border-gray-200 dark:border-gray-700
            bg-gray-50 dark:bg-gray-800
            flex flex-row items-center justify-center
          ''',
          child: WText(
            '4',
            className: 'text-2xl font-bold text-gray-900 dark:text-white',
          ),
        ),
        WDiv(
          className: '''
            w-12 h-14 rounded-xl border-2
            border-indigo-500 dark:border-indigo-400
            ring-2 ring-indigo-500/30 dark:ring-indigo-400/30
            bg-white dark:bg-gray-800
            flex flex-row items-center justify-center
          ''',
          child: WDiv(
            className: 'w-0.5 h-6 rounded-full bg-indigo-500 dark:bg-indigo-400',
          ),
        ),
        WDiv(
          className: '''
            w-12 h-14 rounded-xl border-2
            border-gray-200 dark:border-gray-700
            bg-gray-50 dark:bg-gray-800
          ''',
        ),
        WDiv(
          className: '''
            w-12 h-14 rounded-xl border-2
            border-gray-200 dark:border-gray-700
            bg-gray-50 dark:bg-gray-800
          ''',
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center gap-1',
      children: [
        WIcon(
          Icons.schedule,
          className: 'text-sm text-gray-400 dark:text-gray-500',
        ),
        WText(
          'Resend code in 0:24',
          className: 'text-sm text-gray-500 dark:text-gray-400',
        ),
      ],
    ),
    WDiv(
      className: '''
        w-full rounded-2xl py-4
        bg-indigo-600 dark:bg-indigo-500
        flex flex-row items-center justify-center gap-2
      ''',
      children: [
        WText(
          'Verify',
          className: 'text-base font-bold text-white dark:text-white',
        ),
        WIcon(
          Icons.arrow_forward,
          className: 'text-lg text-white dark:text-white',
        ),
      ],
    ),
  ],
)