Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Divider section — Klarheit → Fokus → Entlastung

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-06-30 20:53:00 +00:00
parent 45644f78df
commit b448f934a5
4 changed files with 65 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Divider.tsx
+57
View File
@@ -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
+2
View File
@@ -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>
);
}