Add shop, cart, versand pages and Impulse & Tipps detail page

- New /shop overview, /cart (real cart state via useSyncExternalStore), /versand (shipping policy page with TOC) and /newsletter detail page - Cart: quantity/removal, order summary, related-products cross-sell with randomized picks, VersandModal quick-reference instead of navigating away, MwSt. disclosure next to unit prices - Add-to-cart UX: inline success feedback (green state) plus a fly-to-navbar-cart-icon animation (CartFlyProvider) with a delayed badge count-up; AddToCartButton no longer navigates straight to /cart - Shared lib/products.ts catalog and lib/shipping.ts constants (cost, free-shipping threshold, handling/transit days) so cart, trust badges and the versand page can never drift apart - Fix Navbar smooth-scroll easing (ease-out instead of ease-in-out, no more perceived start delay); compress newsletter modal photo 2.4MB -> 85KB to fix first-open jank
2026-07-19 14:42:22 +00:00
parent e4f0c66d7b
commit 9e5532be63
63 changed files with 2205 additions and 165 deletions
@@ -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<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const buttonRef = useRef<HTMLButtonElement>(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 (
+    <button ref={buttonRef} type="button" onClick={handleClick} className={`${base} ${stateClasses}`}>
+      <span
+        className={
+          "text-body-sm transition-colors " +
+          (added ? "font-semibold text-success" : "text-text-primary")
+        }
+      >
+        {added ? "Hinzugefügt ✓" : label}
+      </span>
+      <img alt="" src="/icon-cart-outline.png" className="h-[1.875rem] w-8 object-contain" />
+    </button>
+  );
+}