From 349bea5261aedb004587a425aa571a2ae7014a80 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 26 Aug 2026 18:53:56 +0000
Subject: [PATCH] Add /ueber-bjoern bio page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Condensed from einfach-produktiv.com/ueber-bjoern/ — trimmed,
emoji-free, rewritten in the site's own voice rather than the
original's. Same hand-styled article treatment (H2/Quote/CTA-card)
as /lebensuhr and /3x3-system since it's not CMS-backed either.
Reuses the existing about-author.jpg portrait already used on blog
posts.
---
 app/ueber-bjoern/page.tsx | 171 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 app/ueber-bjoern/page.tsx

diff --git a/app/ueber-bjoern/page.tsx b/app/ueber-bjoern/page.tsx
new file mode 100644
index 0000000..b4e14dc
--- /dev/null
+++ b/app/ueber-bjoern/page.tsx
@@ -0,0 +1,171 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import Image from "next/image";
+import { Reveal } from "../components/Reveal";
+import { Footer } from "../components/Footer";
+
+const title = "Über mich";
+const description =
+  "Familienmensch, Vater, Teamleiter – und der Kopf hinter einfach produktiv. Warum die Seite entstanden ist und wofür sie steht.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  alternates: { canonical: "/ueber-bjoern" },
+  openGraph: {
+    title,
+    description,
+    url: "/ueber-bjoern",
+    type: "profile",
+    images: ["/about-author.jpg"],
+  },
+  twitter: {
+    title,
+    description,
+    images: ["/about-author.jpg"],
+  },
+};
+
+// Same hand-copied "H2 with brand underline" treatment as
+// /lebensuhr/page.tsx and /3x3-system/page.tsx use — no CMS post backs
+// this page either.
+function H2({ children }: { children: React.ReactNode }) {
+  return (
+    <h2
+      className="font-semibold text-h-small text-text-primary mt-4 first:mt-0"
+      style={{ fontFamily: "var(--font-lora)" }}
+    >
+      {children}
+      <span className="block h-[0.125rem] w-8 bg-brand mt-2" aria-hidden />
+    </h2>
+  );
+}
+
+function P({ children }: { children: React.ReactNode }) {
+  return <p className="text-body text-text-body">{children}</p>;
+}
+
+// Same visual language as RichText.tsx's Quote component (Caveat script +
+// brand divider) — for the page's two standout lines.
+function Quote({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative flex items-start gap-6 w-full my-2">
+      <div className="w-px self-stretch bg-brand shrink-0" />
+      <p className="text-text-primary text-[1.75rem] leading-[1.1] flex-1" style={{ fontFamily: "var(--font-caveat)" }}>
+        {children}
+      </p>
+    </div>
+  );
+}
+
+const highlights = [
+  "Impulse, die im echten Leben funktionieren",
+  "Orientierung statt Überforderung",
+  "Alltagstaugliche Systeme statt komplizierter Methoden",
+  "Ehrliche Einblicke statt Perfektionsfassade",
+];
+
+export default function UeberBjoernPage() {
+  return (
+    <>
+      <main className="flex flex-col flex-1 bg-bg-base">
+        <Reveal className="flex flex-col gap-4 items-start pt-10 pb-8 px-[var(--layout-padding-x)] w-full max-w-[48rem] mx-auto">
+          <p className="flex items-center gap-2 text-body-sm text-text-muted">
+            <Link href="/" className="hover:text-brand transition-colors">Startseite</Link>
+            <span>›</span>
+            <span className="text-text-primary">Über mich</span>
+          </p>
+          <div className="flex items-center gap-5">
+            <div className="relative size-20 shrink-0 rounded-full overflow-hidden">
+              <Image alt="Björn" src="/about-author.jpg" fill sizes="80px" className="object-cover" />
+            </div>
+            <p
+              className="font-semibold text-[clamp(2rem,1.393rem+1.5vw,2.75rem)] text-text-primary leading-[1.15]"
+              style={{ fontFamily: "var(--font-playfair)" }}
+            >
+              Hallo, ich bin Björn.
+            </p>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.1} className="w-full max-w-[48rem] mx-auto px-[var(--layout-padding-x)] pb-14 flex flex-col gap-5">
+          <P>
+            Familienmensch. Vater. Teamleiter. Und lange Zeit jemand, der dachte, Produktivität heißt vor
+            allem: möglichst viel schaffen.
+          </P>
+          <P>
+            Beruflich leite ich ein internationales IT-Team in der Logistikbranche. Privat bin ich
+            zwischen Homeoffice, Familienleben und einem Alltag unterwegs, der selten nach Plan läuft.
+            Genau dort ist einfach produktiv entstanden.
+          </P>
+
+          <H2>Warum einfach produktiv</H2>
+          <P>
+            Irgendwann habe ich gemerkt, dass ich ständig versuchte, meinen Alltag besser zu organisieren
+            – neue Apps, neue Methoden, neue Routinen. Vieles wurde effizienter. Trotzdem blieb das
+            Gefühl, an den wirklich wichtigen Dingen vorbeizuleben. Nicht weil ich zu wenig geschafft
+            habe, sondern weil ich mich zu selten gefragt habe, ob ich das Richtige geschafft habe.
+          </P>
+          <P>
+            Heute glaube ich: Es geht nicht darum, mehr zu schaffen. Es geht darum, zu erkennen, was in
+            deiner aktuellen Lebensphase zählt – und dir einen Anker zu setzen, der dich im Alltag daran
+            erinnert.
+          </P>
+
+          <H2>Wofür einfach produktiv steht</H2>
+          <P>
+            Die Welt erzählt dir ständig, wie du mehr schaffen kannst. Mich interessiert etwas anderes:
+            Wie schaffst du das Richtige? Deshalb geht es hier nicht um Selbstoptimierung um jeden Preis,
+            sondern um Orientierung statt Optimierung, um Klarheit statt einem weiteren System.
+          </P>
+          <Quote>Verlier dich nicht im Mehr. Verankere, was zählt.</Quote>
+
+          <H2>Was dich hier erwartet</H2>
+          <P>
+            Keine Patentrezepte. Sondern Gedanken, Erfahrungen und Werkzeuge, die sich in meinem eigenen
+            Alltag bewährt haben:
+          </P>
+          <ul className="flex flex-col gap-2 text-body text-text-body list-disc pl-5">
+            {highlights.map((h) => (
+              <li key={h}>{h}</li>
+            ))}
+          </ul>
+
+          <H2>Warum ich schreibe</H2>
+          <P>
+            Ich bin weder Coach noch Guru, sondern jemand, der selbst immer wieder versucht, Familie,
+            Beruf und eigene Projekte unter einen Hut zu bekommen. Nicht weil ich alles im Griff habe,
+            sondern weil ich glaube, dass wir voneinander lernen können. Wenn ein Gedanke davon deinen
+            Alltag ein Stück leichter macht, hat sich das schon gelohnt.
+          </P>
+          <Quote>Nicht alles, was zählt, steht auf einer To-do-Liste.</Quote>
+          <P>Herzliche Grüße, Björn</P>
+
+          {/* Same bordered CTA-card treatment /lebensuhr's and
+              /3x3-system's own closing links use. */}
+          <Link
+            href="/blog"
+            className="group flex items-center justify-between gap-4 border border-border rounded-md px-6 py-5 mt-2 hover:border-brand transition-colors"
+          >
+            <div className="flex flex-col gap-1">
+              <p className="font-bold text-[0.8125rem] text-brand">Weiterlesen:</p>
+              <p className="font-semibold text-body text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
+                Meine Gedanken im Blog
+              </p>
+              <p className="text-body-sm text-text-muted">Impulse und Werkzeuge aus dem echten Alltag.</p>
+            </div>
+            <svg
+              viewBox="0 0 20 20"
+              className="size-4 shrink-0 text-text-primary transition-transform duration-200 group-hover:translate-x-1"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path d="M4 10h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </Link>
+        </Reveal>
+      </main>
+      <Footer />
+    </>
+  );
+}