İçeriğe geç
English
Tüm örnekler

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.

  • WDiv
  • WIcon
  • WText
  • WButton
önizleme
04nyztwq.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'
          )
        ),
      ],
    ),
  ],
)
54 satır Playground'da aç

Benzer örnekler

  • Flutter Onboarding Slide with Feature Highlight and Page Dots

    A polished onboarding slide built with Wind utility classes: a gradient feature icon, a bold headline, supporting copy, page indicator dots, and a full-width call to action. Dark mode pairs are included on every color token.

    • WDiv
    • WIcon
    • WText
    • WButton

  • Flutter FAQ Accordion Card with Expandable Answers

    A frequently asked questions accordion: the first item is expanded with its answer and a down chevron, while the rest stay collapsed with a forward chevron. A clean support and help-center pattern built with Wind utility classes and dark-mode pairing.

    • WDiv
    • WText
    • WIcon

  • Flutter Cookie Consent Privacy Banner

    A privacy and cookie consent banner for web and mobile: an icon header, a plain-language explanation, an always-on essentials note, and a clear action hierarchy of accept, customize, and reject. A reusable compliance pattern composed from Wind className strings with dark-mode pairs.

    • WDiv
    • WIcon
    • WText
    • WButton