Flutter Hero Section with Gradient and CTA Buttons

A landing-page hero with a gradient background, a highlight badge, a bold headline, supporting copy, and primary plus secondary CTA buttons. Built with Wind UI.

Anılcan Çakır by Anılcan Çakır 25 views 0 stars 2 weeks ago Rev 2
Flutter Hero Section with Gradient and CTA Buttons preview
main.dart
WDiv(
  className: 'mx-auto max-w-2xl flex flex-col items-center gap-6 rounded-3xl p-12 bg-gradient-to-br from-indigo-600 via-purple-600 to-fuchsia-600 shadow-2xl',
  children: [
    WDiv(
      className: 'flex flex-row items-center gap-2 rounded-full px-3 py-1 bg-white/15',
      children: [
        WIcon(
          Icons.bolt,
          className: 'text-amber-300 text-sm'
        ),
        WText(
          'Now in stable 1.0.0',
          className: 'text-xs font-semibold text-white'
        )
      ],
    ),
    WText(
      'Tailwind for Flutter',
      className: 'text-5xl font-extrabold text-white text-center'
    ),
    WText(
      'Style every widget with className utilities. Dark mode, responsive breakpoints, and 19 widgets, no StyleSheet required.',
      className: 'text-base text-white/80 text-center leading-relaxed'
    ),
    WDiv(
      className: 'flex flex-row items-center gap-3',
      children: [
        WButton(
          className: 'rounded-xl px-6 py-3 bg-white hover:bg-gray-100',
          child: WDiv(
            className: 'flex flex-row items-center gap-2',
            children: [
              WText(
                'Get started',
                className: 'text-base font-bold text-indigo-700'
              ),
              WIcon(
                Icons.arrow_forward,
                className: 'text-indigo-700 text-lg'
              )
            ]
          )
        ),
        WButton(
          className: 'rounded-xl px-6 py-3 border border-white/40 hover:bg-white/10',
          child: WText(
            'View docs',
            className: 'text-base font-semibold text-white'
          )
        ),
      ],
    ),
  ],
)
Stats
Views
25
Stars
0
Revisions
2
Size
1,682 chars
Created
Jun 9, 2026