feat: Vorher/Nachher als interaktive Flip-Karten

- 6 Flip-Cards (3x2 Grid) - Vorderseite: "Kennst du das?" + Vorher-Text + "drehe mich um" Hint - Rückseite: "Das hast du danach:" + Nachher-Text (indigo/violet Gradient) - Hover-to-flip auf Desktop, Click-to-flip auf Mobile - CSS 3D rotateY(180deg), 0.55s cubic-bezier Transition - backface-visibility: hidden für sauberen Flip Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-30 22:21:58 +02:00 · 2026-04-30 22:21:58 +02:00 · cdb917322d
commit cdb917322d
parent a5b0e4c9a6
3 changed files with 194 additions and 29 deletions
--- a/src/app/components/FlipCards.tsx
+++ b/src/app/components/FlipCards.tsx
@ -0,0 +1,106 @@
+"use client";
+
+import { useState } from "react";
+
+const PAIRS = [
+  {
+    before: "\u201EIch wei\xDF viel \u2014 aber niemand fragt an.\u201C",
+    after:  "Positionierung in einem Satz. Ein System das planbar Anfragen bringt.",
+  },
+  {
+    before: "\u201EIch poste regelm\xe4\xDFig. Nichts passiert.\u201C",
+    after:  "Content-Plan f\xFCr alle Plattformen \u2014 du wei\xDFt was, wann und warum.",
+  },
+  {
+    before: "\u201EIch wei\xDF nicht wie Marketing und Vertrieb zusammenh\xe4ngen.\u201C",
+    after:  "Marketing-Systemkarte. Alle Teile greifen ineinander.",
+  },
+  {
+    before: "\u201EIch warte dass Kunden kommen.\u201C",
+    after:  "Verkaufsskript. Direktansprache. Du gehst aktiv auf Kunden zu.",
+  },
+  {
+    before: "\u201EIch werde online nicht gefunden.\u201C",
+    after:  "Google Business optimiert. Deine Seite f\xFCr dein Haupt-Keyword.",
+  },
+  {
+    before: "\u201ENach jedem Kurs fange ich wieder bei null an.\u201C",
+    after:  "Ein System aus Marketing, Vertrieb und Social Media \u2014 das weiterl\xe4uft.",
+  },
+];
+
+function FlipCard({ before, after }: { before: string; after: string }) {
+  const [flipped, setFlipped] = useState(false);
+
+  return (
+    <div
+      className="flip-card-wrapper cursor-pointer"
+      onClick={() => setFlipped((f) => !f)}
+      onMouseEnter={() => setFlipped(true)}
+      onMouseLeave={() => setFlipped(false)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === "Enter" && setFlipped((f) => !f)}
+      aria-label={`Karte umdrehen: ${before}`}
+    >
+      <div className={`flip-card-inner ${flipped ? "flipped" : ""}`}>
+
+        {/* VORDERSEITE — Vorher */}
+        <div className="flip-face flip-front">
+          <span className="flip-label flip-label-front">Kennst du das?</span>
+          <p className="flip-text">{before}</p>
+          <span className="flip-hint">
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            drehe mich um
+          </span>
+        </div>
+
+        {/* RÜCKSEITE — Nachher */}
+        <div className="flip-face flip-back">
+          <span className="flip-label flip-label-back">Das hast du danach:</span>
+          <p className="flip-text">{after}</p>
+          <span className="flip-hint flip-hint-back">
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            nach 8 Wochen
+          </span>
+        </div>
+
+      </div>
+    </div>
+  );
+}
+
+export default function FlipCards() {
+  return (
+    <section className="py-20">
+      <div className="max-w-5xl mx-auto px-6">
+        <div className="text-center mb-12">
+          <span className="inline-flex items-center gap-2 bg-indigo-50 text-indigo-700 text-xs font-bold uppercase tracking-widest rounded-full px-4 py-2 border border-indigo-100">
+            <span className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
+            Transformation
+          </span>
+          <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">
+            Kennst du das?
+          </h2>
+          <p className="mt-2 text-slate-500 text-sm">
+            Fahre über eine Karte — oder klicke drauf — um zu sehen was sich verändert.
+          </p>
+        </div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {PAIRS.map((pair, i) => (
+            <FlipCard key={i} before={pair.before} after={pair.after} />
+          ))}
+        </div>
+
+        <p className="mt-10 text-center text-indigo-700 font-semibold text-lg">
+          Dein Wissen war schon da. Jetzt bekommt es die Struktur die Kunden bringt.
+        </p>
+      </div>
+    </section>
+  );
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -59,6 +59,92 @@ body {

 details summary::-webkit-details-marker { display: none; }

+/* ── Flip Cards ── */
+.flip-card-wrapper {
+  perspective: 1000px;
+  height: 220px;
+}
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
+}
+
+.flip-card-inner.flipped {
+  transform: rotateY(180deg);
+}
+
+.flip-face {
+  position: absolute;
+  inset: 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 24px;
+  text-align: center;
+}
+
+.flip-front {
+  background: #ffffff;
+  border: 1px solid #eae8f8;
+  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);
+}
+
+.flip-back {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  transform: rotateY(180deg);
+  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.35);
+}
+
+.flip-label {
+  font-size: 0.65rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  border-radius: 99px;
+  padding: 3px 10px;
+}
+
+.flip-label-front {
+  background: #eef2ff;
+  color: #4338ca;
+}
+
+.flip-label-back {
+  background: rgba(255,255,255,0.2);
+  color: #fff;
+}
+
+.flip-text {
+  font-size: 0.9rem;
+  line-height: 1.5;
+  font-style: italic;
+}
+
+.flip-front .flip-text  { color: #475569; }
+.flip-back  .flip-text  { color: #fff; font-style: normal; font-weight: 600; }
+
+.flip-hint {
+  font-size: 0.68rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #a5b4fc;
+  margin-top: auto;
+}
+
+.flip-hint-back {
+  color: rgba(255,255,255,0.7);
+}
+
 /* ── Timeline scroll animations ── */
 .tl-card {
  opacity: 0;
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,5 +1,6 @@
 import Image from "next/image";
 import WeekTimeline from "./components/WeekTimeline";
+import FlipCards from "./components/FlipCards";

 const CTA_HREF = "#platz-sichern";

@ -225,35 +226,7 @@ export default function Home() {

      <WeekTimeline />

-      {/* ══════════════════════════════════════════
-          VORHER / NACHHER
-      ══════════════════════════════════════════ */}
-      <section className="py-20">
-        <div className="max-w-4xl mx-auto px-6">
-          <div className="text-center mb-12">
-            <Pill>Transformation</Pill>
-            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Vorher. Nachher.</h2>
-          </div>
-          <div className="space-y-3">
-            {[
-              ["\u201EIch wei\xDF viel \u2014 aber niemand fragt an.\u201C", "Positionierung in einem Satz. System das Anfragen bringt."],
-              ["\u201EIch poste regelm\xe4\xDFig. Nichts passiert.\u201C", "Content-Plan f\xFCr alle Plattformen \u2014 du wei\xDFt was, wann, warum."],
-              ["\u201EIch wei\xDF nicht wie Marketing und Vertrieb zusammenh\xe4ngen.\u201C", "Marketing-Systemkarte. Alle Teile greifen ineinander."],
-              ["\u201EIch warte dass Kunden kommen.\u201C", "Verkaufsskript. Direktansprache. Ich gehe hin."],
-              ["\u201EIch werde online nicht gefunden.\u201C", "Google Business optimiert. Seite f\xFCr mein Keyword."],
-              ["\u201ENach jedem Kurs fange ich wieder bei null an.\u201C", "Ein System aus Marketing, Vertrieb und Social Media \u2014 das weiterl\xe4uft."],
-            ].map(([before, after], i) => (
-              <div key={i} className="mc-card grid grid-cols-2 overflow-hidden">
-                <div className="p-4 text-slate-500 italic text-sm border-r border-slate-100">{before}</div>
-                <div className="p-4 text-indigo-700 font-semibold text-sm">{after}</div>
-              </div>
-            ))}
-          </div>
-          <p className="mt-8 text-center text-indigo-700 font-semibold text-xl">
-            Dein Wissen war schon da. Jetzt hat es eine Struktur die Kunden bringt.
-          </p>
-        </div>
-      </section>
+      <FlipCards />

      {/* ══════════════════════════════════════════
          MEET THE COACH — Brunson-Style