Skip to content

Hero

The hero.Hero component with a background image in different alignments and with a side image.

Hero

package main

import (
	_ "embed"

	"go.wdy.de/nago/application"
	"go.wdy.de/nago/presentation/core"
	icons "go.wdy.de/nago/presentation/icons/hero/outline"
	"go.wdy.de/nago/presentation/ui"
	"go.wdy.de/nago/presentation/ui/hero"
	"go.wdy.de/nago/web/vuejs"
)

//go:embed bg.jpg
var bg application.StaticBytes

//go:embed wdy.png
var sideImg application.StaticBytes

const (
	title       = "Überschrift Evolve Text und so"
	subtitle    = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
	actionLabel = "Let's start"
)

func main() {
	application.Configure(func(cfg *application.Configurator) {
		cfg.SetApplicationID("de.worldiety.tutorial_108")
		cfg.Serve(vuejs.Dist())

		bgUrl := cfg.Resource(bg)

		cfg.RootView(".", func(wnd core.Window) core.View {
			return ui.VStack(
				ui.ThemeSwitcher(
					ui.PrimaryButton(nil).Title("Toggle theme"),
				),
				hero.Hero(title).
					Subtitle(subtitle).
					Actions(ui.PrimaryButton(nil).Title(actionLabel).PreIcon(icons.ArrowRight)).
					BackgroundImage(bgUrl).
					Alignment(ui.BottomLeading).
					Frame(ui.Frame{Width: ui.L1600, MaxWidth: ui.Full}),
				hero.Hero(title).
					Subtitle(subtitle).
					Actions(ui.PrimaryButton(nil).Title(actionLabel).PreIcon(icons.ArrowRight)).
					BackgroundImage(bgUrl).
					Alignment(ui.Center).
					Frame(ui.Frame{Width: ui.L1600, MaxWidth: ui.Full}),
				hero.Hero(title).
					Subtitle(subtitle).
					Actions(ui.PrimaryButton(nil).Title(actionLabel).PreIcon(icons.ArrowRight)).
					BackgroundImage(bgUrl).
					Alignment(ui.BottomTrailing).
					Frame(ui.Frame{Width: ui.L1600, MaxWidth: ui.Full}),
				hero.Hero(title).
					Subtitle(subtitle).
					Actions(ui.PrimaryButton(nil).Title(actionLabel).PreIcon(icons.ArrowRight)).
					SideImage(ui.Image().Embed(sideImg)).
					Alignment(ui.Leading).
					Frame(ui.Frame{Width: ui.L1600, MaxWidth: ui.Full}),
			).Gap(ui.L32).Padding(ui.Padding{}.All(ui.L16)).Frame(ui.Frame{}.MatchScreen())
		})
	}).Run()
}

View on GitHub ↗ · run it with go run go.wdy.de/nago/example/cmd/tutorial-108-hero@latest