feat: add Tools section with Lora font and Figma icons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/Tools.tsx

@@ -0,0 +1,93 @@
+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.",
+    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" },
+  },
+];
+
+export function Tools() {
+  return (
+    <div className="flex flex-col gap-[3rem] items-start pb-[4rem] pt-[2rem] w-full bg-[#f5f0e8]">
+
+      {/* Section header */}
+      <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] text-[1.75rem]"
+          style={{ fontFamily: "var(--font-lora)" }}
+        >
+          Werkzeuge für einen leichteren Alltag.
+        </p>
+      </div>
+
+      {/* 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 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"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Card content */}
+            <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.75rem] w-full"
+                  style={{ fontFamily: "var(--font-lora)" }}
+                >
+                  {tool.title}
+                </p>
+                <p className="font-normal leading-[1.5rem] text-[1rem] w-full">
+                  {tool.description}
+                </p>
+              </div>
+              <Link
+                href={tool.cta.href}
+                className="font-bold leading-normal text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors"
+              >
+                🠖 {tool.cta.label}
+              </Link>
+            </div>
+          </div>
+        ))}
+      </div>
+
+    </div>
+  );
+}

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Playfair_Display, Caveat } from "next/font/google";
+import { Geist, Geist_Mono, Playfair_Display, Caveat, Lora } from "next/font/google";
 import "./globals.css";
 import { Navbar } from "./components/Navbar";
 
@@ -25,6 +25,12 @@ const caveat = Caveat({
   weight: ["700"],
 });
 
+const lora = Lora({
+  variable: "--font-lora",
+  subsets: ["latin"],
+  weight: ["600"],
+});
+
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -38,7 +44,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} ${playfair.variable} ${caveat.variable} h-full antialiased`}
+      className={`${geistSans.variable} ${geistMono.variable} ${playfair.variable} ${caveat.variable} ${lora.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">
           <Navbar />

app/page.tsx

@@ -1,11 +1,13 @@
 import { Hero } from "./components/Hero";
 import { Divider } from "./components/Divider";
+import { Tools } from "./components/Tools";
 
 export default function Home() {
   return (
     <main className="flex flex-col flex-1">
       <Hero />
       <Divider />
+      <Tools />
     </main>
   );
 }