Marco
2505a87717
Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type. Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close, h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open. Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image scales responsively, gradient mask via .hero-mask only at lg+ in CSS. Divider: flex-wrap + gap-y for smaller screens. Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight. Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row, excerpt hidden on mobile secondary cards to save space. About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo. Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+. Footer: flex-col→lg:flex-row, flex-wrap on legal links. globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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-8 lg:pt-[3rem] w-full bg-[#f5f0e8]">
|
|
<div className="flex flex-wrap gap-x-[2rem] gap-y-3 items-center justify-center px-4">
|
|
|
|
<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>
|
|
);
|
|
}
|