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 1
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,292 chars
Created
Jun 9, 2026