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

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