Drop the hero buttons; the FAQ as a page of its own; operating models in two groups

AGENTS.md

@@ -12,6 +12,7 @@ it depends on abap2UI5/docs or abap2UI5/playground at build time.
 | Path | Purpose |
 | --- | --- |
 | `src/pages/index.astro` | The home page: the text of every section, as data at the top and markup below |
+| `src/pages/faq.astro` | The FAQ, grouped; the home page keeps a teaser at `#the-objections`, which is an address |
 | `src/pages/community.astro` | Community & Support: the open-source idea, the support ladder, what it stands on, what to give back |
 | `src/layouts/Page.astro` | The document: head, the Content-Security-Policy, the header with the section links, the foot |
 | `src/components/` | `Stats` (the headline tiles under the hero), `Icon` (inline marks) |

src/layouts/Page.astro

@@ -11,7 +11,7 @@
  * that scrolls sideways on a narrow screen. No script anywhere. */
 import "../styles/global.css";
 
-interface Props { title: string; description: string; current?: "home" | "community"; subnav?: [string, string][] }
+interface Props { title: string; description: string; current?: "home" | "community" | "faq"; subnav?: [string, string][] }
 const { title, description, current = "home", subnav } = Astro.props;
 const base = import.meta.env.BASE_URL;
 const canonical = new URL(Astro.url.pathname, Astro.site).href;
@@ -33,13 +33,13 @@ export const sections: [string, string][] = [
   ["what-it-costs", "Cost"],
   ["where-it-runs", "Where it runs"],
   ["ai", "AI"],
-  ["the-objections", "FAQ"],
   ["who-runs-it", "Who runs it"],
   ["how-to-evaluate-it-in-a-week", "Get started"],
 ];
 const row = subnav ?? (current === "home" ? sections : []);
 const home = base;
 const community = `${base}community/`;
+const faq = `${base}faq/`;
 // the build date, so a reader knows how old the figures on the page are
 const updated = new Date().toISOString().slice(0, 10);
 ---
@@ -69,7 +69,7 @@ const updated = new Date().toISOString().slice(0, 10);
     <a class="mark" href={home}><img src={`${base}logo.png`} alt="" width="28" height="28"> abap2UI5</a>
     <nav class="nav" aria-label="Pages">
       <a href={home} aria-current={current === "home" ? "page" : undefined}>Home</a>
-      <a href={`${home}#the-objections`}>FAQ</a>
+      <a href={faq} aria-current={current === "faq" ? "page" : undefined}>FAQ</a>
       <a href={community} aria-current={current === "community" ? "page" : undefined}>Community &amp; Support</a>
     </nav>
     <div class="top-actions">
@@ -97,6 +97,7 @@ const updated = new Date().toISOString().slice(0, 10);
       <a href="https://abap2ui5.github.io/playground/">Playground</a>
       <a href="https://github.com/abap2UI5/abap2UI5">GitHub</a>
       <a href="https://abapgit.slack.com/join/shared_invite/zt-46tqufaht-QlrxTzlDqlx85CWbeUnOqg#/shared-invite/email">Slack</a>
+      <a href={faq}>FAQ</a>
       <a href={community}>Community &amp; Support</a>
       <a href="https://github.com/abap2UI5/why">Edit this page</a>
     </nav>

src/pages/faq.astro

