Merge branch 'latest' into update-hardcoded-version-24.5.7-1733138577

Author: ZheSun88

articles/components/index.adoc

@@ -505,6 +505,17 @@ include::notification/index.adoc[tag=description]
 <<{components-path-prefix}notification#,See Notification>>
 
 
+[.component-card]
+=== Popover
+
+image::{components-path-prefix}popover/popover.png["", opts=inline, role="banner"]
+
+include::popover/index.adoc[tag=description]
+
+[.sr-only]
+<<{components-path-prefix}popover#,See Popover>>
+
+
 [.component-card]
 === Progress Bar
 

articles/components/popover/index.adoc

@@ -3,14 +3,17 @@ tab-title: Usage
 layout: tabbed-page
 title: Popover
 description: Popover is a generic overlay whose position is anchored to an element in the UI.
+version: since:com.vaadin:[email protected]
 page-links:
   - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/popover}/#/elements/vaadin-popover[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/popover/Popover.html[Java]'
   - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/popover}/packages/popover[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-popover-flow-parent[Java]'
 ---
 
-= [since:com.vaadin:[email protected]]#Popover#
+= Popover
 
-[since:com.vaadin:[email protected]]#A generic overlay whose position is anchored to an element in the UI#.
+// tag::description[]
+A generic overlay whose position is anchored to an element in the UI.
+// end::description[]
 
 [.example]
 --

articles/components/popover/popover.png

@@ -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] {