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>
83 lines
3.1 KiB
TypeScript
83 lines
3.1 KiB
TypeScript
import Link from "next/link";
|
|
|
|
const tools = [
|
|
{
|
|
icon: { src: "/icon-rocket.svg", w: "3.375rem", h: "4.122rem", transform: "-scale-y-100" },
|
|
title: "Mini-Challenge",
|
|
description: "In 7 Tagen zu mehr Klarheit. Kleine Gewohnheiten, die Großes bewirken.",
|
|
cta: { label: "Starten", href: "/challenge" },
|
|
},
|
|
{
|
|
icon: { src: "/icon-todo.svg", w: "3rem", h: "3.879rem", transform: "-scale-y-100" },
|
|
title: "ToDo-Karten",
|
|
description: "Das Werkzeug für Fokus im Alltag. Bringe Struktur in deine Aufgaben und gewinne Zeit zurück.",
|
|
cta: { label: "Entdecken", href: "/werkzeuge" },
|
|
},
|
|
{
|
|
icon: { src: "/icon-newsletter.svg", w: "3rem", h: "2.579rem", transform: "-rotate-4 -scale-y-100" },
|
|
title: "Impulse & Tipps",
|
|
description: "Wöchentliche Impulse mit konkreten Ideen und erprobten Tipps für weniger Reibung und mehr Leichtigkeit.",
|
|
cta: { label: "Anmelden", href: "/newsletter" },
|
|
},
|
|
];
|
|
|
|
export function Tools() {
|
|
return (
|
|
<div id="werkzeuge" className="flex flex-col gap-8 lg:gap-[3rem] items-start pb-10 lg:pb-[4rem] pt-8 lg:pt-[2rem] w-full bg-[#f5f0e8]">
|
|
|
|
{/* Section header */}
|
|
<div className="flex flex-col gap-2 items-start px-4 md:px-8 lg:px-[5rem] w-full">
|
|
<p className="font-bold text-[#f6a701] text-[1.25rem]">
|
|
Meine Werkzeuge
|
|
</p>
|
|
<p
|
|
className="font-semibold text-[#222221]"
|
|
style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.375rem, 2.5vw, 1.75rem)" }}
|
|
>
|
|
Werkzeuge für einen leichteren Alltag.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tools grid: 1-col mobile → 2-col md → 3-col lg */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-[2.5rem] px-4 md:px-8 lg:px-[5rem] w-full">
|
|
{tools.map((tool) => (
|
|
<div key={tool.title} className="flex gap-6 items-start">
|
|
|
|
{/* Icon */}
|
|
<div className="flex items-center justify-center shrink-0">
|
|
<div className={tool.icon.transform}>
|
|
<div className="relative" style={{ width: tool.icon.w, height: tool.icon.h }}>
|
|
<img alt="" src={tool.icon.src} className="absolute inset-0 w-full h-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card content */}
|
|
<div className="flex flex-col gap-4 items-start min-w-0 text-[#222221] [word-break:break-word]">
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<p
|
|
className="font-semibold leading-normal text-[1.5rem] lg:text-[1.75rem] w-full"
|
|
style={{ fontFamily: "var(--font-lora)" }}
|
|
>
|
|
{tool.title}
|
|
</p>
|
|
<p className="font-normal leading-6 text-[1rem] w-full">
|
|
{tool.description}
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href={tool.cta.href}
|
|
className="font-bold text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors"
|
|
>
|
|
→ {tool.cta.label}
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|