114 lines
4.6 KiB
TypeScript
114 lines
4.6 KiB
TypeScript
import React, { useEffect, useState, useCallback } from 'react';
|
|
import useEmblaCarousel from 'embla-carousel-react';
|
|
|
|
const testimonials = [
|
|
{
|
|
text: "Dieses Buch war der Wendepunkt in meiner chronischen Erschöpfung. Roberto schreibt mit einer Klarheit, die einen direkt im Herzen trifft.",
|
|
author: "Stefan M.",
|
|
role: "Unternehmer",
|
|
stars: 5,
|
|
},
|
|
{
|
|
text: "Man spürt auf jeder Seite, dass hier jemand schreibt, der den Weg selbst gegangen ist. Grounded Luxury trifft es perfekt.",
|
|
author: "Julia K.",
|
|
role: "Ärztin",
|
|
stars: 5,
|
|
},
|
|
{
|
|
text: "Das Retreat war lebensverändernd. Die Kombination aus Natur, Theorie und Praxis ist in dieser Form einzigartig.",
|
|
author: "Markus L.",
|
|
role: "Creative Director",
|
|
stars: 5,
|
|
},
|
|
{
|
|
text: "Endlich ein Ansatz, der Wissenschaft und Spiritualität nicht als Gegensätze sieht, sondern vereint. Danke für diese Arbeit.",
|
|
author: "Sarah B.",
|
|
role: "Psychologin",
|
|
stars: 5,
|
|
},
|
|
{
|
|
text: "Ich habe schon viele Methoden ausprobiert, aber erst Riboneo hat mir geholfen, wirklich zur Ruhe zu kommen und meine Energie zurückzugewinnen.",
|
|
author: "Thomas W.",
|
|
role: "Architekt",
|
|
stars: 5,
|
|
},
|
|
];
|
|
|
|
const TestimonialCarousel: React.FC = () => {
|
|
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'start' });
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
|
|
const scrollTo = useCallback((index: number) => {
|
|
if (emblaApi) emblaApi.scrollTo(index);
|
|
}, [emblaApi]);
|
|
|
|
const onSelect = useCallback(() => {
|
|
if (!emblaApi) return;
|
|
setSelectedIndex(emblaApi.selectedScrollSnap());
|
|
}, [emblaApi]);
|
|
|
|
useEffect(() => {
|
|
if (!emblaApi) return;
|
|
onSelect();
|
|
emblaApi.on('select', onSelect);
|
|
|
|
// Auto-play functionality
|
|
const intervalId = setInterval(() => {
|
|
if (emblaApi.canScrollNext()) {
|
|
emblaApi.scrollNext();
|
|
} else {
|
|
emblaApi.scrollTo(0);
|
|
}
|
|
}, 5000);
|
|
|
|
return () => {
|
|
emblaApi.off('select', onSelect);
|
|
clearInterval(intervalId);
|
|
};
|
|
}, [emblaApi, onSelect]);
|
|
|
|
return (
|
|
<div className="relative max-w-7xl mx-auto px-6">
|
|
<div className="overflow-hidden" ref={emblaRef}>
|
|
<div className="flex -ml-4">
|
|
{testimonials.map((testimonial, index) => (
|
|
<div className="flex-[0_0_100%] md:flex-[0_0_50%] lg:flex-[0_0_33.333%] min-w-0 pl-4" key={index}>
|
|
<div className="h-full p-10 bg-secondary/20 dark:bg-white/5 shape-squircle flex flex-col justify-between">
|
|
<div>
|
|
<div className="flex gap-1 text-yellow-500 mb-6">
|
|
{[...Array(testimonial.stars)].map((_, i) => (
|
|
<span key={i} className="material-symbols-outlined fill-1">star</span>
|
|
))}
|
|
</div>
|
|
<p className="text-lg italic mb-8 leading-relaxed text-slate-700 dark:text-slate-300">"{testimonial.text}"</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-slate-300 flex-shrink-0"></div>
|
|
<div>
|
|
<p className="font-bold text-slate-900 dark:text-white">{testimonial.author}</p>
|
|
<p className="text-sm opacity-60 text-slate-600 dark:text-slate-400">{testimonial.role}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-3 mt-10">
|
|
{testimonials.map((_, index) => (
|
|
<button
|
|
key={index}
|
|
className={`w-3 h-3 rounded-full transition-all duration-300 ${index === selectedIndex ? 'bg-primary w-8' : 'bg-slate-300 dark:bg-white/20 hover:bg-primary/50'
|
|
}`}
|
|
onClick={() => scrollTo(index)}
|
|
aria-label={`Go to slide ${index + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TestimonialCarousel;
|