From b448f934a54e51e4fd9249eb536fd2304df614a2 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 20:53:00 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20add=20Divider=20section=20=E2=80=94=20K?=
 =?UTF-8?q?larheit=20=E2=86=92=20Fokus=20=E2=86=92=20Entlastung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/Divider.tsx      | 57 +++++++++++++++++++++++++++++++++
 app/page.tsx                    |  2 ++
 public/icon-separator-right.svg |  3 ++
 public/icon-separator.svg       |  3 ++
 4 files changed, 65 insertions(+)
 create mode 100644 app/components/Divider.tsx
 create mode 100644 public/icon-separator-right.svg
 create mode 100644 public/icon-separator.svg

diff --git a/app/components/Divider.tsx b/app/components/Divider.tsx
new file mode 100644
index 0000000..2f7db5e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 002503a..c70e94d 100644
--- a/app/page.tsx
+++ b/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>
   );
 }
diff --git a/public/icon-separator-right.svg b/public/icon-separator-right.svg
new file mode 100644
index 0000000..81b96f0
--- /dev/null
+++ b/public/icon-separator-right.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 27.7499 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="icon-separator-right" d="M19.1307 10.7844C19.8789 12.0287 20.7593 13.203 21.79 14.2187C22.3035 14.7275 22.8445 15.205 23.424 15.6308C24.0036 16.0548 24.6106 16.4345 25.2452 16.7608C25.7807 17.0392 26.3401 17.2604 26.9068 17.4558L26.9673 17.4761C27.5725 17.6862 27.8953 18.3499 27.6862 18.9582C27.5798 19.2697 27.3524 19.5075 27.0773 19.6366C26.1346 20.0753 25.1828 20.4624 24.2713 20.8569C23.4772 21.2016 22.7143 21.5427 22.0064 21.9317C21.2966 22.3169 20.6492 22.763 20.0458 23.2737C19.8955 23.4009 19.7451 23.5299 19.6038 23.67L19.3874 23.8746C19.3177 23.9428 19.2701 24.0074 19.2114 24.0719C19.0977 24.2028 18.9785 24.3207 18.8721 24.4848C18.7639 24.6415 18.6483 24.7816 18.5456 24.9512L18.2375 25.4563C18.1367 25.6277 18.045 25.8121 17.9496 25.989L17.8065 26.2563L17.6745 26.5365L17.4104 27.0951C16.7392 28.6178 16.1835 30.2253 15.7176 31.8548C15.4939 32.6715 15.2757 33.4918 15.1051 34.314C14.9345 35.1325 14.7805 35.9602 14.7053 36.7418C14.6319 37.5068 13.9552 38.0672 13.1941 37.9935C12.6146 37.9363 12.1524 37.5289 11.9983 36.998L11.9947 36.9814C11.7067 35.9823 11.5252 35.0329 11.3473 34.0909L10.8503 31.3055C10.5788 29.7957 10.2891 28.3062 9.88743 26.9163C9.68202 26.2287 9.44177 25.5687 9.16117 24.9991L8.93926 24.6046C8.85123 24.4701 8.75403 24.3318 8.66233 24.1954C8.46426 23.9262 8.25885 23.6589 8.02777 23.4046C7.57478 22.8921 7.06676 22.4073 6.52207 21.9519C5.97371 21.5021 5.39234 21.08 4.78713 20.6873C3.5767 19.9039 2.26907 19.2402 0.93027 18.7149C0.178338 18.4199 -0.193959 17.5664 0.101312 16.8106C0.251698 16.4216 0.548802 16.1341 0.904594 15.9866L0.917432 15.981C1.97564 15.546 3.03201 15.1091 4.01686 14.5948C5.02004 14.1007 5.94254 13.5219 6.79167 12.8786L7.41339 12.3808L7.98375 11.837C8.18366 11.6637 8.34505 11.4573 8.51928 11.2619C8.68617 11.0609 8.8769 10.8784 9.01995 10.6554L9.48028 10.0157C9.62517 9.79449 9.75171 9.55853 9.88926 9.33363L10.0928 8.99075C10.1552 8.87093 10.2102 8.74742 10.2689 8.62759L10.6192 7.89944C11.2189 6.5058 11.7434 5.00893 12.1909 3.49732C12.2899 3.13232 12.3963 2.8005 12.51 2.50187C12.5669 2.35255 12.6256 2.2106 12.6861 2.07603C12.7026 2.03548 12.7118 2.02626 12.7246 2.00783C12.7356 1.99123 12.7484 1.97464 12.7613 1.9599C12.7869 1.92856 12.8145 1.89906 12.8456 1.86957C12.9667 1.75159 13.1336 1.62992 13.295 1.46033C13.4582 1.29257 13.6104 1.08427 13.7314 0.864897C14.0836 0.214165 14.1313 -0.174799 14.3568 0.0777512C14.4119 0.142271 14.4779 0.251034 14.5512 0.42063C14.6246 0.588382 14.7035 0.822498 14.7603 1.12113C14.8172 1.41793 14.8447 1.77555 14.8318 2.14977C14.8282 2.24194 14.8227 2.34149 14.8172 2.42813C14.8117 2.4908 14.808 2.55533 14.8025 2.62169C14.7915 2.75442 14.7768 2.89083 14.7585 3.03277C14.7145 3.39224 14.6613 3.75724 14.6026 4.12777C14.5402 4.4983 14.4449 4.87068 14.3587 5.24489C14.1991 5.99517 13.9295 6.73992 13.6874 7.45886C13.5609 7.7833 13.4215 8.10406 13.2895 8.42666L13.0896 8.90964L12.8548 9.38156C12.6934 9.69494 12.5467 10.0139 12.3725 10.3199L11.8204 11.2287C11.0373 12.4158 10.0892 13.5053 9.01629 14.4307L8.191 15.0925C7.9104 15.3027 7.61879 15.4907 7.33086 15.6916C7.04659 15.8981 6.74765 16.0658 6.45055 16.2428C6.15344 16.4179 5.86001 16.6041 5.55557 16.7534L4.65141 17.2291L3.73809 17.6641L3.28143 17.8798L2.82294 18.0807L1.90411 18.4844L1.89311 16.1949C3.29244 16.7092 4.63858 17.3341 5.93337 18.0789C6.77516 18.5637 7.61513 19.1038 8.4019 19.7306C9.18868 20.3555 9.92044 21.0689 10.5183 21.8763C10.7127 22.1565 10.9163 22.4238 11.0924 22.7206C11.1822 22.87 11.2776 23.0008 11.3619 23.1667L11.6132 23.6497C11.7049 23.8119 11.7544 23.9686 11.8259 24.129C11.8901 24.2876 11.9635 24.4479 12.0185 24.6046C12.1212 24.918 12.2459 25.2351 12.3303 25.5448C12.7044 26.7909 12.9575 28.015 13.1904 29.228C13.4197 30.4409 13.6177 31.6447 13.8213 32.8282C14.0267 34.008 14.2321 35.1859 14.5146 36.2496L12.0882 36.4634C12.1982 35.4938 12.3908 34.5942 12.6072 33.6983C12.8695 32.6291 13.1721 31.582 13.5077 30.5405C13.8415 29.4989 14.2064 28.4666 14.6283 27.4472C15.0501 26.4278 15.5012 25.4157 16.0808 24.4295C16.3724 23.9373 16.6842 23.4488 17.0601 22.9732C17.106 22.9142 17.1481 22.8534 17.1995 22.7944L17.3591 22.6192L17.6818 22.2727C17.79 22.1565 17.8946 22.0736 18.0028 21.974C18.111 21.8782 18.2137 21.7786 18.3256 21.6883C18.9106 21.1851 19.5507 20.7371 20.2127 20.3445C20.8748 19.9518 21.557 19.6218 22.2319 19.3269C23.5854 18.7407 24.8912 18.2614 26.1346 17.6733L26.2795 19.5297C25.0691 19.1388 23.921 18.584 22.861 17.9093C21.8065 17.2254 20.8418 16.4235 19.967 15.5423C19.0977 14.6556 18.3219 13.686 17.6342 12.661C16.9482 11.6379 16.3687 10.53 15.8809 9.4129C15.2592 7.97686 14.8282 6.52792 14.5494 5.12138C14.267 3.71484 14.1386 2.34702 14.1368 1.04924C14.1386 0.560731 14.2431 0.265782 14.3953 0.184671L14.2285 0.60866C14.1881 0.645529 14.1276 0.67871 14.0671 0.693458C14.0065 0.708205 13.9497 0.708205 13.9093 0.704519C13.8268 0.695301 13.7956 0.684241 13.7883 0.695302C13.7846 0.704519 13.8066 0.739544 13.8983 0.774569C13.9442 0.79116 14.0102 0.805907 14.0872 0.798533C14.1643 0.793003 14.2486 0.765352 14.311 0.72664L14.5347 0.157019C14.7328 0.17914 14.9657 0.490681 15.1638 1.09348C15.7562 2.90005 16.3687 4.76929 17.084 6.5482C17.6672 8.0082 18.276 9.48479 19.0848 10.7863C19.0977 10.7826 19.1105 10.7789 19.127 10.7752L19.1307 10.7844Z" fill="var(--fill-0, #F6A701)"/>
+</svg>
diff --git a/public/icon-separator.svg b/public/icon-separator.svg
new file mode 100644
index 0000000..fa3898e
--- /dev/null
+++ b/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>