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

Revert "feat: full responsive layout — mobile-first, lg breakpoint, fluid typography"

Browse Source 
This reverts commit 2505a87717.
This commit is contained in:
Marco
2026-06-30 22:07:51 +00:00
parent 2505a87717
commit b946697b12
9 changed files with 172 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Tools.tsx
+27 -16
View File
@@ -3,18 +3,21 @@ import Link from "next/link";
const tools = [
{
icon: { src: "/icon-rocket.svg", w: "3.375rem", h: "4.122rem", transform: "-scale-y-100" },
pr: "3.375rem",
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" },
pr: "2rem",
title: "ToDo-Karten",
description: "Das Werkzeug für Fokus im Alltag. Bringe Struktur in deine Aufgaben und gewinne Zeit zurück.",
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" },
pr: "2rem",
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" },
@@ -23,56 +26,64 @@ const tools = [
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]">
<div id="werkzeuge" className="flex flex-col gap-[3rem] items-start pb-[4rem] 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">
<div className="flex flex-col gap-[0.5rem] items-start px-[5rem] w-full whitespace-nowrap overflow-clip">
<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)" }}
className="font-semibold text-[#222221] text-[1.75rem]"
style={{ fontFamily: "var(--font-lora)" }}
>
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 grid */}
<div className="flex gap-[2.5rem] h-[12.5rem] items-center overflow-clip px-[5rem] w-full">
{tools.map((tool) => (
<div key={tool.title} className="flex gap-6 items-start">
<div
key={tool.title}
className="flex flex-[1_0_0] gap-[2rem] h-full items-start min-w-px overflow-clip relative"
style={{ paddingRight: tool.pr }}
>
{/* 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" />
<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">
<div
className="flex flex-[1_0_0] flex-col h-full items-start justify-between min-w-px overflow-clip p-[0.5rem] text-[#222221] [word-break:break-word]"
>
<div className="flex flex-col gap-[1rem] items-start w-full">
<p
className="font-semibold leading-normal text-[1.5rem] lg:text-[1.75rem] w-full"
className="font-semibold leading-normal text-[1.75rem] w-full"
style={{ fontFamily: "var(--font-lora)" }}
>
{tool.title}
</p>
<p className="font-normal leading-6 text-[1rem] w-full">
<p className="font-normal leading-[1.5rem] 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"
className="font-bold leading-normal text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors"
>
→ {tool.cta.label}
</Link>
</div>
</div>
))}
</div>