diff --git a/app/components/Tools.tsx b/app/components/Tools.tsx
new file mode 100644
index 0000000..594361d
--- /dev/null
+++ b/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 (
+
+
+ {/* Section header */}
+
+
+ Meine Werkzeuge
+
+
+ Werkzeuge für einen leichteren Alltag.
+
+
+
+ {/* Tools grid */}
+
+ {tools.map((tool) => (
+
+ {/* Icon */}
+
+
+
+

+
+
+
+
+ {/* Card content */}
+
+
+
+ {tool.title}
+
+
+ {tool.description}
+
+
+
+ 🠖 {tool.cta.label}
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 09a0d65..69193bb 100644
--- a/app/layout.tsx
+++ b/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 (
diff --git a/app/page.tsx b/app/page.tsx
index c70e94d..a2f5356 100644
--- a/app/page.tsx
+++ b/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 (
+
);
}
diff --git a/public/icon-newsletter.svg b/public/icon-newsletter.svg
new file mode 100644
index 0000000..9c97b64
--- /dev/null
+++ b/public/icon-newsletter.svg
@@ -0,0 +1,5 @@
+
diff --git a/public/icon-rocket.svg b/public/icon-rocket.svg
new file mode 100644
index 0000000..b28bcb3
--- /dev/null
+++ b/public/icon-rocket.svg
@@ -0,0 +1,8 @@
+
diff --git a/public/icon-todo.svg b/public/icon-todo.svg
new file mode 100644
index 0000000..d333d20
--- /dev/null
+++ b/public/icon-todo.svg
@@ -0,0 +1,11 @@
+