From e5f053b3c4e72fe13ceb6057d54a8798a3c089c0 Mon Sep 17 00:00:00 2001
From: Athena <athena@market-compass.de>
Date: Tue, 5 May 2026 14:05:44 +0200
Subject: [PATCH] redesign: Bonus-Karten als Flip-Cards mit minimalem
 Icon-Design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Neue BonusCards.tsx Komponente mit Flip-Mechanismus
- Vorderseite: kleines dezentes Icon oben + großer fetter Titel als Hauptelement
- Rückseite: Indigo/Violet Gradient + Detailbeschreibung
- FlipCards-Heading: "Transformation/Kennst du das?" → "Ergebnisse/Diese Ergebnisse kannst du vom Programm erwarten"
- Bonus-Heading: neu mit "HEUTE" + Subzeile
- Unused Icon-Imports aus page.tsx entfernt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/components/BonusCards.tsx | 192 ++++++++++++++++++++++++++++++
 src/app/components/FlipCards.tsx  |   4 +-
 src/app/page.tsx                  |  29 +----
 3 files changed, 199 insertions(+), 26 deletions(-)
 create mode 100644 src/app/components/BonusCards.tsx

diff --git a/src/app/components/BonusCards.tsx b/src/app/components/BonusCards.tsx
new file mode 100644
index 0000000..6fcbb64
--- /dev/null
+++ b/src/app/components/BonusCards.tsx
@@ -0,0 +1,192 @@
+"use client";
+
+import { useState } from "react";
+import {
+  PackageIcon, PhoneIcon, VideoCameraIcon,
+  MapIcon, ChatIcon, HandshakeIcon,
+} from "./Icons";
+
+const BONUSES = [
+  {
+    n: 1,
+    icon: <PackageIcon className="w-6 h-6" />,
+    title: "Sofort loslegen: 7 fertige Vorlagen",
+    desc: "7 Vorlagen zum Direkt-Ausfüllen: Wunschkunden-Persona · Positionierungsformel · Verkaufsseiten-Struktur · 90-Tage-Marketingplan · Kanal-Entscheidungsmatrix · Marketing-Audit · Kurztext für Website & Social Media",
+    val: "497 €",
+  },
+  {
+    n: 2,
+    icon: <PhoneIcon className="w-6 h-6" />,
+    title: "Kunden gewinnen über Instagram",
+    desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt erklärt, direkt umsetzbar.",
+    val: "297 €",
+  },
+  {
+    n: 3,
+    icon: <VideoCameraIcon className="w-6 h-6" />,
+    title: "Professionell filmen — mit dem Handy",
+    desc: "Kein teures Equipment. Die Grundlagen von den Video-Experten — die du zuhause selbst anwenden kannst und die deine Content-Qualität sofort verbesserst.",
+    val: "197 €",
+  },
+  {
+    n: 4,
+    icon: <MapIcon className="w-6 h-6" />,
+    title: "Welcher Social Media Kanal passt zu dir?",
+    desc: "Kein Rätselraten mehr — du weißt auf welchem Social Media Kanal deine Wunschkunden aktiv sind, und wo es sich wirklich lohnt Zeit zu investieren.",
+    val: "147 €",
+  },
+  {
+    n: 5,
+    icon: <ChatIcon className="w-6 h-6" />,
+    title: "1 Monat Begleitung nach dem Programm",
+    desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen. Fragen zur Umsetzung, offener Austausch, Motivation.",
+    val: "97 €",
+  },
+  {
+    n: 6,
+    icon: <HandshakeIcon className="w-6 h-6" />,
+    title: "Abschluss-Netzwerkevent (geplant)",
+    desc: "Nach der letzten Session kommen alle zusammen. Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.",
+    val: "197 €",
+  },
+];
+
+const faceBase: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  borderRadius: "1rem",
+  display: "flex",
+  flexDirection: "column",
+  padding: "24px",
+  WebkitBackfaceVisibility: "hidden",
+  backfaceVisibility: "hidden",
+};
+
+function BonusCard({ n, icon, title, desc, val }: {
+  n: number; icon: React.ReactNode; title: string; desc: string; val: string;
+}) {
+  const [flipped, setFlipped] = useState(false);
+
+  return (
+    <div
+      style={{ perspective: "1000px", height: "280px", cursor: "pointer" }}
+      onClick={() => setFlipped((f) => !f)}
+      onMouseEnter={() => setFlipped(true)}
+      onMouseLeave={() => setFlipped(false)}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => e.key === "Enter" && setFlipped((f) => !f)}
+    >
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          transformStyle: "preserve-3d",
+          transition: "transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1)",
+          transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
+        }}
+      >
+        {/* VORDERSEITE */}
+        <div
+          style={{
+            ...faceBase,
+            background: "#ffffff",
+            border: "1px solid #eae8f8",
+            boxShadow: "inset 0 3px 0 #6366f1, 0 2px 12px rgba(99,102,241,0.06)",
+          }}
+        >
+          {/* Oben: Icon (minimal) + Bonus-Label */}
+          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+            <span style={{ color: "#a5b4fc" }}>{icon}</span>
+            <span style={{
+              fontSize: "0.6rem", fontWeight: 800, letterSpacing: "0.12em",
+              textTransform: "uppercase", borderRadius: "99px",
+              padding: "3px 10px", background: "#eef2ff", color: "#6366f1",
+            }}>
+              Bonus {n}
+            </span>
+          </div>
+
+          {/* Spacer */}
+          <div style={{ flex: 1 }} />
+
+          {/* Titel — Hauptelement */}
+          <p style={{
+            fontSize: "1.05rem", fontWeight: 800, color: "#0f172a",
+            lineHeight: 1.3, marginBottom: "16px",
+          }}>
+            {title}
+          </p>
+
+          {/* Wert-Badge */}
+          <span style={{
+            fontSize: "0.75rem", fontWeight: 700, color: "#059669",
+            background: "#ecfdf5", border: "1px solid #bbf7d0",
+            borderRadius: "99px", padding: "4px 14px",
+            alignSelf: "flex-start",
+          }}>
+            Wert: {val}
+          </span>
+
+          {/* Hint */}
+          <div style={{
+            marginTop: "16px", fontSize: "0.62rem", display: "flex",
+            alignItems: "center", gap: "4px", color: "#c7d2fe",
+          }}>
+            <svg width="11" height="11" 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
+          </div>
+        </div>
+
+        {/* RÜCKSEITE */}
+        <div
+          style={{
+            ...faceBase,
+            background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
+            boxShadow: "0 4px 24px rgba(99,102,241,0.35)",
+            transform: "rotateY(180deg)",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center",
+            gap: "14px",
+          }}
+        >
+          <span style={{
+            fontSize: "0.62rem", fontWeight: 800, letterSpacing: "0.12em",
+            textTransform: "uppercase", borderRadius: "99px",
+            padding: "3px 10px", background: "rgba(255,255,255,0.2)", color: "#fff",
+          }}>
+            Was du erhältst:
+          </span>
+
+          <p style={{ fontSize: "0.85rem", lineHeight: 1.65, color: "#fff", fontWeight: 500 }}>
+            {desc}
+          </p>
+
+          <span style={{
+            fontSize: "0.62rem", display: "flex", alignItems: "center",
+            gap: "4px", color: "rgba(255,255,255,0.65)", marginTop: "auto",
+          }}>
+            <svg width="11" height="11" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            inklusive im Pilotprogramm
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function BonusCards() {
+  return (
+    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      {BONUSES.map((b) => (
+        <BonusCard key={b.n} {...b} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/components/FlipCards.tsx b/src/app/components/FlipCards.tsx
index abd7667..e1a5507 100644
--- a/src/app/components/FlipCards.tsx
+++ b/src/app/components/FlipCards.tsx
@@ -149,9 +149,9 @@ export default function FlipCards() {
         <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
+            Ergebnisse
           </span>
-          <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Kennst du das?</h2>
+          <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Diese Ergebnisse kannst du vom Programm erwarten</h2>
           <p className="mt-2 text-slate-500 text-sm">
             Fahre über eine Karte — oder tippe drauf — um zu sehen was sich verändert.
           </p>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f3e0715..7a5ae48 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,10 @@
 import Image from "next/image";
 import WeekTimeline from "./components/WeekTimeline";
 import FlipCards from "./components/FlipCards";
+import BonusCards from "./components/BonusCards";
 import MountainClimb from "./components/MountainClimb";
 import {
-  CalendarIcon, GradCapIcon, UsersIcon, ClipboardIcon,
-  PhoneIcon, VideoCameraIcon, HandshakeIcon, MapIcon,
-  PackageIcon, ChatIcon, CheckIcon,
+  CalendarIcon, GradCapIcon, UsersIcon, ClipboardIcon, CheckIcon,
 } from "./components/Icons";
 
 const CTA_HREF = "#platz-sichern";
@@ -337,33 +336,15 @@ export default function Home() {
         <div className="max-w-5xl mx-auto px-6">
           <div className="text-center mb-12">
             <Pill>Bonus-Paket</Pill>
-            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Und du bist während und nach dem Programm nie allein.</h2>
+            <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Hier ist alles was du HEUTE zusätzlich zum Coaching Programm erhältst.</h2>
+            <p className="mt-3 text-slate-500 text-lg">Alles was du brauchst, um dein Business richtig voran zu bringen.</p>
           </div>
           <div className="mc-card p-6 mb-8 bg-gradient-to-r from-indigo-50 to-violet-50 border-indigo-100 text-center">
             <p className="text-slate-700 leading-relaxed">
               <strong>Die gesamten 8 Wochen:</strong> In der Messenger-Community beantwortet Katja täglich Fragen. Du kannst jederzeit posten — Feedback kommt. 8 Wochen tägliche Begleitung.
             </p>
           </div>
-          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
-            {[
-              { n: 1, icon: <PackageIcon className="w-6 h-6 text-indigo-500" />, title: "Sofort loslegen: 7 fertige Vorlagen", desc: "Alle wichtigen Vorlagen direkt anwendbar — du fängst nicht bei null an.", val: "497 €" },
-              { n: 2, icon: <PhoneIcon className="w-6 h-6 text-indigo-500" />, title: "Kunden gewinnen über Instagram", desc: "Wie du über Social Media planbar Anfragen bekommst — Schritt für Schritt.", val: "297 €" },
-              { n: 3, icon: <VideoCameraIcon className="w-6 h-6 text-indigo-500" />, title: "Professionell filmen — mit dem Handy", desc: "Kein teures Equipment. Die Grundlagen von den Video-Experten.", val: "197 €" },
-              { n: 4, icon: <MapIcon className="w-6 h-6 text-indigo-500" />, title: "Welche Plattform passt zu dir?", desc: "Kein Rätselraten — du weißt auf welcher Plattform deine Wunschkunden sind.", val: "147 €" },
-              { n: 5, icon: <ChatIcon className="w-6 h-6 text-indigo-500" />, title: "1 Monat Begleitung nach dem Programm", desc: "Die Messenger-Community bleibt einen Monat nach dem Programm offen.", val: "97 €" },
-              { n: 6, icon: <HandshakeIcon className="w-6 h-6 text-indigo-500" />, title: "Abschluss-Netzwerkevent (geplant)", desc: "Persönliches Feedback von Katja. Neue Kontakte. Exklusiv für den Pilotdurchlauf.", val: "197 €" },
-            ].map(({ n, icon, title, desc, val }) => (
-              <div key={n} className="mc-card p-5 space-y-2">
-                <div className="flex items-center justify-between">
-                  <span>{icon}</span>
-                  <span className="text-xs font-bold text-emerald-600 bg-emerald-50 border border-emerald-200 rounded-full px-2 py-0.5">Wert: {val}</span>
-                </div>
-                <p className="text-xs font-bold text-indigo-600 uppercase tracking-wide">Bonus {n}</p>
-                <p className="font-bold text-slate-900 text-base">{title}</p>
-                <p className="text-slate-500 text-sm leading-relaxed">{desc}</p>
-              </div>
-            ))}
-          </div>
+          <BonusCards />
         </div>
       </section>