Centered hero

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

Hero(
  style: [Size.minH96, BgUtil.base200, Effects.roundedBox],
  [
    HeroContent(
      style: [TextUtil.center],
      [
        Container(
          style: [Size.maxWmd],
          [
            h1([text('Hello there')], classes: [TextUtil.xl5, FontUtil.bold].toClasses()),
            p(
              [text('Provident cupiditate voluptatem et in...')],
              classes: [Spacing.py6].toClasses(),
            ),
            Button([text('Get Started')], style: [Button.primary]),
          ],
        ),
      ],
    ),
  ],
)

Hero with figure

Box Office News!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

Hero(
  style: [Size.minH96, BgUtil.base200, Effects.roundedBox],
  [
    HeroContent(
      // Responsive flex direction
      style: [Layout.flexCol, Layout.flexRow.at(Breakpoint.lg)],
      [
        img(
          src: '...',
          classes: 'max-w-sm rounded-lg shadow-2xl',
        ),
        Container([
          h1([text('Box Office News!')], classes: [TextUtil.xl5, FontUtil.bold].toClasses()),
          p([text('Provident cupiditate...')], classes: [Spacing.py6].toClasses()),
          Button([text('Get Started')], style: [Button.primary]),
        ]),
      ],
    ),
  ],
)

Hero with figure but reverse order

Box Office News!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

Hero(
  style: [Size.minH96, BgUtil.base200, Effects.roundedBox],
  [
    HeroContent(
      // Responsive reversed flex direction
      style: [Layout.flexCol, Layout.flexRowReverse.at(Breakpoint.lg)],
      [
        img(src: '...', classes: 'max-w-sm rounded-lg shadow-2xl'),
        Container([
          h1([text('Box Office News!')], classes: [TextUtil.xl5, FontUtil.bold].toClasses()),
          p([text('Provident cupiditate...')], classes: [Spacing.py6].toClasses()),
          Button([text('Get Started')], style: [Button.primary]),
        ]),
      ],
    ),
  ],
)

Hero with form

Login now!

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

Email Password

Forgot password?

Hero(
  style: [Size.minH96, BgUtil.base200, Effects.roundedBox],
  [
    HeroContent(
      style: [Layout.flexCol, Layout.flexRowReverse.at(Breakpoint.lg)],
      [
        // Text Content Container
        Container(
          style: [TextUtil.center, TextUtil.left.at(Breakpoint.lg)],
          [
            h1([text('Login now!')], classes: [TextUtil.xl5, FontUtil.bold].toClasses()),
            p([text('Provident cupiditate...')], classes: [Spacing.py6].toClasses()),
          ],
        ),
        // Form Card Container
        Card(
          style: [Flex.shrink0, Size.wFull, Size.maxWsm, Effects.shadow2xl, BgUtil.base100],
          [
            CardBody([
              Fieldset([
                label([span([text('Email')], classes: 'label-text')], classes: 'label'),
                Input(type: 'email', placeholder: 'Email'),

                label([span([text('Password')], classes: 'label-text')], classes: 'label'),
                Input(type: 'password', placeholder: 'Password'),

                div([Link([text('Forgot password?')], style: [Link.hover])]),

                Button([text('Login')], style: [Button.neutral, Spacing.mt4]),
              ]),
            ])
          ],
        ),
      ],
    ),
  ],
)

Hero with overlay image

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.

Hero(
  style: [Size.minH96, Effects.roundedBox],
  css: Styles.raw({
    'background-image': 'url(path/to/image.webp)',
  }),
  [
    HeroOverlay(style: [BgUtil.opacity60, Effects.roundedBox]),
    HeroContent(
      style: [TextUtil.center, TextUtil.neutralContent],
      [
        Container(
          style: [Size.maxWmd],
          [
            h1([text('Hello there')], classes: [Spacing.mb5, TextUtil.xl5, FontUtil.bold].toClasses()),
            p([text('Provident cupiditate...')], classes: [Spacing.mb5].toClasses()),
            Button([text('Get Started')], style: [Button.primary]),
          ],
        ),
      ],
    ),
  ],
)