From 6517f5b5b424ccb7b29feac5e68618b5b1625c9d Mon Sep 17 00:00:00 2001 From: Marcus Hellberg Date: Mon, 2 Dec 2024 03:44:21 -0800 Subject: [PATCH] Add tutorial and video training banners to front page (#3944) * add tutorial and video training banners to front page * Minor edits. * More minor edits. --------- Co-authored-by: Russell J.T. Dyer <6652767+russelljtdyer@users.noreply.github.com> --- articles/index.adoc | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/articles/index.adoc b/articles/index.adoc index 7afbd22804..d135dd8519 100644 --- a/articles/index.adoc +++ b/articles/index.adoc @@ -26,9 +26,31 @@ xref:/getting-started/tutorial#["Tutorial",role="button primary water"] image:flow/_images/code-editor-illustration.svg["", opts=inline] -- + +[.cards.quiet.large] +== Getting Started + + +[.card.large] +=== Tutorial + +The Vaadin tutorial walks you through building an application from start to production. It covers both Flow and Hilla development. + +<<{articles}/getting-started/tutorial#,Start tutorial>> + + +[.card.large] +=== Video Course & Certification + +Prefer to learn by watching? The free Vaadin training videos cover the basics of Vaadin Flow development and help you to get certified. + +link:/learn/training[Start video course] + + [.cards.quiet.large.components] == Components + [.card.browse-all.large] === Browse Components image::components/_images/components-icon.svg[opts=inline, role=icon] @@ -37,6 +59,7 @@ Vaadin Flow comes with over 40 UI components. [.sr-only] <<{articles}/components#, Browse all components>> + [.card] === Grid image::components/grid/grid.png["", opts=inline, role="banner"] @@ -45,6 +68,7 @@ include::components/grid/index.adoc[tag=description] [.sr-only] <<{articles}/components/grid#,See Grid>> + [.card] === Combo Box image::components/combo-box/combo-box.png["", role="banner"] @@ -53,6 +77,7 @@ include::components/combo-box/index.adoc[tag=description] [.sr-only] <<{articles}/components/combo-box#,See Combo Box>> + [.card] === Date Picker image::components/date-picker/date-picker.png["", role="banner"] @@ -61,6 +86,7 @@ include::components/date-picker/index.adoc[tag=description] [.sr-only] <<{articles}/components/date-picker#,See Date Picker>> + [.card] === Button image::components/button/button.png["", opts=inline, role="banner"] @@ -69,6 +95,7 @@ include::components/button/index.adoc[tag=description] [.sr-only] <<{articles}/components/button#,See Button>> + [.card] === App Layout image::components/app-layout/app-layout.png["", opts=inline, role="banner"] @@ -78,18 +105,10 @@ include::components/app-layout/index.adoc[tag=description] <<{articles}/components/app-layout#,See App Layout>> - - - - [.cards.quiet.large] == Tools include::tools/index.adoc[tag=all-tools] - - - - ++++