feat(About): dark banner section with script quote, signature, and author photo

Two-column layout: left column stacks serif statement above a row of
Caveat quote (flex-1) + 2px golden divider + author bio (shrink-0).
Signature image is absolute-positioned just below the three Caveat lines
(top: 6.44rem = 3 × 32px line-height). Right column is a full-height
overflow-hidden container with object-cover author photo.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/About.tsx

@@ -0,0 +1,71 @@
+export function About() {
+  return (
+    <section className="bg-[#111] flex items-stretch w-full">
+
+      {/* Left: text content */}
+      <div className="flex-1 flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0">
+
+        {/* Large serif statement — width-constrained as per design */}
+        <p
+          className="font-semibold text-white text-[1.75rem] leading-normal w-[17.625rem]"
+          style={{ fontFamily: "var(--font-lora)" }}
+        >
+          Ich glaube nicht, dass Menschen mehr Disziplin brauchen.
+        </p>
+
+        {/* Quote row: script quote + golden divider + author bio */}
+        <div className="flex items-start justify-between w-full">
+
+          {/* Caveat script text with signature positioned below */}
+          <div className="relative flex-1" style={{ minHeight: "8rem" }}>
+            <div
+              className="font-normal text-[#f6a701] text-[2.25rem]"
+              style={{ fontFamily: "var(--font-caveat)", lineHeight: "2rem" }}
+            >
+              <p>Ich glaube,</p>
+              <p>sie brauchen&nbsp;</p>
+              <p>weniger Reibung.</p>
+            </div>
+            {/* Signature — absolute, sits just below the three Caveat lines (3 × 32px = 96px) */}
+            <div
+              className="absolute overflow-hidden pointer-events-none"
+              style={{ top: "6.44rem", left: "1.5rem", width: "9.375rem", height: "1.375rem" }}
+            >
+              <img
+                alt=""
+                src="/about-signature.png"
+                className="absolute max-w-none"
+                style={{ width: "101.25%", height: "118.18%", left: "-0.62%", top: "-17.72%" }}
+              />
+            </div>
+          </div>
+
+          {/* Golden vertical divider + author lines */}
+          <div className="flex gap-6 items-start shrink-0">
+            <div className="bg-[#f6a701] w-[2px] h-24 shrink-0" />
+            <div
+              className="text-white font-normal whitespace-nowrap"
+              style={{ fontSize: "1rem", lineHeight: "1.5rem" }}
+            >
+              <p>Björn.</p>
+              <p>Führungskraft.</p>
+              <p>Familienmensch.</p>
+              <p>Gründer von einfach-produktiv.</p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Right: author photo fills full column height */}
+      <div className="flex-1 relative overflow-hidden" style={{ minHeight: "14rem" }}>
+        <img
+          alt="Björn"
+          src="/about-author.jpg"
+          className="absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
+        />
+      </div>
+
+    </section>
+  );
+}

app/page.tsx

@@ -2,6 +2,7 @@ import { Hero } from "./components/Hero";
 import { Divider } from "./components/Divider";
 import { Tools } from "./components/Tools";
 import { Blog } from "./components/Blog";
+import { About } from "./components/About";
 
 export default function Home() {
   return (
@@ -10,6 +11,7 @@ export default function Home() {
       <Divider />
       <Tools />
       <Blog />
+      <About />
     </main>
   );
 }