From ed9d77088966e01c8357941922379db1e9d23ab6 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 30 Jun 2026 20:55:23 +0000 Subject: [PATCH] feat: add Tools section with Lora font and Figma icons Co-Authored-By: Claude Sonnet 4.6 --- app/components/Tools.tsx | 93 ++++++++++++++++++++++++++++++++++++++ app/layout.tsx | 10 +++- app/page.tsx | 2 + public/icon-newsletter.svg | 5 ++ public/icon-rocket.svg | 8 ++++ public/icon-todo.svg | 11 +++++ 6 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 app/components/Tools.tsx create mode 100644 public/icon-newsletter.svg create mode 100644 public/icon-rocket.svg create mode 100644 public/icon-todo.svg 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 @@ + + + + + + + + + + +