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

@@ -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]
 
-
-
-
-
 ++++
 <style>
 nav[aria-label=breadcrumb] {