feat: the homepage leads the visitor through as one story

The page was a row of sections to scroll past, and a film in one of them did
not change that. It now follows the questions a visitor has, in the order
they come up: who is this, can he do what I need, what does it look like,
what else, how does it go, has he done it, what is open, how do I start.

Each chapter ends by asking the next question as a large link that leads on,
and the next chapter answers it. A rail at the edge shows every chapter as a
station with a dot travelling along it (on phones: a pill with the current
chapter and one tap to the next), and the header names the current question.

Where the visitor is, is pure logic in src/domain/chapters.ts. The scroll
film section and the bridge sentences are removed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/content/de.ts

@@ -277,17 +277,6 @@ export const de: Content = {
     },
   },
   automation: {
-    film: {
-      description:
-        "Ein Punkt springt zwischen zwei Quadraten hin und her. Die Kamera fährt zurück: Es sind viele Reihen, in denen jemand Dinge von Programm zu Programm trägt. Dann verbinden Linien die Programme, und die Arbeit läuft von selbst.",
-      statements: [
-        ["Sieht aus wie", "Pingpong."],
-        ["Ist aber", "Ihr Büro."],
-        ["Jede Bestellung.", "Von Hand."],
-        ["Oder Ihre Tools", "reden miteinander."],
-        ["Und Ihr Team", "hat Zeit."],
-      ],
-    },
     label: "Prozessautomatisierung",
     title: { lead: "Lassen Sie die Systeme", rest: "das Kopieren übernehmen." },
     intro:
@@ -495,12 +484,30 @@ export const de: Content = {
     cta: "Nach einer Präsentation fragen",
   },
   story: {
-    services: "So viel zu mir. Jetzt zu Ihnen.",
-    automation: "Einen dieser Fälle zeige ich genauer.",
-    presentations: "Und manchmal ist das Richtige gar keine App.",
-    working: "Egal, was Sie brauchen: So läuft die Zusammenarbeit.",
-    work: "Und so sieht das Ergebnis aus.",
-    faq: "Bleiben die Fragen, die fast immer kommen.",
+    next: "Als Nächstes fragen Sie sich",
+    railLabel: "Kapitel der Seite",
+    chapters: [
+      { id: "hello", short: "Wer", question: "Wer ist das überhaupt?" },
+      { id: "services", short: "Was", question: "Kann er, was ich brauche?" },
+      {
+        id: "automation",
+        short: "Beispiel",
+        question: "Wie sieht das konkret aus?",
+      },
+      {
+        id: "presentations",
+        short: "Mehr",
+        question: "Und was geht sonst noch?",
+      },
+      {
+        id: "working",
+        short: "Ablauf",
+        question: "Wie läuft die Zusammenarbeit?",
+      },
+      { id: "work", short: "Ergebnis", question: "Hat er das schon gemacht?" },
+      { id: "faq", short: "Fragen", question: "Was ist noch offen?" },
+      { id: "contact", short: "Start", question: "Wie fange ich an?" },
+    ],
   },
   freelance: {
     metaTitle: "Freelance-Webentwickler für Ihr Team | Marc Mintel",

apps/web/src/content/en.ts

@@ -273,17 +273,6 @@ export const en: Content = {
     },
   },
   automation: {
-    film: {
-      description:
-        "A dot hops back and forth between two squares. The camera pulls back: there are many rows in which someone carries things from tool to tool. Then lines connect the tools and the work runs by itself.",
-      statements: [
-        ["Looks like", "ping-pong."],
-        ["It's your", "office."],
-        ["Every order.", "By hand."],
-        ["Or your tools", "talk to each other."],
-        ["And your team", "has time."],
-      ],
-    },
     label: "Process automation",
     title: { lead: "Let the systems", rest: "do the copying." },
     intro:
@@ -483,12 +472,30 @@ export const en: Content = {
     cta: "Ask about a presentation",
   },
   story: {
-    services: "That is me. Now to you.",
-    automation: "One of these cases, shown in more detail.",
-    presentations: "And sometimes the right thing is not an app at all.",
-    working: "Whatever you need: this is how working together goes.",
-    work: "And this is what the result looks like.",
-    faq: "That leaves the questions that almost always come up.",
+    next: "Next, you are wondering",
+    railLabel: "Chapters of this page",
+    chapters: [
+      { id: "hello", short: "Who", question: "Who is this, anyway?" },
+      { id: "services", short: "What", question: "Can he do what I need?" },
+      {
+        id: "automation",
+        short: "Example",
+        question: "What does that look like in practice?",
+      },
+      {
+        id: "presentations",
+        short: "More",
+        question: "And what else is possible?",
+      },
+      {
+        id: "working",
+        short: "Process",
+        question: "How does working together go?",
+      },
+      { id: "work", short: "Results", question: "Has he done this before?" },
+      { id: "faq", short: "Questions", question: "What is still open?" },
+      { id: "contact", short: "Start", question: "How do I get started?" },
+    ],
   },
   freelance: {
     metaTitle: "Freelance web developer for your team | Marc Mintel",

apps/web/src/content/types.ts

@@ -120,6 +120,24 @@ export type WorkCopy = {
   readonly tech: readonly string[];
 };
 
+export type ChapterId =
+  | "hello"
+  | "services"
+  | "automation"
+  | "presentations"
+  | "working"
+  | "work"
+  | "faq"
+  | "contact";
+
+export type StoryChapter = {
+  readonly id: ChapterId;
+  /** One word for the rail. */
+  readonly short: string;
+  /** The question of the visitor that this chapter answers. */
+  readonly question: string;
+};
+
 export type FaqItem = {
   readonly question: string;
   readonly answer: string;
@@ -194,11 +212,6 @@ export type Content = {
     readonly scenes: SceneLabels;
   };
   readonly automation: {
-    /** The film that opens the chapter: what it shows, and its five statements in order. */
-    readonly film: {
-      readonly description: string;
-      readonly statements: readonly (readonly string[])[];
-    };
     readonly label: string;
     readonly title: SplitTitle;
     readonly intro: string;
@@ -236,16 +249,15 @@ export type Content = {
     readonly cta: string;
   };
   /**
-   * The thread through the homepage: one sentence at the top of each section
-   * that leads over from the one before, so the page reads as one story.
+   * The story of the homepage: it follows the questions a visitor has, in the
+   * order they come up. Each chapter opens with its question and ends by
+   * handing over to the next one.
    */
   readonly story: {
-    readonly services: string;
-    readonly automation: string;
-    readonly presentations: string;
-    readonly working: string;
-    readonly work: string;
-    readonly faq: string;
+    readonly next: string;
+    /** Label of the rail that shows all chapters. */
+    readonly railLabel: string;
+    readonly chapters: readonly StoryChapter[];
   };
   /** The page for people who develop themselves or lead a team. */
   readonly freelance: {