@@ -0,0 +1,71 @@
+---
+/* The FAQ - its own page: what decision makers ask, in the groups they ask
+ * in. The home page keeps a teaser at #the-objections, because that id is an
+ * address other sites link to. */
+import Page from "../layouts/Page.astro";
+
+const DOCS = "https://abap2ui5.github.io/docs/";
+const GITHUB = "https://github.com/abap2UI5/abap2UI5";
+const SLACK = "https://abapgit.slack.com/join/shared_invite/zt-46tqufaht-QlrxTzlDqlx85CWbeUnOqg#/shared-invite/email";
+const MAIL = "contact@abap2UI5.org";
+const base = import.meta.env.BASE_URL;
+const slug = (t: string) => t.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+
+/* The FAQ, in the groups a reader asks in: risk first, then fit, team,
+ * landscape, and what users will say. */
+const faq = [
+  ["Risk and support", [
+    ["It is an open-source project. What if the maintainers stop?", `The installed version keeps running, the source is in your system in full, readable and changeable, and the apps stay plain ABAP classes. Nothing is called at runtime that is not in your system, apart from the UI5 library, which your system ships. A build renamed into your own namespace is one workflow run (<a href="${DOCS}advanced/renaming">Namespaces, Renaming</a>).`],
+    ["Who do we call when something breaks?", `Rarely anyone, because an app is upgrade-stable: abap2UI5 uses released APIs only, passes the ABAP Cloud checks and runs the same source from NetWeaver 7.02 to S/4HANA and ABAP Cloud; the frontend is UI5 itself, tested on the oldest and the newest release. A system upgrade or a UI5 upgrade does not break it. When something does break: your developer, for the app, as for any class in the system. For the framework, write in the <a href="${SLACK}">Slack channel</a> or open an <a href="${GITHUB}/issues">issue</a> on GitHub: anyone can, at any time, no account with the project needed, and in the open is where it gets answered fastest and where everybody sees the answer. Pull requests are welcome the same way. If your organization needs more, closer cooperation, a workshop or a support arrangement, write to <a href="mailto:${MAIL}">${MAIL}</a> and plan it together (<a href="${GITHUB}/blob/main/SUPPORT.md">Support</a>). Security reports are acknowledged within three business days (<a href="${DOCS}configuration/security">Security</a>).`],
+    ["Will an upgrade break it: the next S/4HANA release, ABAP Cloud, the next UI5?", `No. On the ABAP side abap2UI5 uses released APIs only and passes the ABAP Cloud checks, so it is cloud-ready and an S/4HANA upgrade leaves it as it is; the same source runs from NetWeaver 7.02 to ABAP Cloud, so an app moves with your landscape. On the UI5 side the frontend is UI5 itself, not a copy, and every change runs in the browser on the oldest supported release and on UI5 2.x. Releases are listed (<a href="${DOCS}resources/changelog">Release Notes</a>); what goes is announced and tracked until removal (<a href="${DOCS}resources/deprecations">Deprecations</a>).`],
+    ["Why should we trust it over a product we pay for?", "Because you can check everything a vendor asks you to believe: the source is open, every test is public, and an app is a class in your own system that keeps running whatever happens to the project. What you do not get is an SLA in a contract; what you get is the code, and a maintainer you can reach."],
+    ["Is anybody actually running this in production?", `Two companies say so under <a href="#who-runs-it">Who runs it</a> below, and every release is tested against Standard ABAP and ABAP Cloud, downported to NetWeaver 7.02 and run in the browser on the oldest and the newest supported UI5 release (<a href="${GITHUB}/blob/main/docs/verified-on.md">verified on</a>).`],
+  ]],
+  ["Where it fits", [
+    ["When abap2UI5, and when a custom SAPUI5 app, for a complex screen?", "Ask where the complexity is. If it is in the data and the rules, which is the usual case for a cockpit, a worklist or a multi-step form, abap2UI5 is the shorter path: the logic stays in ABAP next to the data, the screen is any UI5 control, and one ABAP developer owns the whole thing. If it is in the browser itself, an editor that works offline, an animation-heavy control, a client that must keep working without SAP for minutes, a custom SAPUI5 app with its own JavaScript is the right tool. Three questions decide it: does the app need to run without a connection, does it need custom JavaScript on the client, and who will maintain it in five years."],
+    ["Fiori Elements covers 80 percent of our screens. What about the rest?", "That rest is what abap2UI5 is for. Keep Fiori Elements where a list report or an object page from annotations fits; take abap2UI5 where a template becomes the thing you fight: a cockpit with a chart and a custom form, a scanner screen, a tool nobody wrote a floorplan for. Both appear as tiles in the same launchpad, and the business logic behind both is the same ABAP."],
+    ["Our clean-core guideline names RAP. Where does this leave us?", "Side by side. abap2UI5 passes the ABAP Cloud checks and modifies nothing in the standard, so it is clean core in the technical sense, but it is not SAP's programming model. The usual outcome is a scope: standard transactional screens in RAP, the tools around them in abap2UI5, both in one launchpad."],
+  ]],
+  ["Team and skills", [
+    ["Our ABAP team is small and getting older. Can we take on a new UI technology?", "You are not taking one on. The UI is one more ABAP class, written by the people who write the rest, in the tools they use today, with UI5's controls learned from running examples in hours, not weeks. No JavaScript developer to hire in a market that has few, no full-stack profile to find, no training project before the real project. And an AI assistant writes a first version of such a class whole, which is exactly where a small team gains the most."],
+    ["How do our developers learn it, and how long does it take?", "From running examples, not from tutorials that aged. The catalogue holds 130 learning samples and 680 control examples, each one opens in the browser and each one is maintained with the framework, so none goes stale. The quickstart takes minutes: pull, one endpoint, the first screen is up. Within hours a developer builds a first real app, and within a week the screen your team needs this quarter, with the people who will maintain it. What a developer learns is UI5's controls and their properties, in ABAP, not a new language or a new toolchain."],
+  ]],
+  ["Landscape and tooling", [
+    ["Do we need BTP for this?", "No. abap2UI5 runs on the ABAP system you already have, from NetWeaver 7.02 on, with no subscription beside it. If you run the BTP ABAP Environment or S/4HANA Cloud already, it runs there too, from the same source, so the decision about BTP stays yours and is not made for you by the UI."],
+    ["We are in the middle of an S/4HANA move. Is this the moment?", "It is one of the better ones. An app you build on the old system today runs on S/4HANA unchanged, so nothing you build now is thrown away at go-live. Screens move one at a time, SAP GUI stays until the last one, and the same team does both. And the apps are classes in your transport landscape, so they travel with the migration like everything else."],
+    ["Do we need Business Application Studio, Git, npm, a deployment pipeline?", "No. The framework is installed once with abapGit, as any open-source ABAP is. An app is written in ADT or SE80, checked by ATC, transported like any class. There is no frontend build, no BSP upload, no MTA, no approuter and no cache to clear after a deployment, because there is no deployment: the system serves the screen itself."],
+  ]],
+  ["Performance and users", [
+    ["Every click is a request to SAP. Is that fast enough?", `Faster than most Fiori apps, in practice: one plain HTTP request per click with the changed data only, no OData metadata, no batch, no app logic or bundle in the browser. For worklists, forms and cockpits that is the round trip a SAP GUI screen makes. It is not built for an app that holds its state offline (<a href="${DOCS}configuration/performance">Performance</a>).`],
+    ["Our users are fast in SAP GUI. Will they accept it?", "Users go back to SAP GUI when the Fiori app is slower than the transaction it replaced. An abap2UI5 screen makes one request per click on the same ABAP stack, so a keyboard-driven worklist stays as quick as it was. And nothing is replaced in one go: one screen at a time, the GUI stays until the last one, the logic behind both is the same code."],
+  ]],
+];
+---
+<Page
+  current="faq"
+  title="abap2UI5 - FAQ"
+  description="What decision makers ask about abap2UI5: risk and support, where it fits, team and skills, landscape and tooling, performance and users."
+  subnav={faq.map(([group]) => [slug(group as string), group as string])}
+>
+  <section class="section page-head">
+    <div class="wrap">
+      <p class="kicker">FAQ</p>
+      <h1>What decision makers ask</h1>
+      <p class="intro">The questions an IT manager, a product owner or an architecture board puts to abap2UI5, answered with the place each answer can be checked. Anything missing? Ask it in <a href={SLACK}>Slack</a> or write to <a href={`mailto:${MAIL}`}>{MAIL}</a>; the answer lands here.</p>
+    </div>
+  </section>
+
+  <section class="section alt">
+    <div class="wrap">
+      <div class="faq">
+        {faq.map(([group, qs], g) => (
+          <div class="faq-group" id={slug(group as string)}>
+            <h3>{group}</h3>
+            {qs.map(([q, a], i) => <details open={g === 0 && i === 0}><summary>{q}</summary><p set:html={a} /></details>)}
+          </div>
+        ))}
+      </div>
+      <p class="more">→ Back to <a href={base}>the page for decision makers</a>, or on to <a href={`${base}community/`}>Community &amp; Support</a>.</p>
+    </div>
+  </section>
+</Page>