feat: add Divider section — Klarheit → Fokus → Entlastung

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

app/components/Divider.tsx

@@ -0,0 +1,57 @@
+export function Divider() {
+  return (
+    <div className="flex items-center justify-center pb-[1.25rem] pt-[3rem] w-full bg-[#f5f0e8]">
+      <div className="flex gap-[2rem] items-center overflow-clip shrink-0">
+
+        <p
+          className="font-bold leading-normal text-[#222221] text-[2rem] whitespace-nowrap"
+          style={{ fontFamily: "var(--font-caveat)" }}
+        >
+          Klarheit
+        </p>
+
+        {/* Arrow separator (flipped) */}
+        <div className="flex items-center justify-center">
+          <div className="-scale-y-100 rotate-180">
+            <div className="h-[0.75rem] relative w-[2.625rem]">
+              <img alt="" src="/icon-separator.svg" className="absolute inset-0 w-full h-full" />
+            </div>
+          </div>
+        </div>
+
+        <p
+          className="font-bold leading-normal text-[#222221] text-[2rem] whitespace-nowrap"
+          style={{ fontFamily: "var(--font-caveat)" }}
+        >
+          Fokus
+        </p>
+
+        {/* Arrow separator (flipped) */}
+        <div className="flex items-center justify-center">
+          <div className="-scale-y-100 rotate-180">
+            <div className="h-[0.75rem] relative w-[2.625rem]">
+              <img alt="" src="/icon-separator.svg" className="absolute inset-0 w-full h-full" />
+            </div>
+          </div>
+        </div>
+
+        <p
+          className="font-bold leading-normal text-[#222221] text-[2rem] whitespace-nowrap"
+          style={{ fontFamily: "var(--font-caveat)" }}
+        >
+          Entlastung
+        </p>
+
+        {/* Sparkle icon */}
+        <div className="flex items-center justify-center h-[2.506rem] w-[1.919rem]">
+          <div style={{ rotate: "4.6deg" }}>
+            <div className="h-[2.375rem] relative w-[1.734rem]">
+              <img alt="" src="/icon-separator-right.svg" className="absolute inset-0 w-full h-full" />
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -1,9 +1,11 @@
 import { Hero } from "./components/Hero";
+import { Divider } from "./components/Divider";
 
 export default function Home() {
   return (
     <main className="flex flex-col flex-1">
       <Hero />
+      <Divider />
     </main>
   );
 }

public/icon-separator.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 42 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="icon-separator" d="M7.3781 7.32382C8.70915 8.16717 9.71867 8.803 10.7243 9.44607C11.064 9.66331 11.4104 9.87485 11.7246 10.1316C12.164 10.4908 12.8069 10.8533 12.4464 11.5763C12.1057 12.2594 11.4379 11.9504 10.9203 11.7861C10.3846 11.616 9.87194 11.3441 9.36682 11.0771C7.0894 9.87309 4.8142 8.66384 2.54744 7.43617C1.94479 7.10979 1.32883 6.77678 0.799393 6.33261C-0.318108 5.39517 -0.269025 4.50123 0.978528 3.79678C2.62677 2.86616 4.32419 2.03866 6.00576 1.17926C6.71882 0.81482 7.42935 0.430382 8.17206 0.154857C8.59183 -0.000885194 9.07471 0.046106 9.54749 0C9.67446 1.07292 9.11475 1.29675 8.62544 1.57875C7.3814 2.2955 6.1349 3.00712 4.89383 3.72995C4.45624 3.9848 4.03163 4.26611 3.60014 4.86112C4.21733 4.9371 4.83282 5.04685 5.45197 5.08361C10.1748 5.36411 14.8983 5.6334 19.6219 5.90039C26.482 6.28815 33.3429 6.66278 40.202 7.07127C40.7607 7.10454 41.3085 7.35514 42 7.5422C41.3738 8.57289 40.6437 8.34278 40.0235 8.32517C36.6461 8.22943 33.2696 8.09337 29.8929 7.96899C22.6332 7.70159 15.3736 7.43249 8.11379 7.16811C8.00679 7.1642 7.89824 7.21131 7.3781 7.32382Z" fill="var(--fill-0, #222221)"/>
+</svg>