Redesign home page layout and update featured content

docs/.vitepress/theme/style.css

@@ -452,3 +452,120 @@
   background-color: var(--vp-c-brand-soft);
   color: var(--vp-c-brand-2);
 }
+
+/* ============================================== the home page, one screen ===
+ *
+ * The home page is not a page you read — it is a signpost, and a signpost you
+ * have to scroll is a signpost that failed. At the theme's own sizes it came
+ * to 1152px: hero, three cards, the samples button and the footer, on a 13"
+ * laptop that is a screen and a half, so the cards arrived only for readers
+ * who went looking for them.
+ *
+ * Everything below is the same page at smaller numbers — nothing is dropped
+ * and nothing is hidden. The type stays in its ranks (the hero name is still
+ * the largest thing on the page, the tagline still smaller than the text it
+ * follows); it is the AIR that goes, which is where the theme's default is
+ * most generous: 144px above the hero name, 128px between the last card and
+ * the footer, 64px of card padding around three lines of text.
+ *
+ * Measured, at a 1440-wide window: 1152px -> 750px, footer included. The
+ * target was 800px, the working height of a 13" MacBook's browser window;
+ * anything taller and the footer goes under the fold again. The 50px left
+ * over is deliberate — it is the room a hero headline needs when it wraps to
+ * a second line, which it does at narrower windows and in other type.
+ *
+ * Specificity: the theme's rules are Vue SCOPED styles, so each compiles with
+ * a `[data-v-…]` attribute — `.VPHero[data-v-x]` counts two units, and a bare
+ * `.VPHero` here counts one and never applies. Every rule below therefore
+ * carries two ancestors, `.Layout .VPHome`, which takes it to three and wins
+ * on specificity rather than on this file happening to load later; `.VPHome`
+ * itself is the one element the theme styles directly, so its own rule needs
+ * a third ancestor to clear the same bar. The `data-v` hash is deliberately
+ * not written down anywhere: it changes whenever the component does. This is
+ * not hypothetical — the first version of this block used one-unit selectors
+ * for the two gaps that matter most, and they silently did nothing.
+ *
+ * Only from 960px up. Below that the theme is already at its small sizes, the
+ * layout is one column, and a phone scrolls the home page whatever we do.
+ */
+@media (min-width: 960px) {
+  /* The hero. Top padding has to keep the nav-height term — the hero is
+   * pulled up under the fixed nav bar by a negative margin, so a plain `40px`
+   * would put the name behind it. */
+  .Layout .VPHome .VPHero {
+    padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
+    padding-bottom: 32px;
+  }
+
+  .Layout .VPHome .VPHero .name,
+  .Layout .VPHome .VPHero .text {
+    font-size: 40px;
+    line-height: 48px;
+  }
+
+  .Layout .VPHome .VPHero .tagline {
+    padding-top: 8px;
+    font-size: 17px;
+    line-height: 26px;
+  }
+
+  .Layout .VPHome .VPHero .actions {
+    padding-top: 18px;
+  }
+
+  /* The cards. The icon is the one element that shrinks more than the rest:
+   * at 48px it is a tile of its own above the title, and the card is three
+   * lines of text under a picture. At 36px it reads as what it is — a mark on
+   * the card, not the card's subject. */
+  .Layout .VPHome .VPFeature .box {
+    padding: 16px;
+  }
+
+  .Layout .VPHome .VPFeature .icon {
+    margin-bottom: 12px;
+    width: 36px;
+    height: 36px;
+    font-size: 19px;
+  }
+
+  .Layout .VPHome .VPFeature .details {
+    line-height: 22px;
+  }
+
+  /* The samples button, set apart under the grid. Its rule above already
+   * gives it a divider and 68px of air; on one screen that reads as the same
+   * separation at 42px. */
+  .Layout .VPHome .a2ui5-catalogues {
+    margin-top: 24px;
+    padding-top: 18px;
+  }
+
+  .Layout .VPHome .a2ui5-catalogues .a2ui5-catalogues-links {
+    margin-top: 14px;
+  }
+
+  /* And the gap below all of it. 128px under the last thing on a page is the
+   * theme assuming there is more page coming; here there is not, there is a
+   * footer. */
+  .Layout .VPContent .VPHome {
+    margin-bottom: 36px;
+  }
+}
+
+/* The footer is outside `.VPHome`, so it takes its own rule — and it is not
+ * home-page-only: 32px above and below two lines of small grey text is the
+ * same overspend on every page.
+ *
+ * `:not(.has-sidebar)` is here for specificity, not for the selection: the
+ * theme hides the footer on sidebar pages anyway, so this matches every
+ * footer anyone ever sees, and it takes the rule to three units against the
+ * scoped `.VPFooter[data-v-…]`'s two. */
+.Layout .VPFooter:not(.has-sidebar) {
+  padding: 20px 24px;
+}
+
+@media (min-width: 768px) {
+  .Layout .VPFooter:not(.has-sidebar) {
+    padding: 20px 32px;
+  }
+}

docs/index.md

@@ -14,7 +14,7 @@ hero:
     height: 200px
   actions:
     - theme: brand
-      text: Get Started
+      text: Quickstart
       link: /get_started/quickstart
     - theme: alt
       text: What's New?
@@ -23,9 +23,13 @@ hero:
       text: Live Demo
       link: https://abap2ui5.github.io/playground/
 
-# Three cards, one per thing a reader comes here to do: look a task up, take
-# it to production, join in. Quickstart is not a card — the hero's first
-# button is already that jump, and a card repeating it is a card spent twice.
+# Three cards, one per thing a reader comes here to do: learn it, take it to
+# production, join in. The Cookbook is not one of them any more: it answers a
+# question you already have, and someone on the home page does not have it
+# yet — the Tutorial is what a first visit is for, and the Cookbook is a click
+# away in the nav the moment it is wanted. Quickstart is not a card either —
+# the hero's first button is already that jump, and a card repeating it is a
+# card spent twice.
 # Technical Insight is not one either: it is what you read after the thing
 # runs, not a way in. GitHub and LinkedIn are not cards — both sit in the nav
 # bar as social icons, and a card spent on a link that is always visible is a
@@ -37,10 +41,10 @@ hero:
 # accident. It sits below the grid instead, as a single button, set apart,
 # where leaving the grid — and this site — is the obvious thing to be doing.
 features:
-  - title: Cookbook
-    icon: <i class="fa-solid fa-book"></i>
-    details: Recipes for everyday tasks — views, binding, tables, events, popups, files.
-    link: /cookbook/view/definition
+  - title: Tutorial
+    icon: <i class="fa-solid fa-graduation-cap"></i>
+    details: Learn by building — ten steps that grow one runnable app, from a message box to a table.
+    link: /tutorials/overview
   - title: Configuration
     icon: <i class="fa-solid fa-gear"></i>
     details: Setup, security, performance, launchpad — the road to production use.