+ {items.length > 0 ? "Schön, dass du da bist." : "Dein Warenkorb ist noch leer."}
+
+
+
+ {items.length === 0 ? (
+
+
+ Schau dir unsere Produkte an und finde, was zu dir passt.
+
+
+ ←
+ Weiter einkaufen
+
+
+ ) : (
+
+ {/* Cart card — lg:-only split from the sidebar (same "wide content
+ next to sidebar" shape as the Hero's image/text split, see
+ figma-to-nextjs skill Gotcha #5: Figma's 830px card alone
+ already exceeds the 768px Tablet floor, so md: would never
+ have had room for a real 2-column layout at Tablet widths
+ anyway). */}
+
+ {items.map(({ entry, product }, i) => (
+
+ Nach deiner Bestellung bekommst du regelmäßig Impulse & Tipps per E-Mail.
+
+
+ Für mehr Klarheit, Fokus und Struktur – jede Woche.
+
+
+
+
+ )}
+
+ setVersandOpen(false)} />
+
+ );
+}
diff --git a/app/cart/components/RelatedProducts.tsx b/app/cart/components/RelatedProducts.tsx
new file mode 100644
index 0000000..2c8f4c2
--- /dev/null
+++ b/app/cart/components/RelatedProducts.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { PRODUCTS, RELATED_PRODUCT_IDS, formatPrice } from "../../lib/products";
+import { Reveal } from "../../components/Reveal";
+import { AddToCartInlineButton, FEEDBACK_MS } from "../../components/AddToCartInlineButton";
+import { useCart } from "../../lib/cart";
+
+const ALL_PRODUCT_IDS = Object.keys(PRODUCTS);
+const DISPLAY_COUNT = 3;
+
+function pickRandom(excludeIds: string[], count: number): string[] {
+ const pool = ALL_PRODUCT_IDS.filter((id) => !excludeIds.includes(id));
+ const shuffled = [...pool].sort(() => Math.random() - 0.5);
+ return shuffled.slice(0, count);
+}
+
+export function RelatedProducts() {
+ const cart = useCart();
+ const hasItems = cart.length > 0;
+ const cartKey = cart
+ .map((i) => i.id)
+ .sort()
+ .join(",");
+
+ // Math.random() can't run during the render that has to match the SSR
+ // pass (that would be a hydration mismatch — server and client would
+ // pick different products) — so the first paint always shows the fixed
+ // RELATED_PRODUCT_IDS fallback, and a client-only effect swaps in the
+ // real, cart-aware random pick right after mount.
+ const [displayIds, setDisplayIds] = useState(RELATED_PRODUCT_IDS);
+
+ // First run (mount/hydration): pick the initial random set. After that,
+ // don't reshuffle everything on every cart change — one of these cards'
+ // own AddToCartInlineButton adds to the cart without navigating away,
+ // and a full reshuffle would yank the other two cards out from under
+ // the user mid-browse. Instead, only swap out whichever displayed card
+ // just became "already in the cart" (no longer relevant to recommend)
+ // and top that one slot back up — the rest stay exactly where they were.
+ const pickedRef = useRef(false);
+ const swapTimeoutRef = useRef | undefined>(undefined);
+
+ useEffect(() => () => clearTimeout(swapTimeoutRef.current), []);
+
+ useEffect(() => {
+ const cartIds = cartKey ? cartKey.split(",") : [];
+
+ if (!pickedRef.current) {
+ pickedRef.current = true;
+ setDisplayIds(pickRandom(cartIds, DISPLAY_COUNT));
+ return;
+ }
+
+ // Delayed by FEEDBACK_MS, not immediate — the add usually came from
+ // clicking one of THESE cards' own AddToCartInlineButton, which shows
+ // a ~2s green "Hinzugefügt ✓" state. Swapping the card out right away
+ // unmounts that button before the confirmation is ever visible.
+ clearTimeout(swapTimeoutRef.current);
+ swapTimeoutRef.current = setTimeout(() => {
+ setDisplayIds((prev) => {
+ const stillRelevant = prev.filter((id) => !cartIds.includes(id));
+ const missing = DISPLAY_COUNT - stillRelevant.length;
+ if (missing <= 0) return stillRelevant;
+
+ let replacements = pickRandom([...cartIds, ...stillRelevant], missing);
+
+ // The catalog only has 5 products — once the cart holds 3+
+ // distinct ones, "3 recommendations that aren't already in the
+ // cart" becomes mathematically impossible (5 - 3 in cart leaves
+ // only 2 to show). Falling back to re-suggesting something
+ // already in the cart (a normal "grab another one" pattern) beats
+ // silently shrinking the grid below DISPLAY_COUNT.
+ if (replacements.length < missing) {
+ const stillMissing = missing - replacements.length;
+ const fallback = pickRandom([...stillRelevant, ...replacements], stillMissing);
+ replacements = [...replacements, ...fallback];
+ }
+
+ return [...stillRelevant, ...replacements];
+ });
+ }, FEEDBACK_MS);
+ }, [cartKey]);
+
+ if (displayIds.length === 0) return null;
+
+ return (
+
+
+
+ {hasItems ? "Weitere Tools für deinen klaren Alltag." : "Entdecke, was zu dir passt."}
+
+
+
+ {/* No separate price-disclosure footnote here — the single
+ "* inkl. MwSt., zzgl. Versandkosten" note lives directly under
+ the cart's own product table instead (CartContent.tsx), close
+ enough on the same page view to cover these cards too.
+
+ Plain divs, not RevealGroup/RevealItem — this is the one grid on
+ the site whose items get swapped after the initial mount (see
+ the swap-in-place effect above). RevealItem has no viewport
+ trigger of its own; it only ever renders visible because it
+ inherits the parent RevealGroup's already-resolved "show" state
+ at first mount. A card swapped in later doesn't get a fresh
+ trigger and can end up stuck at its hidden variant
+ (opacity: 0) — invisible. Not worth chasing a fix for a
+ scroll-reveal nicety on a list that mutates; a static grid
+ renders correctly with no animation risk. */}
+
+
+ );
+}
diff --git a/app/cart/page.tsx b/app/cart/page.tsx
new file mode 100644
index 0000000..69fcbe0
--- /dev/null
+++ b/app/cart/page.tsx
@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { CartContent } from "./components/CartContent";
+import { RelatedProducts } from "./components/RelatedProducts";
+import { TrustRow } from "../components/TrustRow";
+import { Footer } from "../components/Footer";
+
+// robots: noindex — transactional page (mirrors a specific shopper's cart
+// contents), per the figma-to-nextjs skill's Step 5 guidance: indexing
+// this wastes crawl budget and could surface cart state in search results.
+export const metadata: Metadata = {
+ title: "Warenkorb",
+ description: "Dein Warenkorb bei einfach produktiv.",
+ robots: {
+ index: false,
+ follow: true,
+ },
+};
+
+export default function CartPage() {
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/challenge/page.tsx b/app/challenge/page.tsx
index 3ffeaca..19c5671 100644
--- a/app/challenge/page.tsx
+++ b/app/challenge/page.tsx
@@ -178,47 +178,70 @@ export default function ChallengePage() {
{/* ── Hero ── */}
- {/* Left: text + form */}
-
+ {/* Left: text + form. justify-center removed from here — the
+ outer section's items-stretch already makes this column full
+ height, but centering its whole content (breadcrumb included)
+ made the breadcrumb's Y position drift depending on this
+ page's content length vs. /todo-cards's and /newsletter's own
+ (different) content lengths. Same fix as both of those. */}
+ {/* pt-10 md:pt-12 (not the original py-10 lg:py-14's top value) —
+ matches /todo-cards's and /newsletter's breadcrumb top offset
+ exactly; pb-10 lg:pb-14 keeps this page's original bottom
+ spacing, which was never the inconsistent part. */}
+
- {/* Breadcrumb */}
-
- Startseite
+ {/* Breadcrumb — 3 levels (Startseite › Werkzeuge ›
+ 7-Tage-Challenge), matching /todo-cards's and
+ /newsletter's pattern; was missing "Werkzeuge" in the
+ middle. Also switched from this page's hardcoded hex
+ colors to the shared text-body-sm/text-text-muted/
+ text-text-primary tokens the other two breadcrumbs use —
+ text-body-sm is 0.875rem, identical to the old literal
+ value, so this is a pure consistency fix, not a visual
+ change. Deliberately NOT part of the centered block below. */}
+
+ {/* Everything else — centered in the remaining vertical space,
+ same fix as /todo-cards's and /newsletter's Hero sections. */}
+
+ {/* Headline */}
+
+ 7 Tage.
+ Mehr Klarheit.
+ Weniger Stress.
+
- {/* Subtitle */}
-
- Die 7-Tage-Challenge für deinen klaren Kopf und mehr Struktur im Alltag.
-
+ {/* Subtitle */}
+
+ Die 7-Tage-Challenge für deinen klaren Kopf und mehr Struktur im Alltag.
+
- {/* Checklist */}
-
- {[
- "7 kurze Impulse – direkt in dein Postfach",
- "Praktisch, umsetzbar und alltagstauglich",
- "Für mehr Fokus, Ruhe und Klarheit",
- ].map((item) => (
-
-
- {item}
-
- ))}
-
+ {/* Checklist */}
+
+ {[
+ "7 kurze Impulse – direkt in dein Postfach",
+ "Praktisch, umsetzbar und alltagstauglich",
+ "Für mehr Fokus, Ruhe und Klarheit",
+ ].map((item) => (
+
+
+ {item}
+
+ ))}
+
- {/* Email form */}
-
+ {/* Email form */}
+
+
{/* Right: hero image with badge — group + scale-105 on hover,
@@ -330,8 +353,14 @@ export default function ChallengePage() {
{/* ── Was andere sagen ── */}
+ {/* max-w-[1600px], not this page's other sections' 1280px — a
+ deliberate compromise with /todo-cards's and /newsletter's
+ unbounded fluid width, so all three testimonial sections cap
+ at the same width instead of Challenge's reading narrower on
+ wide viewports. Only this one section's cap changed, not the
+ rest of the page. */}
-
+
- {/* Same micro-interactions as /todo-cards's identically-styled
- testimonial cards (kept in sync deliberately): hover-lift on
+ {/* Same style + micro-interactions as /todo-cards's and
+ /newsletter's identically-styled testimonial cards (kept in
+ sync deliberately): decorative quote-mark, hover-lift on
the card, avatar scale on the same hover via `group`. */}
{testimonials.map((t) => (
-
{t.quote}
+
+ ”
+
+
{t.quote}
| undefined>(undefined);
+ const buttonRef = useRef(null);
+ const { fly } = useCartFly();
+
+ useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+ function handleClick() {
+ addToCart(PRODUCT_ID);
+ if (buttonRef.current) fly(buttonRef.current);
+ setAdded(true);
+ clearTimeout(timeoutRef.current);
+ timeoutRef.current = setTimeout(() => setAdded(false), FEEDBACK_MS);
+ }
+
+ const base =
+ className ??
+ "inline-flex items-center justify-center px-6 py-[0.8125rem] rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base";
+ // Trailing `!` — Tailwind v4's important-modifier syntax moved from a
+ // leading `!` to this trailing suffix — forces the success color to win
+ // over whatever bg-brand/text-text-primary each caller already baked
+ // into `base`, since appending on top can't rely on CSS source order
+ // the way branching a whole className (AddToCartInlineButton's
+ // approach) can when the base itself varies per caller.
+ const stateClasses = added ? "bg-success! hover:bg-success! text-white!" : "";
+
+ return (
+
+ );
+}
diff --git a/app/components/AddToCartInlineButton.tsx b/app/components/AddToCartInlineButton.tsx
new file mode 100644
index 0000000..3ffa63d
--- /dev/null
+++ b/app/components/AddToCartInlineButton.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { addToCart } from "../lib/cart";
+import { useCartFly } from "./CartFly";
+
+// Exported so consumers like RelatedProducts.tsx can delay their own
+// follow-up UI changes (e.g. swapping out this exact card) until after
+// the success state has actually had time to be seen.
+export const FEEDBACK_MS = 2000;
+
+/**
+ * Add-to-cart button that stays on the page (unlike AddToCartButton, which
+ * navigates to /cart) — used wherever a product grid lets you keep browsing,
+ * so a click needs its own success confirmation instead of relying on the
+ * navigation itself as feedback.
+ */
+export function AddToCartInlineButton({
+ id,
+ label = "In den Warenkorb",
+ className,
+}: {
+ id: string;
+ label?: string;
+ className?: string;
+}) {
+ const [added, setAdded] = useState(false);
+ const timeoutRef = useRef | undefined>(undefined);
+ const buttonRef = useRef(null);
+ const { fly } = useCartFly();
+
+ useEffect(() => () => clearTimeout(timeoutRef.current), []);
+
+ function handleClick() {
+ addToCart(id);
+ if (buttonRef.current) fly(buttonRef.current);
+ setAdded(true);
+ clearTimeout(timeoutRef.current);
+ timeoutRef.current = setTimeout(() => setAdded(false), FEEDBACK_MS);
+ }
+
+ const base =
+ className ??
+ "flex items-center justify-between px-5 py-3 rounded-sm border w-full transition-all duration-200 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base";
+ // Branch the border/bg classes instead of appending an "override" on top
+ // of the default ones — Tailwind v4 has no leading-`!` important prefix
+ // anymore (it's a trailing `!` now), so two conflicting utilities like
+ // border-border/border-success both being present would silently race on
+ // CSS source order instead of one cleanly winning.
+ const stateClasses = added
+ ? "border-success bg-success-subtle scale-[1.02]"
+ : "border-border hover:border-brand";
+
+ return (
+
+ );
+}
diff --git a/app/components/CartFly.tsx b/app/components/CartFly.tsx
new file mode 100644
index 0000000..2f29a6e
--- /dev/null
+++ b/app/components/CartFly.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { AnimatePresence, motion } from "motion/react";
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useRef,
+ useState,
+ type ReactNode,
+} from "react";
+
+type Ball = { id: number; startX: number; startY: number; endX: number; endY: number };
+
+type CartFlyContextValue = {
+ registerCartIcon: (el: HTMLElement | null) => void;
+ fly: (sourceEl: HTMLElement) => void;
+ /** Real cart count minus this = what the navbar badge should currently
+ * show — held back for as long as a ball is still mid-flight, so the
+ * badge only "counts up" once the ball visually lands there. */
+ pendingCount: number;
+};
+
+const CartFlyContext = createContext(null);
+
+let ballSeq = 0;
+
+/**
+ * Mounted once at the root (app/layout.tsx) so both the cart icon (in
+ * Navbar, one branch of the tree) and any add-to-cart button (in page
+ * content, a different branch) can share one flight target/queue via
+ * context instead of prop-drilling across unrelated component trees.
+ */
+export function CartFlyProvider({ children }: { children: ReactNode }) {
+ const cartIconRef = useRef(null);
+ const [balls, setBalls] = useState([]);
+ const [pendingCount, setPendingCount] = useState(0);
+
+ const registerCartIcon = useCallback((el: HTMLElement | null) => {
+ cartIconRef.current = el;
+ }, []);
+
+ const fly = useCallback((sourceEl: HTMLElement) => {
+ const target = cartIconRef.current;
+ if (!target) return;
+ const from = sourceEl.getBoundingClientRect();
+ const to = target.getBoundingClientRect();
+ setBalls((prev) => [
+ ...prev,
+ {
+ id: ++ballSeq,
+ startX: from.left + from.width / 2,
+ startY: from.top + from.height / 2,
+ endX: to.left + to.width / 2,
+ endY: to.top + to.height / 2,
+ },
+ ]);
+ setPendingCount((n) => n + 1);
+ }, []);
+
+ function handleArrive(id: number) {
+ setBalls((prev) => prev.filter((b) => b.id !== id));
+ setPendingCount((n) => Math.max(0, n - 1));
+ }
+
+ return (
+
+ {children}
+
+ {balls.map((ball) => (
+ handleArrive(ball.id)}
+ style={{ marginLeft: -12, marginTop: -12 }}
+ className="fixed left-0 top-0 z-[100] size-6 rounded-full bg-brand pointer-events-none"
+ />
+ ))}
+
+
+ );
+}
+
+export function useCartFly() {
+ const ctx = useContext(CartFlyContext);
+ if (!ctx) throw new Error("useCartFly must be used within CartFlyProvider");
+ return ctx;
+}
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index a4af052..2052fed 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
const links = [
{ label: "Impressum", href: "/impressum" },
{ label: "Datenschutz", href: "/datenschutz" },
+ { label: "Versand", href: "/versand" },
{ label: "AGB", href: "/agb" },
{ label: "Widerruf", href: "/widerruf" },
];
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 2181e73..ae12921 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -5,6 +5,8 @@ import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useCartCount } from "../lib/cart";
+import { NewsletterModal } from "./NewsletterModal";
+import { useCartFly } from "./CartFly";
const NAVBAR_HEIGHT = 100; // px — matches h-[6.25rem]
const SCROLL_DURATION = 800; // ms
@@ -17,10 +19,11 @@ function smoothScrollTo(targetY: number) {
function step(now: number) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / SCROLL_DURATION, 1);
- // ease-in-out cubic
- const ease = progress < 0.5
- ? 4 * progress ** 3
- : 1 - (-2 * progress + 2) ** 3 / 2;
+ // ease-out cubic — not ease-in-out. Ease-in-out's cubic ease-in half
+ // stays nearly flat for the animation's first ~150-200ms, which read
+ // as a delay before the scroll visibly starts. Ease-out moves
+ // immediately and only decelerates into the landing.
+ const ease = 1 - (1 - progress) ** 3;
window.scrollTo(0, startY + distance * ease);
if (progress < 1) requestAnimationFrame(step);
}
@@ -40,12 +43,15 @@ const anchorIds = navLinks
.map((l) => l.href.slice(1));
// "Werkzeuge" also covers standalone tool/product pages that live under
-// the Home "Werkzeuge" section conceptually — /todo-cards (ToDo-Karten)
-// and /challenge (7-Tage-Challenge) are both tools listed there, even
-// though neither route is nested under /werkzeuge/. Their own Figma
-// sources (page-todo-karten, and the 7-Tage-Challenge card in
-// section-tools) mark "Werkzeuge" active in the nav for the same reason.
-const WERKZEUGE_ROUTES = ["/todo-cards", "/challenge"];
+// the Home "Werkzeuge" section conceptually — /todo-cards (ToDo-Karten),
+// /challenge (7-Tage-Challenge), and /newsletter (Impulse & Tipps) are
+// all tools listed there, even though none of these routes is nested
+// under /werkzeuge/. Their own Figma sources (page-todo-karten,
+// page-weekly-impulses, and the 7-Tage-Challenge card in section-tools)
+// mark "Werkzeuge" active in the nav for the same reason — confirmed by
+// page-weekly-impulses's own breadcrumb ("Startseite › Werkzeuge ›
+// Impulse & Tipps") and active-underline position, same as page-todo-karten's.
+const WERKZEUGE_ROUTES = ["/todo-cards", "/challenge", "/newsletter"];
function isNavLinkActive(href: string, pathname: string, activeSection: string): boolean {
if (href === "#werkzeuge") {
@@ -67,13 +73,54 @@ function isNavLinkActive(href: string, pathname: string, activeSection: string):
// Badge only renders once something is actually in the cart.
function CartLink() {
const count = useCartCount();
+ const { registerCartIcon, pendingCount } = useCartFly();
+ const anchorRef = useRef(null);
+ const [pulse, setPulse] = useState(false);
+ const prevVisibleRef = useRef(0);
+ const pathname = usePathname();
+
+ // Held back by pendingCount while a ball is mid-flight, so the badge only
+ // "counts up" once the ball visually lands here — not the instant the
+ // button is clicked (real cart data itself updates instantly elsewhere,
+ // this is purely the badge's own display value).
+ const visibleCount = Math.max(0, count - pendingCount);
+
+ useEffect(() => {
+ registerCartIcon(anchorRef.current);
+ return () => registerCartIcon(null);
+ }, [registerCartIcon]);
+
+ useEffect(() => {
+ if (visibleCount > prevVisibleRef.current) {
+ setPulse(true);
+ const t = setTimeout(() => setPulse(false), 350);
+ prevVisibleRef.current = visibleCount;
+ return () => clearTimeout(t);
+ }
+ prevVisibleRef.current = visibleCount;
+ }, [visibleCount]);
+
return (
0 ? `Warenkorb, ${count} Artikel` : "Warenkorb"}
+ onClick={(e) => {
+ // Already on /cart — a real navigation here is a no-op, so treat
+ // the click as "take me back to the top" instead of doing nothing.
+ if (pathname === "/cart") {
+ e.preventDefault();
+ smoothScrollTo(0);
+ }
+ }}
+ aria-label={visibleCount > 0 ? `Warenkorb, ${visibleCount} Artikel` : "Warenkorb"}
className="relative flex h-11 w-11 items-center justify-center shrink-0 active:scale-[0.9] transition-transform"
>
-
@@ -52,7 +66,7 @@ export function Newsletter() {
/>
diff --git a/app/components/NewsletterModal.tsx b/app/components/NewsletterModal.tsx
new file mode 100644
index 0000000..4b54fd1
--- /dev/null
+++ b/app/components/NewsletterModal.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import Image from "next/image";
+import { AnimatePresence, motion } from "motion/react";
+
+const features = [
+ {
+ icon: "/icon-sparkle-wrapper.svg",
+ title: "7 Tage. Ein Fokus.",
+ desc: "Tägliche Impulse für mehr Klarheit und weniger Reibung.",
+ },
+ {
+ icon: "/icon-checklist.png",
+ title: "Praktisch & umsetzbar.",
+ desc: "Direkt anwendbare Methoden für deinen Alltag.",
+ },
+ {
+ icon: "/icon-heart.png",
+ title: "Kein Spam. Versprochen.",
+ desc: "Nur wertvolle Inhalte, wenn du sie brauchst.",
+ },
+];
+
+/**
+ * The Navbar's "Newsletter" CTA opens this modal rather than navigating —
+ * matches the original Figma prototype (Newsletter-Button → Overlay
+ * newsletter-overlay), unlike the Werkzeuge "Impulse & Tipps" card's
+ * "Anmelden" link, which goes to the full /newsletter detail page instead.
+ * Different entry points, different weight: a quick-access nav CTA gets a
+ * lightweight in-place signup, a content card gets the full page.
+ */
+export function NewsletterModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+ const dialogRef = useRef(null);
+ const closeButtonRef = useRef(null);
+
+ // Body scroll lock while open.
+ useEffect(() => {
+ if (!open) return;
+ const prevOverflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.body.style.overflow = prevOverflow;
+ };
+ }, [open]);
+
+ // Focus management: move focus into the modal on open, trap Tab within
+ // it, close + return focus on Escape — same pattern as the Navbar's
+ // mobile drawer.
+ useEffect(() => {
+ if (!open) return;
+
+ closeButtonRef.current?.focus();
+
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ onClose();
+ return;
+ }
+ if (e.key !== "Tab") return;
+ const focusables = dialogRef.current?.querySelectorAll(
+ 'a[href], button:not([disabled]), input:not([disabled])'
+ );
+ if (!focusables || focusables.length === 0) return;
+ const first = focusables[0];
+ const last = focusables[focusables.length - 1];
+ if (e.shiftKey && document.activeElement === first) {
+ e.preventDefault();
+ last.focus();
+ } else if (!e.shiftKey && document.activeElement === last) {
+ e.preventDefault();
+ first.focus();
+ }
+ };
+
+ document.addEventListener("keydown", onKeyDown);
+ return () => document.removeEventListener("keydown", onKeyDown);
+ }, [open, onClose]);
+
+ return (
+ // AnimatePresence, not a plain `if (!open) return null` — that would
+ // unmount the modal instantly on close with no way to play an exit
+ // animation first. Keeping it mounted (conditionally rendering the
+ // child) lets Framer Motion finish the fade-out before removing it.
+
+ {open && (
+ {
+ if (e.target === e.currentTarget) onClose();
+ }}
+ >
+
+
+
+ {/* modal-top: photo + copy/form, stacked below md */}
+
+
+
+
+
+
+ {/* -scale-y-100 is required, not just -rotate-4 — the SVG
+ itself is authored upside-down (matches how Newsletter.tsx
+ uses this exact same asset); without it the icon renders
+ flipped. */}
+
+
+
+
+
+ Starte mit einer Woche voller Klarheit
+
+
+
+ Melde dich zum Newsletter an und erhalte die 7-Tage-Challenge, mit der du durch mehr Struktur weniger Stress spürst.
+
+
+
+
+
+
+ {/* modal-bottom: 3 feature cards. Figma's export had items-end on
+ this row, but that's a byproduct of nested -scale-y-100
+ flip-wrappers Figma uses for baseline-grid tricks (visually
+ cancels out to top-alignment in the actual design) — taken
+ literally it bottom-aligned the icon with the last line of
+ description text instead of the title, which read as broken.
+ items-start + a fixed icon bounding box (icons have different
+ native proportions, e.g. the sparkle glyph isn't square) fixes
+ it without needing the flip trick. */}
+
+ {features.map((f) => (
+
+
+
+
+
+
+ {f.title}
+
+
{f.desc}
+
+
+ ))}
+
+
+
+ )}
+
+ );
+}
diff --git a/app/components/ProductSpotlight.tsx b/app/components/ProductSpotlight.tsx
new file mode 100644
index 0000000..4a8bc8f
--- /dev/null
+++ b/app/components/ProductSpotlight.tsx
@@ -0,0 +1,64 @@
+import Image from "next/image";
+import Link from "next/link";
+import { AddToCartButton } from "./AddToCartButton";
+import { Reveal } from "./Reveal";
+
+/**
+ * Product teaser for ToDo-Karten, placed after the Werkzeuge section (not
+ * right after the Hero — that already has its own primary CTA, the
+ * 7-Tage-Challenge, and a second strong purchase CTA competing with it
+ * there would dilute focus). Werkzeuge already introduces ToDo-Karten as
+ * a concept with an "Entdecken" link; this is the natural next step —
+ * a concrete way to buy it, right where interest was just built, rather
+ * than dropped at the very top before the page has earned any trust.
+ * Not derived from a Figma frame (page-home never had this section) —
+ * a deliberate, code-only addition, styled to match the /todo-cards
+ * pricing panel it's a teaser for.
+ */
+export function ProductSpotlight() {
+ return (
+
+
+
+
+
+
+
+
Neu im Shop
+
+ ToDo-Karten – Kleine Karten. Große Wirkung.
+
+
+ 50 hochwertige Karten, die dir helfen, deinen Kopf frei zu bekommen und das Wesentliche zu sehen — analog, minimalistisch, für jeden Tag.
+
+
+
12,90 €
+
inkl. MwSt. zzgl. Versand
+
+
+ {/* No className override — the section's bg is bg-bg-base now
+ (matches Tools/Blog above/below), same as AddToCartButton's
+ own default styling/ring-offset, so no override is needed
+ here. */}
+
+
+ Mehr erfahren
+
+
+ );
+}
diff --git a/app/components/VersandModal.tsx b/app/components/VersandModal.tsx
new file mode 100644
index 0000000..d5bbeae
--- /dev/null
+++ b/app/components/VersandModal.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { VersandSections } from "../versand/components/VersandSections";
+
+/**
+ * Quick-reference version of /versand, opened from the cart's order
+ * summary "Versand" info link — a full page navigation would pull you out
+ * of checkout, which is exactly what the link is there to avoid. Reuses
+ * VersandSections so the two never carry different numbers/copy.
+ */
+export function VersandModal({ open, onClose }: { open: boolean; onClose: () => void }) {
+ const dialogRef = useRef(null);
+ const closeButtonRef = useRef(null);
+
+ useEffect(() => {
+ if (!open) return;
+ const prevOverflow = document.body.style.overflow;
+ document.body.style.overflow = "hidden";
+ return () => {
+ document.body.style.overflow = prevOverflow;
+ };
+ }, [open]);
+
+ useEffect(() => {
+ if (!open) return;
+
+ closeButtonRef.current?.focus();
+
+ const onKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ onClose();
+ return;
+ }
+ if (e.key !== "Tab") return;
+ const focusables = dialogRef.current?.querySelectorAll(
+ 'a[href], button:not([disabled])'
+ );
+ if (!focusables || focusables.length === 0) return;
+ const first = focusables[0];
+ const last = focusables[focusables.length - 1];
+ if (e.shiftKey && document.activeElement === first) {
+ e.preventDefault();
+ last.focus();
+ } else if (!e.shiftKey && document.activeElement === last) {
+ e.preventDefault();
+ first.focus();
+ }
+ };
+
+ document.addEventListener("keydown", onKeyDown);
+ return () => document.removeEventListener("keydown", onKeyDown);
+ }, [open, onClose]);
+
+ return (
+
+ {open && (
+ {
+ if (e.target === e.currentTarget) onClose();
+ }}
+ >
+
+
+
+ Versand
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/app/globals.css b/app/globals.css
index ab0f6a2..fac1c0f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -36,6 +36,8 @@
--color-checkout-active: #f6a701;
--color-checkout-done: #1a1a18;
--color-toc-active-border: #f6a701;
+ --color-success: #2f8f4e;
+ --color-success-subtle: #e8f4ea;
/* Radius */
--radius-xs: 0.25rem;
@@ -58,7 +60,9 @@
token (Why-point 4). Tablet floor via the styleguide's 80-85% ratio,
rounded to 40px. "Product/tool page hero H1" role, distinct from
--text-h1 (already spoken for: "Seiten-H1 (Blog-Detail, Warenkorb,
- etc.)" per styleguide.md §2.2 — a different, smaller role). */
+ etc.)" per styleguide.md §2.2 — a different, smaller role). Also used
+ by page-weekly-impulses's hero heading — same 48px role, reused
+ rather than minting a near-duplicate token. */
--text-h-page: clamp(2.5rem, 1.9286rem + 1.1905vw, 3rem);
--text-h-page--line-height: 1.15;
--text-h1: clamp(1.75rem, 1.1786rem + 1.1905vw, 2.25rem);
diff --git a/app/layout.tsx b/app/layout.tsx
index 52ad650..3b1b083 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Inter, Playfair_Display, Caveat, Lora } from "next/font/google";
import "./globals.css";
import { Navbar } from "./components/Navbar";
+import { CartFlyProvider } from "./components/CartFly";
const inter = Inter({
variable: "--font-inter",
@@ -52,11 +53,13 @@ export default function RootLayout({
return (
-
- {children}
+
+
+ {children}
+
);
diff --git a/app/lib/cart.ts b/app/lib/cart.ts
index a76e80f..ab09f70 100644
--- a/app/lib/cart.ts
+++ b/app/lib/cart.ts
@@ -1,11 +1,12 @@
"use client";
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
const CART_KEY = "ep_cart";
const CART_EVENT = "ep-cart-updated";
+const EMPTY_CART: CartItem[] = [];
-type CartItem = { id: string; qty: number };
+export type CartItem = { id: string; qty: number };
function readCart(): CartItem[] {
if (typeof window === "undefined") return [];
@@ -34,23 +35,66 @@ export function addToCart(id: string, qty = 1) {
writeCart(items);
}
-// Reactive cart item count — 0 until the client hydrates and reads
-// localStorage, then stays in sync across tabs ("storage") and same-tab
-// updates (the CART_EVENT dispatched by addToCart, which "storage" alone
-// doesn't fire for the tab that made the change).
-export function useCartCount(): number {
- const [count, setCount] = useState(0);
-
- useEffect(() => {
- setCount(getCartCount());
- const onUpdate = () => setCount(getCartCount());
- window.addEventListener(CART_EVENT, onUpdate);
- window.addEventListener("storage", onUpdate);
- return () => {
- window.removeEventListener(CART_EVENT, onUpdate);
- window.removeEventListener("storage", onUpdate);
- };
- }, []);
-
- return count;
+export function removeFromCart(id: string) {
+ writeCart(readCart().filter((i) => i.id !== id));
+}
+
+// qty <= 0 removes the item outright — the cart page's quantity stepper
+// never lets the visible count go below 1, but this keeps the function
+// itself safe to call with any integer without a separate remove path.
+export function setQuantity(id: string, qty: number) {
+ if (qty <= 0) {
+ removeFromCart(id);
+ return;
+ }
+ const items = readCart();
+ const existing = items.find((i) => i.id === id);
+ if (existing) existing.qty = qty;
+ writeCart(items);
+}
+
+// Cached-by-raw-string snapshot, not a fresh JSON.parse() every call —
+// useSyncExternalStore (below) requires getSnapshot to return the SAME
+// reference when the underlying data hasn't actually changed, or React
+// treats every render as a change. readCart()'s plain JSON.parse would
+// allocate a new array each call and break that.
+let cachedRaw: string | null | undefined;
+let cachedItems: CartItem[] = EMPTY_CART;
+
+export function getCart(): CartItem[] {
+ if (typeof window === "undefined") return EMPTY_CART;
+ const raw = window.localStorage.getItem(CART_KEY);
+ if (raw === cachedRaw) return cachedItems;
+ cachedRaw = raw;
+ try {
+ cachedItems = raw ? JSON.parse(raw) : EMPTY_CART;
+ } catch {
+ cachedItems = EMPTY_CART;
+ }
+ return cachedItems;
+}
+
+function subscribe(onStoreChange: () => void) {
+ window.addEventListener(CART_EVENT, onStoreChange);
+ window.addEventListener("storage", onStoreChange);
+ return () => {
+ window.removeEventListener(CART_EVENT, onStoreChange);
+ window.removeEventListener("storage", onStoreChange);
+ };
+}
+
+// useSyncExternalStore, not useState+useEffect — localStorage is an
+// external store outside React, and the previous approach (setState
+// synchronously inside an effect body) causes an extra render and trips
+// the react-hooks/set-state-in-effect lint rule. This is React's own
+// recommended pattern for subscribing to exactly this kind of external
+// store, and is correctly SSR-safe via the third (server snapshot)
+// argument — 0 / EMPTY_CART until the client hydrates and reads
+// localStorage for real.
+export function useCartCount(): number {
+ return useSyncExternalStore(subscribe, getCartCount, () => 0);
+}
+
+export function useCart(): CartItem[] {
+ return useSyncExternalStore(subscribe, getCart, () => EMPTY_CART);
}
diff --git a/app/lib/products.ts b/app/lib/products.ts
new file mode 100644
index 0000000..0dabb4e
--- /dev/null
+++ b/app/lib/products.ts
@@ -0,0 +1,65 @@
+// Small in-code product catalog — this project has no commerce backend,
+// so cart items (stored in localStorage as {id, qty} pairs, see cart.ts)
+// need somewhere to look up name/price/photo/description by id. Only
+// "todo-karten" has a real detail page (/todo-cards) right now; the
+// other four exist because they're shown in Figma's page-cart "Passt
+// perfekt dazu" row and are addable to the cart from there, same as the
+// real product — they just don't have their own detail pages built yet
+// (matching the project's established pattern of cross-linking to
+// not-yet-built routes rather than leaving buttons disconnected).
+export type Product = {
+ id: string;
+ name: string;
+ description: string;
+ price: number;
+ image: string;
+ href?: string;
+};
+
+export const PRODUCTS: Record = {
+ "todo-karten": {
+ id: "todo-karten",
+ name: "ToDo-Karten – Set",
+ description: "50 ToDo-Karten für mehr Fokus und Klarheit im Alltag.",
+ price: 12.9,
+ image: "/product-todo-karten.png",
+ href: "/todo-cards",
+ },
+ "notizbuch-klarheit": {
+ id: "notizbuch-klarheit",
+ name: "Notizbuch – Klarheit",
+ description: "Dein Begleiter für Gedanken, Notizen und neue Perspektiven.",
+ price: 9.9,
+ image: "/product-notizbuch-klarheit.png",
+ },
+ wochenplaner: {
+ id: "wochenplaner",
+ name: "Wochenplaner – Überblick",
+ description: "Behalte deine Woche im Blick und setze klare Prioritäten.",
+ price: 14.9,
+ image: "/product-wochenplaner.png",
+ },
+ "notizbuch-fokus": {
+ id: "notizbuch-fokus",
+ name: "Notizbuch – Fokus",
+ description: "Für mehr Konzentration und einen klaren Kopf im Alltag.",
+ price: 9.9,
+ image: "/product-notizbuch-fokus.png",
+ },
+ zielkarten: {
+ id: "zielkarten",
+ name: "Zielkarten – Set",
+ description: "Definiere deine Ziele und behalte sie fest im Blick.",
+ price: 11.9,
+ image: "/product-zielkarten.png",
+ },
+};
+
+export const RELATED_PRODUCT_IDS = ["wochenplaner", "notizbuch-fokus", "zielkarten"];
+
+// Shop overview grid order — mirrors page-shop-overview in Figma.
+export const SHOP_PRODUCT_IDS = ["todo-karten", "wochenplaner", "notizbuch-fokus", "zielkarten"];
+
+export function formatPrice(value: number): string {
+ return `${value.toFixed(2).replace(".", ",")} €`;
+}
diff --git a/app/lib/shipping.ts b/app/lib/shipping.ts
new file mode 100644
index 0000000..fe9be85
--- /dev/null
+++ b/app/lib/shipping.ts
@@ -0,0 +1,17 @@
+// Single source of truth for shipping numbers/timeframes — consumed by
+// both the cart's order summary (CartContent.tsx) and the /versand policy
+// page, so the two can never drift apart.
+export const SHIPPING_COST = 2.9;
+export const FREE_SHIPPING_THRESHOLD = 39;
+
+// Kept as an explicit range (not "so schnell wie möglich") per Art. 246a
+// § 1 Abs. 1 Nr. 8 EGBGB — German law requires disclosing a concrete
+// delivery timeframe before contract conclusion, and split into
+// Bearbeitungszeit/Versanddauer so it's clear whether processing time is
+// included in the stated number, not just a single ambiguous figure.
+export const HANDLING_DAYS = { min: 1, max: 2 };
+export const TRANSIT_DAYS_DE = { min: 2, max: 4 };
+export const TOTAL_DAYS_DE = {
+ min: HANDLING_DAYS.min + TRANSIT_DAYS_DE.min,
+ max: HANDLING_DAYS.max + TRANSIT_DAYS_DE.max,
+};
diff --git a/app/newsletter/components/HowItWorks.tsx b/app/newsletter/components/HowItWorks.tsx
new file mode 100644
index 0000000..6e551d0
--- /dev/null
+++ b/app/newsletter/components/HowItWorks.tsx
@@ -0,0 +1,73 @@
+import { Fragment } from "react";
+import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
+
+const steps = [
+ {
+ icon: "/icon-weekly-step-1.png",
+ title: "1. Anmelden",
+ desc: "Trage dich mit deiner E-Mail-Adresse ein und bestätige kurz.",
+ },
+ {
+ icon: "/icon-weekly-step-2.png",
+ title: "2. E-Mail erhalten",
+ desc: "Jeden Mittwoch bekommst du deinen neuen Impuls direkt in dein Postfach.",
+ },
+ {
+ icon: "/icon-weekly-step-3.png",
+ title: "3. Lesen & umsetzen",
+ desc: "Lies in wenigen Minuten und setze die Tipps direkt in deinem Alltag um.",
+ },
+ {
+ icon: "/icon-weekly-step-4.png",
+ title: "4. Dranbleiben",
+ desc: "Kleine Schritte, jede Woche – für mehr Klarheit, Fokus und Leichtigkeit.",
+ },
+];
+
+export function HowItWorks() {
+ return (
+
+
+
+ So funktioniert's
+
+
+ Wöchentliche Inspiration. Kein Aufwand für dich.
+
+
+
+ {/* Same pattern as /todo-cards's HowItWorks: arrows always visible
+ (rotated to point down while stacked below md:), RevealGroup/
+ RevealItem stagger the steps in. lg:px-[10rem] mirrors Figma's
+ Desktop-only px-[160px] inset (no fluid token — pure aesthetic
+ narrowing, fine to just drop below lg:). */}
+
+ {steps.map((step, i) => (
+
+
+
+
{step.title}
+
{step.desc}
+
+ {i < steps.length - 1 && (
+
+
+
+ )}
+
+ ))}
+
+
+ );
+}
diff --git a/app/newsletter/components/Testimonials.tsx b/app/newsletter/components/Testimonials.tsx
new file mode 100644
index 0000000..37a976c
--- /dev/null
+++ b/app/newsletter/components/Testimonials.tsx
@@ -0,0 +1,74 @@
+import Image from "next/image";
+import { Reveal, RevealGroup, RevealItem } from "../../components/Reveal";
+
+const testimonials = [
+ {
+ quote:
+ "„Die wöchentlichen Impulse sind mein fester Start in die Woche. Kurz, hilfreich und immer genau richtig.“",
+ name: "Sarah M.",
+ role: "Marketing Managerin",
+ avatar: "/avatar-weekly-1.png",
+ },
+ {
+ quote: "„Endlich mal Tipps, die man wirklich umsetzen kann. Jeden Mittwoch freue ich mich auf die Mail.“",
+ name: "Thomas K.",
+ role: "Selbstständiger Berater",
+ avatar: "/avatar-weekly-2.png",
+ },
+ {
+ quote: "„Die Impulse helfen mir, den Fokus zu behalten und das Wesentliche nicht aus den Augen zu verlieren.“",
+ name: "Miriam L.",
+ role: "Projektleiterin",
+ avatar: "/avatar-weekly-3.png",
+ },
+];
+
+// Same card style as /challenge and /todo-cards's testimonials (bg-muted,
+// no border, decorative quote-mark, quote on top with flex-1,
+// avatar+name+role row pinned to the bottom, hover-lift + avatar scale) —
+// this page's own Figma spec actually used a different bordered pattern,
+// but site-wide consistency across all three testimonial sections was
+// explicitly requested over per-page Figma fidelity here. No pagination
+// dots either, for the same reason — neither of the other two pages has
+// them. max-w-[1600px] matches Challenge's testimonial container cap —
+// see the identical comment in /todo-cards's Testimonials.tsx.
+export function Testimonials() {
+ return (
+
+
+
+ Was andere sagen
+
+
+
+ {testimonials.map((t) => (
+
+
+ ”
+
+
{t.quote}
+
+
+
+
+
+
{t.name}
+
{t.role}
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/app/newsletter/components/WeeklyBenefits.tsx b/app/newsletter/components/WeeklyBenefits.tsx
new file mode 100644
index 0000000..4e31a72
--- /dev/null
+++ b/app/newsletter/components/WeeklyBenefits.tsx
@@ -0,0 +1,45 @@
+import Image from "next/image";
+import { Reveal } from "../../components/Reveal";
+
+const benefits = [
+ { title: "Praktische Impulse", desc: "Konkrete Ideen, die du sofort umsetzen kannst." },
+ { title: "Neue Perspektiven", desc: "Gedankenanstöße, die dir helfen, klarer zu sehen." },
+ { title: "Bewährte Methoden", desc: "Einfache Strategien für mehr Fokus und Struktur." },
+ { title: "Motivation & Erinnerung", desc: "Ein freundlicher Schub in die richtige Richtung." },
+];
+
+export function WeeklyBenefits() {
+ return (
+
+
+
+
+
+
+
+ Das bekommst du jede Woche
+
+
+ {benefits.map((b) => (
+
+
+
+
{b.title}
+
{b.desc}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/app/newsletter/components/WeeklyImpulsesHero.tsx b/app/newsletter/components/WeeklyImpulsesHero.tsx
new file mode 100644
index 0000000..ccc45a0
--- /dev/null
+++ b/app/newsletter/components/WeeklyImpulsesHero.tsx
@@ -0,0 +1,122 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Reveal } from "../../components/Reveal";
+
+const checklist = [
+ "Jeden Mittwoch neue Impulse & Tipps",
+ "Kurz & knackig – in 5 Minuten gelesen",
+ "Sofort umsetzbar für mehr Fokus und Struktur",
+ "Kostenlos und jederzeit abbestellbar",
+];
+
+export function WeeklyImpulsesHero() {
+ return (
+
+ {/* Same lg:-only structural exception as Home/todo-cards Hero (see
+ figma-to-nextjs skill Gotcha #5) — a wide fixed-ratio photo next
+ to a text column gets too cramped at Tablet widths under the
+ site-wide md: convention. lg:items-center removed — see the
+ breadcrumb/centering comment below, same fix as /todo-cards. */}
+ {/* pt-10 md:pt-12, no lg override — same fix and same reasoning as
+ /todo-cards's Hero: this is now the only thing positioning the
+ breadcrumb, and it must match /todo-cards's and /challenge's
+ value exactly for the breadcrumb to land at the same Y everywhere. */}
+
+
+ {/* Breadcrumb — 3 levels here (Startseite › Werkzeuge › Impulse &
+ Tipps), matching this page's actual Figma breadcrumb.
+ Deliberately NOT part of the centered block below — see its
+ comment. */}
+
+
+ {/* Everything else — centered in the remaining vertical space at
+ lg+, same fix as /todo-cards's Hero: keeps the breadcrumb
+ above at a fixed, cross-page-consistent Y position instead of
+ its offset drifting with this page's larger content (pill
+ badge + 4 checklist items vs. /todo-cards's 3, no badge). */}
+
+ {/* Pill badge */}
+
+
+
+ Jeden Mittwoch in deinem Postfach
+
+
+
+ {/* Heading — 48px Desktop, same new --text-h-page token as
+ /todo-cards's hero heading (see globals.css). */}
+
+ Einmal pro Woche bekommst du konkrete Impulse, die dich wirklich weiterbringen – kurz, praktisch und direkt umsetzbar.
+
+
+
+ {checklist.map((item) => (
+
+
+ {item}
+
+ ))}
+
+
+ {/* Inline email capture — page-specific, simpler than the shared
+ Newsletter component's panel form (no button-adjacent styling
+ needed here, just input + submit inline). */}
+
+
+
+
+
+
+
+ Keine Werbung. Jederzeit abbestellbar.
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/newsletter/page.tsx b/app/newsletter/page.tsx
new file mode 100644
index 0000000..b63bd6b
--- /dev/null
+++ b/app/newsletter/page.tsx
@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import { WeeklyImpulsesHero } from "./components/WeeklyImpulsesHero";
+import { HowItWorks } from "./components/HowItWorks";
+import { WeeklyBenefits } from "./components/WeeklyBenefits";
+import { Testimonials } from "./components/Testimonials";
+import { Newsletter } from "../components/Newsletter";
+import { Footer } from "../components/Footer";
+
+const title = "Impulse & Tipps – Wöchentliche Klarheit für deinen Alltag";
+const description =
+ "Einmal pro Woche bekommst du konkrete Impulse, die dich wirklich weiterbringen – kurz, praktisch und direkt umsetzbar. Kostenlos, jeden Mittwoch, jederzeit abbestellbar.";
+
+export const metadata: Metadata = {
+ title,
+ description,
+ alternates: {
+ canonical: "/newsletter",
+ },
+ openGraph: {
+ title,
+ description,
+ url: "/newsletter",
+ images: ["/hero-weekly-impulses.png"],
+ },
+ twitter: {
+ title,
+ description,
+ images: ["/hero-weekly-impulses.png"],
+ },
+};
+
+// Route is "/newsletter" — not "/impulse-tipps" or similar — because that
+// path already existed as a dangling link from two places (Navbar's
+// "Newsletter" CTA button and Tools.tsx's "Impulse & Tipps" → "Anmelden"
+// card). Both point at the same underlying thing (signing up for the
+// weekly newsletter), so this page resolves both at once instead of
+// picking a new URL and leaving one of them still dangling.
+export default function NewsletterPage() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 96ea8a0..b129ed6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Hero } from "./components/Hero";
import { Divider } from "./components/Divider";
import { Tools } from "./components/Tools";
+import { ProductSpotlight } from "./components/ProductSpotlight";
import { Blog } from "./components/Blog";
import { About } from "./components/About";
import { Newsletter } from "./components/Newsletter";
@@ -37,6 +38,7 @@ export default function Home() {
+
diff --git a/app/shop/components/ProductGrid.tsx b/app/shop/components/ProductGrid.tsx
new file mode 100644
index 0000000..bbcce05
--- /dev/null
+++ b/app/shop/components/ProductGrid.tsx
@@ -0,0 +1,61 @@
+import Link from "next/link";
+import Image from "next/image";
+import { PRODUCTS, SHOP_PRODUCT_IDS, formatPrice } from "../../lib/products";
+import { RevealGroup, RevealItem } from "../../components/Reveal";
+import { AddToCartInlineButton } from "../../components/AddToCartInlineButton";
+
+export function ProductGrid() {
+ return (
+
+
+ {SHOP_PRODUCT_IDS.map((id) => {
+ const product = PRODUCTS[id];
+ return (
+
+
+
+
+
+
+ {product.name}
+
+
{formatPrice(product.price)}
+ {product.href && (
+
+ Mehr erfahren
+ →
+
+ )}
+
+ {/* flex-1 spacer — pins every card's button to the same Y
+ regardless of the "Mehr erfahren" line only the
+ todo-karten card has (see figma-to-nextjs skill's
+ Tools.tsx equal-height lesson). */}
+
+
+
+
+
+ );
+ })}
+
+
+
Alle Preise inkl. MwSt., zzgl. Versandkosten.
+
+ );
+}
diff --git a/app/shop/components/ShopHeader.tsx b/app/shop/components/ShopHeader.tsx
new file mode 100644
index 0000000..7f931f4
--- /dev/null
+++ b/app/shop/components/ShopHeader.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { Reveal } from "../../components/Reveal";
+
+export function ShopHeader() {
+ return (
+
+
+ Startseite
+ ›
+ Shop
+
+
+ Shop
+
+
+ Alles, was du für mehr Klarheit im Alltag brauchst.
+
+
+ );
+}
diff --git a/app/shop/page.tsx b/app/shop/page.tsx
new file mode 100644
index 0000000..a2d80d1
--- /dev/null
+++ b/app/shop/page.tsx
@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { ShopHeader } from "./components/ShopHeader";
+import { ProductGrid } from "./components/ProductGrid";
+import { TrustRow } from "../components/TrustRow";
+import { Footer } from "../components/Footer";
+
+export const metadata: Metadata = {
+ title: "Shop",
+ description:
+ "Alles, was du für mehr Klarheit im Alltag brauchst — ToDo-Karten, Wochenplaner, Notizbücher und Zielkarten von einfach produktiv.",
+ alternates: { canonical: "/shop" },
+ openGraph: {
+ title: "Shop | einfach produktiv",
+ description:
+ "Alles, was du für mehr Klarheit im Alltag brauchst — ToDo-Karten, Wochenplaner, Notizbücher und Zielkarten von einfach produktiv.",
+ url: "/shop",
+ type: "website",
+ },
+};
+
+export default function ShopPage() {
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/todo-cards/components/AddToCartButton.tsx b/app/todo-cards/components/AddToCartButton.tsx
deleted file mode 100644
index 2fffbbf..0000000
--- a/app/todo-cards/components/AddToCartButton.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { addToCart } from "../../lib/cart";
-
-/**
- * Shared by the Hero's "ToDo-Karten bestellen" and the pricing panel's "In
- * den Warenkorb" — both are real add-to-cart actions per app/lib/cart.ts,
- * not just decorative links, and both go to /cart per the click-through
- * convention already established for page-todo-karten's two CTAs.
- */
-export function AddToCartButton({
- label,
- className,
-}: {
- label: string;
- className?: string;
-}) {
- return (
- addToCart("todo-karten")}
- className={
- className ??
- "inline-flex items-center justify-center px-6 py-[0.8125rem] rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
- }
- >
- {label}
-
- );
-}
diff --git a/app/todo-cards/components/Pricing.tsx b/app/todo-cards/components/Pricing.tsx
index 2f5ee08..f9fe32b 100644
--- a/app/todo-cards/components/Pricing.tsx
+++ b/app/todo-cards/components/Pricing.tsx
@@ -1,6 +1,7 @@
import Image from "next/image";
-import { AddToCartButton } from "./AddToCartButton";
+import { AddToCartButton } from "../../components/AddToCartButton";
import { Reveal } from "../../components/Reveal";
+import { TOTAL_DAYS_DE } from "../../lib/shipping";
const bullets = [
"50 ToDo-Karten",
@@ -49,6 +50,9 @@ export function Pricing() {
12,90 €
inkl. MwSt. zzgl. Versand
+
+ Lieferzeit: {TOTAL_DAYS_DE.min}–{TOTAL_DAYS_DE.max} Werktage innerhalb Deutschlands
+
+
(
-
{t.quote}
+
+ ”
+
+
{t.quote}
@@ -59,6 +72,7 @@ export function Testimonials() {
))}
+
);
}
diff --git a/app/todo-cards/components/TodoKartenHero.tsx b/app/todo-cards/components/TodoKartenHero.tsx
index 6bdf4fe..5ad5f4b 100644
--- a/app/todo-cards/components/TodoKartenHero.tsx
+++ b/app/todo-cards/components/TodoKartenHero.tsx
@@ -1,6 +1,6 @@
import Link from "next/link";
import Image from "next/image";
-import { AddToCartButton } from "./AddToCartButton";
+import { AddToCartButton } from "../../components/AddToCartButton";
import { Reveal } from "../../components/Reveal";
const checklist = [
@@ -15,11 +15,27 @@ export function TodoKartenHero() {
{/* Same lg:-only structural exception as the Home Hero (see
figma-to-nextjs skill Gotcha #5) — a wide fixed-ratio photo next
to a text column is exactly the shape that gets too cramped at
- Tablet widths under the site-wide md: convention. */}
-
+ Tablet widths under the site-wide md: convention. lg:items-center
+ removed (default grid align-items is stretch) — that's what lets
+ the breadcrumb below sit at a fixed Y position across every hero
+ section on the site instead of shifting per page depending on how
+ much content each one has above the fold. */}
+ {/* pt-10 md:pt-12, no lg override — with lg:items-center gone, this
+ padding is now the ONLY thing positioning the breadcrumb
+ vertically at every tier (previously lg:pt-0 relied on centering
+ to add its own implicit offset instead). Kept flat past md so it
+ matches /newsletter's and /challenge's identical top offset. */}
+
- {/* Breadcrumb */}
+ {/* Breadcrumb — 3 levels (Startseite › Werkzeuge › ToDo-Karten),
+ matching /newsletter's pattern; was missing "Startseite" as
+ the first crumb. Deliberately NOT part of the centered block
+ below — see the wrapper's comment. */}
- {/* Heading — 48px Desktop doesn't match any existing type-scale
- step, uses the new --text-h-page token (see globals.css). */}
-
-
- ToDo-Karten
-
-
- Kleine Karten. Große Wirkung.
+ {/* Everything else — centered in the remaining vertical space at
+ lg+ (the column now stretches to match the image's height,
+ since lg:items-center was removed above; flex-1 + justify-center
+ here centers this block within that leftover space instead of
+ the breadcrumb-inclusive whole column, which is what made the
+ breadcrumb's Y position drift per page depending on total
+ content height). */}
+
+ {/* Heading — 48px Desktop doesn't match any existing type-scale
+ step, uses the new --text-h-page token (see globals.css). */}
+
+
+ ToDo-Karten
+
+
+ Kleine Karten. Große Wirkung.
+
+
+
+
+ Ein einfaches Werkzeug, das dir hilft, deinen Kopf frei zu bekommen und das Wesentliche zu sehen.
+
+
+ {checklist.map((item) => (
+
+
+ {item}
+
+ ))}
+
+
+
-
-
- Ein einfaches Werkzeug, das dir hilft, deinen Kopf frei zu bekommen und das Wesentliche zu sehen.
-
-
-
- {checklist.map((item) => (
-
-
- {item}
-
- ))}
-
-
-
{/* group + subtle scale-on-hover — a common, restrained "photo
diff --git a/app/versand/components/VersandSections.tsx b/app/versand/components/VersandSections.tsx
new file mode 100644
index 0000000..699e7fe
--- /dev/null
+++ b/app/versand/components/VersandSections.tsx
@@ -0,0 +1,113 @@
+import Link from "next/link";
+import {
+ SHIPPING_COST,
+ FREE_SHIPPING_THRESHOLD,
+ HANDLING_DAYS,
+ TRANSIT_DAYS_DE,
+ TOTAL_DAYS_DE,
+} from "../../lib/shipping";
+import { formatPrice } from "../../lib/products";
+
+// Single source of truth for both the full /versand page and the cart's
+// quick-reference VersandModal — same section ids/titles/copy either way,
+// so the two can never drift apart. `withAnchors` adds scroll-margin (for
+// the full page's TOC) — the modal doesn't need it, it just scrolls its
+// own dialog body.
+export const VERSAND_SECTION_IDS = [
+ { id: "lieferzeiten", title: "Lieferzeiten" },
+ { id: "versandkosten", title: "Versandkosten" },
+ { id: "liefergebiet", title: "Liefergebiet" },
+ { id: "versanddienstleister", title: "Versanddienstleister" },
+ { id: "transportrisiko", title: "Transportrisiko" },
+ { id: "widerruf", title: "Rückgabe & Widerruf" },
+] as const;
+
+function Section({
+ id,
+ title,
+ withAnchor,
+ children,
+}: {
+ id: string;
+ title: string;
+ withAnchor: boolean;
+ children: React.ReactNode;
+}) {
+ return (
+
+ Nach Zahlungseingang bereiten wir deine Bestellung in der Regel innerhalb von{" "}
+ {HANDLING_DAYS.min}–{HANDLING_DAYS.max} Werktagen zum Versand vor. Die Versanddauer
+ innerhalb Deutschlands beträgt anschließend zusätzlich {TRANSIT_DAYS_DE.min}–
+ {TRANSIT_DAYS_DE.max} Werktage.
+
+
+ Damit ist deine Bestellung in der Regel nach {TOTAL_DAYS_DE.min}–{TOTAL_DAYS_DE.max}{" "}
+ Werktagen bei dir, sofern auf der jeweiligen Produktseite nichts anderes angegeben ist.
+ Als Werktage gelten Montag bis Freitag, ausgenommen gesetzliche Feiertage.
+
+
+
+
+
+ Die Versandkosten innerhalb Deutschlands betragen pauschal {formatPrice(SHIPPING_COST)}{" "}
+ pro Bestellung. Ab einem Bestellwert von {formatPrice(FREE_SHIPPING_THRESHOLD)} versenden
+ wir kostenlos.
+
+
Alle angegebenen Preise verstehen sich inklusive der gesetzlichen Mehrwertsteuer.
+
+
+
+
+ Aktuell versenden wir ausschließlich innerhalb Deutschlands. Eine Lieferung ins Ausland
+ ist derzeit nicht möglich.
+
+
+
+
+
+ Der Versand erfolgt über DHL. Sobald deine Bestellung das Lager verlässt, erhältst du
+ eine E-Mail mit der Sendungsverfolgung.
+
+
+
+
+
+ Bestellst du als Verbraucher:in, trägt das Transportrisiko bei Beschädigung oder Verlust
+ während des Versands grundsätzlich einfach produktiv — nicht du.
+
+
+
+
+
+ Informationen zu Rückgabe, Rücksendekosten und deinem gesetzlichen Widerrufsrecht findest
+ du in unserer{" "}
+
+ Widerrufsbelehrung
+
+ .
+
+
+
+ );
+}
diff --git a/app/versand/components/VersandTOC.tsx b/app/versand/components/VersandTOC.tsx
new file mode 100644
index 0000000..6674718
--- /dev/null
+++ b/app/versand/components/VersandTOC.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { VERSAND_SECTION_IDS } from "./VersandSections";
+
+// lg:-only sidebar — same "wide fixed-width block next to content" shape
+// as the cart's order-summary sidebar (see figma-to-nextjs skill Gotcha
+// #5): a 360px TOC card plus a readable content column already exceeds
+// the 768px Tablet floor, so md: wouldn't leave room for a real 2-column
+// split at Tablet widths.
+export function VersandTOC() {
+ const [active, setActive] = useState(VERSAND_SECTION_IDS[0].id);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ const visible = entries.filter((entry) => entry.isIntersecting);
+ if (visible.length > 0) setActive(visible[0].target.id);
+ },
+ { rootMargin: "-120px 0px -65% 0px", threshold: 0 }
+ );
+ VERSAND_SECTION_IDS.forEach(({ id }) => {
+ const el = document.getElementById(id);
+ if (el) observer.observe(el);
+ });
+ return () => observer.disconnect();
+ }, []);
+
+ return (
+
+ );
+}
diff --git a/app/versand/page.tsx b/app/versand/page.tsx
new file mode 100644
index 0000000..861d676
--- /dev/null
+++ b/app/versand/page.tsx
@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Reveal } from "../components/Reveal";
+import { Footer } from "../components/Footer";
+import { VersandSections } from "./components/VersandSections";
+import { VersandTOC } from "./components/VersandTOC";
+
+export const metadata: Metadata = {
+ title: "Versand",
+ description:
+ "Versandkosten, Lieferzeiten und Liefergebiet für Bestellungen bei einfach produktiv.",
+ alternates: { canonical: "/versand" },
+};
+
+export default function VersandPage() {
+ return (
+ <>
+
+
+
+ Startseite
+ ›
+ Versand
+
+
+ Versand
+
+
+ Transparent, fair und pünktlich — alles zu Kosten, Lieferzeiten und Liefergebiet.
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/public/avatar-weekly-1.png b/public/avatar-weekly-1.png
new file mode 100644
index 0000000..7d51989
Binary files /dev/null and b/public/avatar-weekly-1.png differ
diff --git a/public/avatar-weekly-2.png b/public/avatar-weekly-2.png
new file mode 100644
index 0000000..ce99757
Binary files /dev/null and b/public/avatar-weekly-2.png differ
diff --git a/public/avatar-weekly-3.png b/public/avatar-weekly-3.png
new file mode 100644
index 0000000..9daca4b
Binary files /dev/null and b/public/avatar-weekly-3.png differ
diff --git a/public/hero-weekly-impulses.png b/public/hero-weekly-impulses.png
new file mode 100644
index 0000000..b85a832
Binary files /dev/null and b/public/hero-weekly-impulses.png differ
diff --git a/public/icon-cart-outline.png b/public/icon-cart-outline.png
new file mode 100644
index 0000000..48dceef
Binary files /dev/null and b/public/icon-cart-outline.png differ
diff --git a/public/icon-checklist.png b/public/icon-checklist.png
new file mode 100644
index 0000000..b4aeb8c
Binary files /dev/null and b/public/icon-checklist.png differ
diff --git a/public/icon-close.png b/public/icon-close.png
new file mode 100644
index 0000000..6aa86e4
Binary files /dev/null and b/public/icon-close.png differ
diff --git a/public/icon-envelope-hint.png b/public/icon-envelope-hint.png
new file mode 100644
index 0000000..5a4715f
Binary files /dev/null and b/public/icon-envelope-hint.png differ
diff --git a/public/icon-envelope-small.svg b/public/icon-envelope-small.svg
new file mode 100644
index 0000000..edd3eb7
--- /dev/null
+++ b/public/icon-envelope-small.svg
@@ -0,0 +1,11 @@
+
diff --git a/public/icon-heart.png b/public/icon-heart.png
new file mode 100644
index 0000000..1da3f2a
Binary files /dev/null and b/public/icon-heart.png differ
diff --git a/public/icon-sparkle-wrapper.svg b/public/icon-sparkle-wrapper.svg
new file mode 100644
index 0000000..21169e4
--- /dev/null
+++ b/public/icon-sparkle-wrapper.svg
@@ -0,0 +1,5 @@
+
diff --git a/public/icon-trust-free-shipping.png b/public/icon-trust-free-shipping.png
new file mode 100644
index 0000000..2dff1fd
Binary files /dev/null and b/public/icon-trust-free-shipping.png differ
diff --git a/public/icon-trust-heart.png b/public/icon-trust-heart.png
new file mode 100644
index 0000000..e24172d
Binary files /dev/null and b/public/icon-trust-heart.png differ
diff --git a/public/icon-trust-leaf.png b/public/icon-trust-leaf.png
new file mode 100644
index 0000000..c7359de
Binary files /dev/null and b/public/icon-trust-leaf.png differ
diff --git a/public/icon-trust-materials.png b/public/icon-trust-materials.png
new file mode 100644
index 0000000..d0b3e66
Binary files /dev/null and b/public/icon-trust-materials.png differ
diff --git a/public/icon-trust-return.png b/public/icon-trust-return.png
new file mode 100644
index 0000000..afec154
Binary files /dev/null and b/public/icon-trust-return.png differ
diff --git a/public/icon-trust-shipping.png b/public/icon-trust-shipping.png
new file mode 100644
index 0000000..88435b9
Binary files /dev/null and b/public/icon-trust-shipping.png differ
diff --git a/public/icon-weekly-step-1.png b/public/icon-weekly-step-1.png
new file mode 100644
index 0000000..7ca454b
Binary files /dev/null and b/public/icon-weekly-step-1.png differ
diff --git a/public/icon-weekly-step-2.png b/public/icon-weekly-step-2.png
new file mode 100644
index 0000000..e8e42fb
Binary files /dev/null and b/public/icon-weekly-step-2.png differ
diff --git a/public/icon-weekly-step-3.png b/public/icon-weekly-step-3.png
new file mode 100644
index 0000000..ef0d281
Binary files /dev/null and b/public/icon-weekly-step-3.png differ
diff --git a/public/icon-weekly-step-4.png b/public/icon-weekly-step-4.png
new file mode 100644
index 0000000..58db3c3
Binary files /dev/null and b/public/icon-weekly-step-4.png differ
diff --git a/public/newsletter-modal-photo.jpg b/public/newsletter-modal-photo.jpg
new file mode 100644
index 0000000..3ef77a4
Binary files /dev/null and b/public/newsletter-modal-photo.jpg differ
diff --git a/public/pagination-dots.svg b/public/pagination-dots.svg
new file mode 100644
index 0000000..366eb08
--- /dev/null
+++ b/public/pagination-dots.svg
@@ -0,0 +1,13 @@
+
diff --git a/public/product-notizbuch-fokus.png b/public/product-notizbuch-fokus.png
new file mode 100644
index 0000000..d882ef1
Binary files /dev/null and b/public/product-notizbuch-fokus.png differ
diff --git a/public/product-notizbuch-klarheit.png b/public/product-notizbuch-klarheit.png
new file mode 100644
index 0000000..aa79e53
Binary files /dev/null and b/public/product-notizbuch-klarheit.png differ
diff --git a/public/product-wochenplaner.png b/public/product-wochenplaner.png
new file mode 100644
index 0000000..200cec6
Binary files /dev/null and b/public/product-wochenplaner.png differ
diff --git a/public/product-zielkarten.png b/public/product-zielkarten.png
new file mode 100644
index 0000000..0bd4332
Binary files /dev/null and b/public/product-zielkarten.png differ
diff --git a/public/weekly-photo.png b/public/weekly-photo.png
new file mode 100644
index 0000000..551701f
Binary files /dev/null and b/public/weekly-photo.png differ
+ Sichere Zahlung
+ 
+ {b.text}
+ 
+
+ 
+ 
+ 
+ 
+