Wire testimonials CMS collection and Payload Live Preview

Testimonials on /todo-cards, /newsletter, /challenge now come from the new Payload testimonials collection via a shared TestimonialsGrid component, instead of 3 separately hardcoded arrays. Adds Next.js Draft Mode (/api/preview) plus Live-Preview-aware client wrappers (LiveRichText, LiveTestimonialsGrid, LivePostContent) for posts, legal pages, and testimonials — mounted only while Draft Mode is enabled, so ordinary visitors keep getting the plain static components.
2026-07-21 19:02:20 +00:00
parent 2d6cff9f40
commit 26ae4a15f4
18 changed files with 420 additions and 305 deletions
@@ -0,0 +1,55 @@
+import Image from "next/image";
+import { Reveal, RevealGroup, RevealItem } from "./Reveal";
+import type { Testimonial } from "../lib/payload";
+
+// Shared by /todo-cards, /newsletter, and /challenge — all three were
+// already pixel-identical (bg-muted filled card, no border, decorative
+// quote-mark, quote on top with flex-1 pushing the avatar/name row to the
+// bottom, hover-lift + avatar-scale), kept in sync deliberately as one
+// visual pattern across pages rather than each page's own (differing)
+// Figma spec for this one section. max-w-[1600px] matches Challenge's
+// testimonial container cap, the widest of the three original values —
+// a deliberate compromise so all three read consistently across viewports
+// instead of one looking narrower than the others past ~1440px.
+export function TestimonialsGrid({ testimonials }: { testimonials: Testimonial[] }) {
+  if (testimonials.length === 0) return null;
+
+  return (
+    <section className="w-full bg-bg-base flex flex-col gap-8 items-center py-12 md:py-16 px-[var(--layout-padding-x)]">
+      <div className="max-w-[1600px] mx-auto w-full flex flex-col gap-8 items-center">
+        <Reveal
+          className="font-semibold text-h-emphasis text-text-primary text-center"
+          style={{ fontFamily: "var(--font-lora)" }}
+        >
+          Was andere sagen
+        </Reveal>
+
+        <RevealGroup className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-[var(--layout-grid-gap)] w-full">
+          {testimonials.map((t) => (
+            <RevealItem
+              key={t.id}
+              className="group relative md:col-span-4 bg-bg-muted rounded-xl p-6 flex flex-col gap-4 transition-transform duration-300 hover:-translate-y-1"
+            >
+              <span
+                aria-hidden
+                className="absolute top-4 right-6 font-bold text-[2.5rem] text-[#ccc] leading-none select-none"
+              >
+                ”
+              </span>
+              <p className="flex-1 text-body-sm text-text-primary leading-[1.6] pr-8">{t.quote}</p>
+              <div className="flex items-center gap-3">
+                <div className="relative size-10 shrink-0 rounded-full overflow-hidden transition-transform duration-300 group-hover:scale-110">
+                  <Image src={t.avatar} alt={t.name} fill sizes="40px" className="object-cover" />
+                </div>
+                <div>
+                  <p className="font-semibold text-body-sm text-text-primary">{t.name}</p>
+                  <p className="text-body-sm text-text-muted">{t.role}</p>
+                </div>
+              </div>
+            </RevealItem>
+          ))}
+        </RevealGroup>
+      </div>
+    </section>
+  );
+}