feat: section on web presentations, in German and English

A presentation built as a website instead of a slide file: why, for what,
and when slides are enough. The main drawing shows the same presentation as
a slide and as a web page on a projector, a laptop and a phone; the slide
keeps its format and shrinks, the page rearranges. Four small drawings stand
next to the reasons. No prices: none are agreed for this yet.

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

apps/web/app/[locale]/page.tsx

@@ -13,6 +13,10 @@ import { AutomationFlow } from "@/src/components/illustrations/AutomationFlow";
 import { CareerLine } from "@/src/components/illustrations/CareerLine";
 import { ContactDiagram } from "@/src/components/illustrations/ContactDiagram";
 import { PipelineRun } from "@/src/components/illustrations/PipelineRun";
+import {
+  PresentationCompare,
+  ReasonDrawing,
+} from "@/src/components/illustrations/WebPresentation";
 import { WorkShowcase } from "@/src/components/illustrations/WorkShowcase";
 import { Reveal } from "@/src/components/Reveal";
 import { contentFor } from "@/src/content";
@@ -51,8 +55,16 @@ const Title: React.FC<{ title: SplitTitle; muted?: string }> = ({
 export default async function LandingPage({ params }: Props) {
   const locale = parseLocale((await params).locale) ?? DEFAULT_LOCALE;
   const content = contentFor(locale);
-  const { hello, services, automation, technology, working, work, faq } =
-    content;
+  const {
+    hello,
+    services,
+    automation,
+    presentations,
+    technology,
+    working,
+    work,
+    faq,
+  } = content;
 
   return (
     <div className="relative flex flex-col bg-white">
@@ -133,6 +145,78 @@ export default async function LandingPage({ params }: Props) {
 
       <Block
         index="04"
+        label={presentations.label}
+        tone="dark"
+        title={<Title title={presentations.title} muted="text-slate-500" />}
+      >
+        <Reveal>
+          <p className="m-0 mb-12 max-w-3xl font-sans text-lg leading-relaxed text-slate-300 md:mb-16 md:text-xl">
+            {presentations.intro}
+          </p>
+        </Reveal>
+        <Reveal>
+          <BitAura source="around" tone="dark">
+            <div className="rounded-3xl border border-slate-700 bg-slate-950 px-4 py-8 md:px-10 md:py-12">
+              <PresentationCompare />
+            </div>
+          </BitAura>
+        </Reveal>
+
+        <div className="mt-16 grid grid-cols-1 gap-x-10 gap-y-14 sm:grid-cols-2 md:mt-28 lg:grid-cols-4">
+          {presentations.reasons.map((reason, i) => (
+            <Reveal key={reason.title} delay={0.08 * i}>
+              <div className="rounded-2xl border border-slate-800 bg-slate-950/60 p-4">
+                <ReasonDrawing index={i} />
+              </div>
+              <h3 className="m-0 mt-6 font-sans text-2xl font-bold tracking-tight text-white">
+                {reason.title}
+              </h3>
+              <p className="m-0 mt-3 font-sans text-base leading-relaxed text-slate-300 md:text-lg">
+                {reason.text}
+              </p>
+            </Reveal>
+          ))}
+        </div>
+
+        <div className="mt-16 grid grid-cols-1 gap-12 md:mt-28 md:grid-cols-12 md:gap-12">
+          <Reveal className="md:col-span-6">
+            <div className="border-t border-slate-700 pt-6">
+              <p className="m-0 font-mono text-[11px] uppercase tracking-[0.2em] text-slate-400">
+                {presentations.goodFor.title}
+              </p>
+              <ul className="m-0 mt-4 list-none p-0">
+                {presentations.goodFor.items.map((item) => (
+                  <li
+                    key={item}
+                    className="border-b border-slate-800 py-4 font-sans text-lg text-slate-100 md:text-xl"
+                  >
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </Reveal>
+          <Reveal delay={0.1} className="md:col-span-6">
+            <div className="rounded-3xl border border-slate-700 bg-slate-950/60 p-6 md:p-10">
+              <h3 className="m-0 font-sans text-2xl font-bold tracking-tight text-white md:text-3xl">
+                {presentations.honest.title}
+              </h3>
+              <p className="m-0 mt-4 font-sans text-base leading-relaxed text-slate-300 md:text-lg">
+                {presentations.honest.text}
+              </p>
+              <a
+                href="#contact"
+                className="bit-cta bit-cta-light mt-8 inline-flex items-center gap-3 rounded-full bg-white px-6 py-3 font-sans text-[11px] font-bold uppercase tracking-[0.15em] text-slate-900 no-underline transition-transform duration-300 hover:-translate-y-0.5"
+              >
+                {presentations.cta} <span aria-hidden="true">→</span>
+              </a>
+            </div>
+          </Reveal>
+        </div>
+      </Block>
+
+      <Block
+        index="05"
         label={technology.label}
         title={<Title title={technology.title} />}
       >
@@ -201,7 +285,7 @@ export default async function LandingPage({ params }: Props) {
       </Block>
 
       <Block
-        index="05"
+        index="06"
         label={working.label}
         title={<Title title={working.title} />}
       >
@@ -227,7 +311,7 @@ export default async function LandingPage({ params }: Props) {
       </Block>
 
       <Block
-        index="06"
+        index="07"
         label={work.label}
         tone="dark"
         title={<Title title={work.title} muted="text-slate-500" />}
@@ -240,7 +324,7 @@ export default async function LandingPage({ params }: Props) {
         </Reveal>
       </Block>
 
-      <Block index="07" label={faq.label} title={<Title title={faq.title} />}>
+      <Block index="08" label={faq.label} title={<Title title={faq.title} />}>
         <Reveal>
           <Faq items={faq.items} />
         </Reveal>