diff --git a/teressa-copeland-homes/src/app/_components/TestimonialsSection.tsx b/teressa-copeland-homes/src/app/_components/TestimonialsSection.tsx new file mode 100644 index 0000000..b1ccdda --- /dev/null +++ b/teressa-copeland-homes/src/app/_components/TestimonialsSection.tsx @@ -0,0 +1,190 @@ +'use client'; + +import { useState, useEffect, useRef } from 'react'; +import { ChevronLeft, ChevronRight } from 'lucide-react'; + +// PLACEHOLDER TESTIMONIALS — replace with real client reviews before launch +const TESTIMONIALS = [ + { + quote: + 'Working with Teressa made buying our first home in Salt Lake County feel effortless. She guided us through every step with patience and expertise.', + name: 'Sarah Mitchell', + }, + { + quote: + 'Teressa sold our Provo home in under a week — above asking price. Her knowledge of the Utah market is exceptional.', + name: 'James & Karen Olsen', + }, + { + quote: + 'As first-time buyers, we had so many questions. Teressa answered every one and found us the perfect home in our budget.', + name: 'Tyler Reeves', + }, + { + quote: + 'Relocating from out of state is stressful, but Teressa made our transition to Utah smooth and seamless.', + name: 'Michelle Torres', + }, + { + quote: + "Teressa's negotiating skills saved us thousands. We couldn't be happier with our new home in Herriman.", + name: 'David & Pam Christensen', + }, +]; + +export default function TestimonialsSection() { + const [activeIndex, setActiveIndex] = useState(0); + const [paused, setPaused] = useState(false); + const intervalRef = useRef | null>(null); + + useEffect(() => { + if (!paused) { + intervalRef.current = setInterval(() => { + setActiveIndex((i) => (i + 1) % TESTIMONIALS.length); + }, 5000); + } + + // Cleanup — prevents memory leak on re-render + return () => { + if (intervalRef.current) clearInterval(intervalRef.current); + }; + }, [paused]); + + function prev() { + setActiveIndex( + (i) => (i - 1 + TESTIMONIALS.length) % TESTIMONIALS.length + ); + } + + function next() { + setActiveIndex((i) => (i + 1) % TESTIMONIALS.length); + } + + const current = TESTIMONIALS[activeIndex]; + + return ( +
setPaused(true)} + onMouseLeave={() => setPaused(false)} + > + {/* Decorative gold quote mark */} + + +
+

{current.quote}

+
+ — {current.name} +
+
+ + {/* Arrow controls */} +
+ + +
+ + {/* Dot indicators */} +
+ {TESTIMONIALS.map((_, i) => ( +
+ + +
+ ); +}