Initial commit

2026-02-24 21:21:39 +01:00
parent 67a58bea3a
commit 132945f4c6
236 changed files with 14774 additions and 5865 deletions
--- a/components/TestimonialCarousel.tsx
+++ b/components/TestimonialCarousel.tsx
@@ -0,0 +1,113 @@
+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;