Home: say what abap2UI5 is, offer the two ways in, add an Install tile

AGENTS.md

@@ -48,9 +48,12 @@ imported; a change to it starts here.
 
 ## Rules
 
-- **A greeting, the search and four groups.** The `<h1>` says "Welcome to abap2UI5" and
-  nothing else introduces the page; the search box sits under it, the logo
-  beside both. The ids `introduction`, `try-it`, `more`, `community`
+- **A greeting, one line, two ways in, the search and four groups.** The `<h1>` says "Welcome to abap2UI5";
+  under it one sentence says what abap2UI5 is (the tagline, the only
+  explanation on the page - a visitor who has never heard the name learns it
+  here, in ten seconds, and nowhere else on the page), then the two calls:
+  the playground (nothing to install) and the quickstart (your own system).
+  The search box sits under them, the logo beside all of it. The ids `introduction`, `try-it`, `more`, `community`
   are what the test names and
   what other sites may link; reword a heading freely, keep the `id`.
 - **A tile is one line of data.** Add, reorder or drop a tool in the `groups`

public/robots.txt

@@ -0,0 +1,7 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://abap2ui5.github.io/sitemap.xml
+Sitemap: https://abap2ui5.github.io/docs/sitemap.xml
+Sitemap: https://abap2ui5.github.io/why/sitemap.xml
+Sitemap: https://abap2ui5.github.io/playground/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url><loc>https://abap2ui5.github.io/</loc></url>
+  <url><loc>https://abap2ui5.github.io/about/</loc></url>
+  <url><loc>https://abap2ui5.github.io/search/</loc></url>
+</urlset>

src/pages/index.astro

@@ -24,8 +24,9 @@ const groups: Group[] = [
     id: "introduction",
     title: "Introduction",
     tiles: [
-      { href: "https://abap2ui5.github.io/why/", for: "For managers", title: "What is abap2UI5?", text: "The business view: what it means for your team, landscape and budget." },
       { href: "https://abap2ui5.github.io/docs/", for: "For developers", title: "How does it work?", text: "The technical view: how it works, how to install it, how to build apps." },
+      { href: "https://abap2ui5.github.io/docs/get_started/quickstart", for: "For developers", title: "Install it", text: "An abapGit pull, one handler class, one SICF node: your own system in 15 minutes." },
+      { href: "https://abap2ui5.github.io/why/", for: "For managers", title: "What is abap2UI5?", text: "The business view: what it means for your team, landscape and budget." },
     ],
   },
   {
@@ -61,12 +62,17 @@ const groups: Group[] = [
 ];
 const base = import.meta.env.BASE_URL;
 ---
-<Page search title="abap2UI5" description="Welcome to abap2UI5: the documentation, the playground and the browser tools, the development tools, the addons and where the community meets." >
+<Page search title="abap2UI5 – Build UI5 apps purely in ABAP" description="Welcome to abap2UI5: the documentation, the playground and the browser tools, the development tools, the addons and where the community meets." >
 
 <div class="wrap">
   <div class="hello">
     <div class="hello-text">
       <h1 class="welcome">Welcome to abap2UI5</h1>
+      <p class="tagline">Build UI5 apps purely in ABAP: one class is one app, no JavaScript, no OData, no frontend project. Open source, from NetWeaver 7.02 to ABAP Cloud.</p>
+      <p class="calls">
+        <a class="call primary" href="https://abap2ui5.github.io/playground/" target="_blank" rel="noopener">Try it in the playground</a>
+        <a class="call" href="https://abap2ui5.github.io/docs/get_started/quickstart" target="_blank" rel="noopener">Install it in 15 minutes</a>
+      </p>
       <Search />
     </div>
     <img class="hello-logo" src={`${base}logo.png`} alt="" width="104" height="104">

src/styles/global.css

@@ -85,14 +85,28 @@ img { max-width: 100%; height: auto; }
   font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
 }
 .hello-logo { width: 104px; height: 104px; flex: none; align-self: flex-start; }
+/* one line that says what abap2UI5 is, and the two ways in: the playground
+ * (nothing to install) and the quickstart (your own system) */
+.tagline { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.5; color: var(--muted); }
+.calls { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
+.call {
+  display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
+  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
+  transition: border-color .15s, background .15s, color .15s;
+}
+.call:hover { border-color: var(--brand); color: var(--brand); }
+.call.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
+.call.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
 /* on a phone the logo stays beside the greeting and the search takes the
  * whole width under both */
 @media (max-width: 620px) {
   .hello { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 24px 0 28px; }
   .hello-text { display: contents; }
   .welcome { grid-area: 1 / 1; }
   .hello-logo { grid-area: 1 / 2; width: 64px; height: 64px; align-self: center; }
-  .search { grid-area: 2 / 1 / 3 / 3; }
+  .tagline { grid-area: 2 / 1 / 3 / 3; }
+  .calls { grid-area: 3 / 1 / 4 / 3; }
+  .search { grid-area: 4 / 1 / 5 / 3; }
   .search-key { display: none; }
 }