From 4f006d6d3a8f2864eff96030e1ced1d0e6741d39 Mon Sep 17 00:00:00 2001
From: Athena <athena@market-compass.de>
Date: Tue, 5 May 2026 10:55:08 +0200
Subject: [PATCH] feat: FlipCards topic labels + content update

- Replace generic "Kennst du das?" with topic-specific labels per card
- Topics: Positionierung, Content-Plan, Verkaufsseite, Vertrieb, SEO & Google, Video & Social Media
- Remove Marketing/Vertrieb card, add Verkaufsseite card
- Update card 1 copy to focus on application over theory
- Update card 6 to video/content creation focus

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/components/FlipCards.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/components/FlipCards.tsx b/src/app/components/FlipCards.tsx
index cdde105..abd7667 100644
--- a/src/app/components/FlipCards.tsx
+++ b/src/app/components/FlipCards.tsx
@@ -4,32 +4,38 @@ 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.",
+    topic:  "Positionierung",
+    before: "\u201EIch habe viel \xFCber Marketing gelernt \u2014 aber ich wei\xDF nicht wie ich es bei mir anwende.\u201C",
+    after:  "Wir bauen dein pers\xF6nliches System \u2014 du setzt um was du schon wei\xDFt.",
   },
   {
+    topic:  "Content-Plan",
     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.",
+    topic:  "Verkaufsseite",
+    before: "\u201EIch wei\xDF nicht wie ich eine Verkaufslandingpage baue.\u201C",
+    after:  "Du bekommst Schritt-f\xFCr-Schritt Anleitung \u2014 und baust deine eigene Verkaufsseite.",
   },
   {
+    topic:  "Vertrieb",
     before: "\u201EIch warte dass Kunden kommen.\u201C",
     after:  "Verkaufsskript. Direktansprache. Du gehst aktiv auf Kunden zu.",
   },
   {
+    topic:  "SEO & Google",
     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.",
+    topic:  "Video & Social Media",
+    before: "\u201EIch will Content machen \u2014 aber ich wei\xDF nicht wo ich anfangen soll: welche Kamera, wie schneiden?\u201C",
+    after:  "Handy-Video-Setup + Schnitt-Grundlagen. Du gehst raus und drehst deinen ersten Reel.",
   },
 ];
 
-function FlipCard({ before, after }: { before: string; after: string }) {
+function FlipCard({ topic, before, after }: { topic: string; before: string; after: string }) {
   const [flipped, setFlipped] = useState(false);
 
   const faceBase: React.CSSProperties = {
@@ -82,7 +88,7 @@ function FlipCard({ before, after }: { before: string; after: string }) {
             textTransform: "uppercase", borderRadius: "99px",
             padding: "3px 10px", background: "#eef2ff", color: "#4338ca",
           }}>
-            Kennst du das?
+            {topic}
           </span>
 
           <p style={{ fontSize: "0.9rem", lineHeight: 1.5, fontStyle: "italic", color: "#475569" }}>
@@ -153,7 +159,7 @@ export default function FlipCards() {
 
         <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} />
+            <FlipCard key={i} topic={pair.topic} before={pair.before} after={pair.after} />
           ))}
         </div>