diff --git a/app/agb/page.tsx b/app/agb/page.tsx index ce3602f..b63d4c0 100644 --- a/app/agb/page.tsx +++ b/app/agb/page.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import Link from "next/link"; +import Image from "next/image"; import { Reveal } from "../components/Reveal"; import { Footer } from "../components/Footer"; import { TrustRow } from "../components/TrustRow"; @@ -42,7 +43,7 @@ export default async function AgbPage() { {/* Static, not part of the CMS content — same reasoning as the Impressum/Datenschutz pages' own callout cards. */}
- +

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx index 7747da7..8c163aa 100644 --- a/app/blog/[slug]/page.tsx +++ b/app/blog/[slug]/page.tsx @@ -110,7 +110,7 @@ export default async function BlogDetailPage({ href="/todo-cards" className="group flex items-center gap-6 border border-border rounded-md px-9 py-7 hover:border-brand transition-colors" > - +

Passend dazu:

diff --git a/app/components/About.tsx b/app/components/About.tsx index 8ed7eb7..362fb89 100644 --- a/app/components/About.tsx +++ b/app/components/About.tsx @@ -1,3 +1,4 @@ +import Image from "next/image"; import { Reveal } from "./Reveal"; export function About() { @@ -75,10 +76,12 @@ export function About() { style={{ minHeight: "14rem" }} delay={0.15} > - Björn {/* Left gradient: wide enough to cover the text-column overlap — md+ only */}
diff --git a/app/components/AddToCartInlineButton.tsx b/app/components/AddToCartInlineButton.tsx index d1850fb..53c4d17 100644 --- a/app/components/AddToCartInlineButton.tsx +++ b/app/components/AddToCartInlineButton.tsx @@ -1,6 +1,7 @@ "use client"; import { useEffect, useRef, useState } from "react"; +import Image from "next/image"; import { addToCart } from "../lib/cart"; import { useCartFly } from "./CartFly"; @@ -61,7 +62,7 @@ export function AddToCartInlineButton({ > {added ? "Hinzugefügt ✓" : label} - + ); } diff --git a/app/components/Divider.tsx b/app/components/Divider.tsx index 4ebb9bd..b016f83 100644 --- a/app/components/Divider.tsx +++ b/app/components/Divider.tsx @@ -1,3 +1,4 @@ +import Image from "next/image"; import { Reveal } from "./Reveal"; function Word({ children }: { children: string }) { @@ -16,7 +17,7 @@ function Arrow() {
- +
@@ -60,7 +61,7 @@ export function Divider() { className="relative" style={{ height: "var(--divider-sparkle-inner-h)", width: "var(--divider-sparkle-inner-w)" }} > - +
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx index 9e48157..408a352 100644 --- a/app/components/Hero.tsx +++ b/app/components/Hero.tsx @@ -61,11 +61,7 @@ export function Hero() { Starte mit der 7-Tage-Challenge
- +
diff --git a/app/components/RichText.tsx b/app/components/RichText.tsx index 554750d..584f8ac 100644 --- a/app/components/RichText.tsx +++ b/app/components/RichText.tsx @@ -1,4 +1,5 @@ import type { ReactNode } from "react"; +import Image from "next/image"; import type { TOCSection } from "./SectionTOC"; // Minimal Lexical JSON → JSX renderer for Payload's richText fields. @@ -146,8 +147,8 @@ function renderNode(node: LexicalNode, key: string): ReactNode { return (
- - + + {/* Hand-drawn underline image, not a plain bar — exported straight from the Figma node (label-underline). */} -
diff --git a/app/components/Tools.tsx b/app/components/Tools.tsx index e5259c8..7c03a65 100644 --- a/app/components/Tools.tsx +++ b/app/components/Tools.tsx @@ -1,4 +1,5 @@ import Link from "next/link"; +import Image from "next/image"; import { Reveal, RevealGroup, RevealItem } from "./Reveal"; import { getWerkzeugeCards } from "../lib/payload"; @@ -38,8 +39,8 @@ export async function Tools() { className="md:col-span-4 flex gap-8 items-start rounded-md transition-transform duration-300 hover:-translate-y-1" > {/* Icon — uniform box, pre-flipped/rotated source asset */} -
- +
+
{/* Card content — self-stretch + h-full + justify-between so diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx index 77c64e8..ce1da57 100644 --- a/app/components/TrustRow.tsx +++ b/app/components/TrustRow.tsx @@ -1,3 +1,4 @@ +import Image from "next/image"; import { getTrustBadges } from "../lib/payload"; // Content now lives in Payload (TrustBadges collection) instead of being @@ -15,7 +16,9 @@ export async function TrustRow() {
{i > 0 &&
}
- +
+ +

{item.title}

{item.description}

diff --git a/app/datenschutz/page.tsx b/app/datenschutz/page.tsx index 4ed2da3..a1dde9d 100644 --- a/app/datenschutz/page.tsx +++ b/app/datenschutz/page.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import Link from "next/link"; +import Image from "next/image"; import { Reveal } from "../components/Reveal"; import { Footer } from "../components/Footer"; import { RichText, extractHeadings } from "../components/RichText"; @@ -43,7 +44,7 @@ export default async function DatenschutzPage() { callout doesn't belong in the generic LegalPages richText field shared across all 4 legal page types. */}
- +

- +

( -

{step.title}

@@ -62,9 +76,11 @@ export function HowItWorks() { // technique as Challenge's step connector and todo-cards' // identical HowItWorks, not just the same icon asset.
-
diff --git a/app/newsletter/components/WeeklyBenefits.tsx b/app/newsletter/components/WeeklyBenefits.tsx index 4e31a72..f395c5e 100644 --- a/app/newsletter/components/WeeklyBenefits.tsx +++ b/app/newsletter/components/WeeklyBenefits.tsx @@ -31,7 +31,7 @@ export function WeeklyBenefits() {
    {benefits.map((b) => (
  • - +

    {b.title}

    {b.desc}

    diff --git a/app/not-found.tsx b/app/not-found.tsx index 89ac7d4..a35a484 100644 --- a/app/not-found.tsx +++ b/app/not-found.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import Link from "next/link"; +import Image from "next/image"; import { Reveal, RevealGroup, RevealItem } from "./components/Reveal"; import { Footer } from "./components/Footer"; import { TrustRow } from "./components/TrustRow"; @@ -116,9 +117,12 @@ export default function NotFound() { actual photographed/rendered note rather than recreating its handwriting in CSS. */} - Sticky Note: 404. Nicht hier. Aber dein Ziel ist sicher nicht weit. @@ -178,9 +182,12 @@ export default function NotFound() { the flat mockup image instead of in Figma. */}
    -
    diff --git a/app/todo-cards/components/Focus.tsx b/app/todo-cards/components/Focus.tsx index 87244df..9b56109 100644 --- a/app/todo-cards/components/Focus.tsx +++ b/app/todo-cards/components/Focus.tsx @@ -34,7 +34,7 @@ export function Focus() {
      {bullets.map((b) => (
    • - + {b}
      • ))} diff --git a/app/todo-cards/components/HowItWorks.tsx b/app/todo-cards/components/HowItWorks.tsx index 8b4c0cd..afe7ece 100644 --- a/app/todo-cards/components/HowItWorks.tsx +++ b/app/todo-cards/components/HowItWorks.tsx @@ -1,19 +1,29 @@ import { Fragment } from "react"; +import Image from "next/image"; import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal"; +// Each icon's own real pixel dimensions (not uniformly square, e.g. +// icon-step-2 is 180x168) — needed so the `h-16 w-auto` sizing below infers +// the correct aspect ratio instead of stretching/squashing to a guessed one. const steps = [ { icon: "/icon-step-1.png", + width: 165, + height: 177, title: "1. Aufschreiben", desc: "Notiere deine Aufgaben und alles, was dir im Kopf herumgeht.", }, { icon: "/icon-step-2.png", + width: 180, + height: 168, title: "2. Priorisieren", desc: "Wähle deine 3 wichtigsten Aufgaben für heute aus und schreibe sie auf.", }, { icon: "/icon-step-3.png", + width: 180, + height: 177, title: "3. Umsetzen", desc: "Konzentriere dich auf das Wesentliche und hake ab, was wirklich zählt.", }, @@ -47,21 +57,21 @@ export function HowItWorks() { {steps.map((step, i) => ( - {/* Plain , not next/image — one of the three source PNGs - isn't square (icon-step-2 is 68.6x64), and next/image's - required width/height props fought with Tailwind's - `img { height: auto }` preflight reset (console warning: - "width or height modified, but not the other"). A fixed - h-16 + w-auto lets each icon keep its own real aspect - ratio without that conflict — matches how every other - small decorative icon in this codebase (Tools.tsx etc.) - is already a plain , not next/image. group-hover - scale is a small "step acknowledges you" touch — the - whole text column is the hover target, not just the icon, - so it's easy to trigger without precise pointing. */} -

      {step.title}

      @@ -73,9 +83,11 @@ export function HowItWorks() { // — same margin-based centering technique as Challenge's // step connector, not just the same icon asset.
      -
      diff --git a/app/widerruf/page.tsx b/app/widerruf/page.tsx index 311da24..cdf0882 100644 --- a/app/widerruf/page.tsx +++ b/app/widerruf/page.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import Link from "next/link"; +import Image from "next/image"; import { Reveal } from "../components/Reveal"; import { Footer } from "../components/Footer"; import { TrustRow } from "../components/TrustRow"; @@ -42,7 +43,7 @@ export default async function WiderrufPage() { {/* Static, not part of the CMS content — same reasoning as the Impressum/Datenschutz/AGB pages' own callout cards. */}
      - +