Marco
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
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>
|
|
);
|
|
}
|