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.
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
Revisions