feat: Testimonials mit echten Google-Bewertungen befüllen
- 4 echte Bewertungen: Varvara Beloussova, Anke Rühle-Metz, Onlinewerbevideo, Ines Thiele-Seidel - Varvara als Featured-Karte (volle Breite) + 3er-Grid für die anderen - Reviewer-Fotos als runde Avatare (public/testimonials/) - Heading und Subtext ohne "Katja" — Market Compass Branding Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
4f006d6d3a
commit
0e01b4c672
4 changed files with 69 additions and 10 deletions
BIN
public/testimonials/anke.png
Executable file
BIN
public/testimonials/anke.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
public/testimonials/onlinewerbevideo.png
Executable file
BIN
public/testimonials/onlinewerbevideo.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/testimonials/varvara.png
Executable file
BIN
public/testimonials/varvara.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
|
|
@ -253,20 +253,79 @@ export default function Home() {
|
|||
<div className="max-w-5xl mx-auto px-6">
|
||||
<div className="text-center mb-12">
|
||||
<Pill>Erfahrungen</Pill>
|
||||
<h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was Selbstständige über die Zusammenarbeit mit Katja sagen</h2>
|
||||
<p className="mt-2 text-slate-500 text-sm italic">Das Programm startet Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Katja.</p>
|
||||
<h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Was unsere Kunden über unsere Zusammenarbeit sagen</h2>
|
||||
<p className="mt-2 text-slate-500 text-sm italic">Das Programm startet Juli 2027. Diese Erfahrungen kommen aus der direkten Zusammenarbeit mit Market Compass.</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="mc-card p-6 space-y-4">
|
||||
|
||||
{/* Featured — Varvara (stärkste Geschichte) */}
|
||||
<div className="mc-card p-6 md:p-8 mb-6" style={{ boxShadow: "inset 0 3px 0 #6366f1, 0 2px 12px rgba(99,102,241,0.06)" }}>
|
||||
<div className="flex flex-col sm:flex-row gap-6">
|
||||
<div className="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 bg-indigo-100">
|
||||
<Image src="/testimonials/varvara.png" alt="Varvara Beloussova" fill className="object-cover" sizes="64px" />
|
||||
</div>
|
||||
<div className="space-y-3 flex-1">
|
||||
<div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
|
||||
<p className="text-slate-500 italic text-sm leading-relaxed">[Google-Bewertung {i} einfügen]</p>
|
||||
<div className="flex items-center gap-3 border-t border-slate-100 pt-4">
|
||||
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-indigo-400 to-violet-400 flex-shrink-0" />
|
||||
<p className="text-slate-400 text-xs">— [Name, Berufsfeld]</p>
|
||||
<p className="text-slate-600 leading-relaxed italic">
|
||||
„Ich hatte einen Online-Kurs für angehende Psycholog:innen vorbereitet, viel Energie hineingesteckt — aber über Instagram kamen einfach keine Anfragen. Unsere Beratung war kein oberflächliches ‚Marketing-Gerede', sondern ein sehr ehrlicher, klarer Blick auf meine Situation. Mir wurde erklärt, dass meine Zielgruppe schlicht nicht in meinem Instagram vertreten ist — und ich bekam ganz konkrete nächste Schritte. Schon am nächsten Tag waren 6 von 12 Plätzen vergeben! Warm, menschlich und gleichzeitig unglaublich präzise und professionell. Ich würde Market Compass von ganzem Herzen empfehlen."
|
||||
</p>
|
||||
<div className="border-t border-slate-100 pt-3">
|
||||
<p className="font-semibold text-slate-900 text-sm">Varvara Beloussova</p>
|
||||
<p className="text-slate-400 text-xs">Online-Kurs für Psycholog:innen</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3 weitere Bewertungen */}
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Anke */}
|
||||
<div className="mc-card p-6 space-y-4">
|
||||
<div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
|
||||
<p className="text-slate-500 italic text-sm leading-relaxed">
|
||||
„Frau Pestereva überzeugt durch ihre überaus hohe fachliche Kompetenz, ihre schnelle und zuverlässige Unterstützung sowie ihre sehr freundliche Art. Die Kommunikation verlief stets unkompliziert, schnell und lösungsorientiert. Ich kann Market Compass uneingeschränkt weiterempfehlen."
|
||||
</p>
|
||||
<div className="flex items-center gap-3 border-t border-slate-100 pt-4">
|
||||
<div className="relative w-9 h-9 rounded-full overflow-hidden flex-shrink-0 bg-indigo-100">
|
||||
<Image src="/testimonials/anke.png" alt="Anke Rühle-Metz" fill className="object-cover" sizes="36px" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-slate-900 text-xs">Anke Rühle-Metz</p>
|
||||
<p className="text-slate-400 text-xs">Unternehmerin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Onlinewerbevideo */}
|
||||
<div className="mc-card p-6 space-y-4">
|
||||
<div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
|
||||
<p className="text-slate-500 italic text-sm leading-relaxed">
|
||||
„Auch wenn wir schon eine Weile als Videoproduktion in der Marketing-Welt unterwegs sind, konnten wir noch sehr viel in unseren Sessions mitnehmen. Allein die Zielgruppenanalyse war es wert — wir freuen uns auf die weitere Zusammenarbeit."
|
||||
</p>
|
||||
<div className="flex items-center gap-3 border-t border-slate-100 pt-4">
|
||||
<div className="relative w-9 h-9 rounded-full overflow-hidden flex-shrink-0 bg-indigo-100">
|
||||
<Image src="/testimonials/onlinewerbevideo.png" alt="Onlinewerbevideo" fill className="object-cover" sizes="36px" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-slate-900 text-xs">Onlinewerbevideo</p>
|
||||
<p className="text-slate-400 text-xs">Videoproduktion</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ines */}
|
||||
<div className="mc-card p-6 space-y-4">
|
||||
<div className="text-yellow-400 text-lg tracking-wider">★★★★★</div>
|
||||
<p className="text-slate-500 italic text-sm leading-relaxed">
|
||||
„Sehr kompetent, gehen individuell auf die Kunden ein, hören sehr gut zu und erarbeiten marktfähige Konzepte. Das Personal ist super nett."
|
||||
</p>
|
||||
<div className="flex items-center gap-3 border-t border-slate-100 pt-4">
|
||||
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-indigo-400 to-violet-400 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="font-semibold text-slate-900 text-xs">Ines Thiele-Seidel</p>
|
||||
<p className="text-slate-400 text-xs">Unternehmerin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Reference in a new issue