"use client"; import React, { useState, useEffect, useCallback, useMemo } from "react"; import { ArrowLeft, ArrowRight } from "lucide-react"; import { motion, AnimatePresence } from "motion/react"; import Image from "next/image"; import { cn } from "@/lib/utils"; const NvidiaLogo = ({ className }: { className?: string }) => ( ); const ColumnLogo = ({ className }: { className?: string }) => ( ); const GithubLogo = ({ className }: { className?: string }) => ( ); const NikeLogo = ({ className }: { className?: string }) => ( ); const LemonSquezyLogo = ({ className }: { className?: string }) => ( ); const testimonials = [ { id: "1", name: "Sarah Chen", role: "Enineer Coulmn", image: "https://res.cloudinary.com/harshitproject/image/upload/v1746774430/member-five.png", quote: "Perfect balance between flexibility and structure. Our design system went from scattered mess to cohesive asset. ROI was evident in Q1.", logo: ( ), }, { id: "2", name: "Olivia Koe", role: "CTO Github", image: "https://res.cloudinary.com/harshitproject/image/upload/v1774017708/member-six.png", // Using similar image/name for demo as per reference or variance quote: "SolaceUI transformed our design workflow. What used to take weeks now takes days, and our product consistency has never been better.", logo: ( ), }, { id: "3", name: "Amara Okonkwo", role: "CTO LemonSquezy", image: "https://res.cloudinary.com/harshitproject/image/upload/v1746774430/member-three.png", quote: "We migrated our entire product in under three months. The performance improvements alone justified the switch. Highly recommend.", logo: ( ), }, { id: "4", name: "David Kim", role: "Founder Nike", image: "https://res.cloudinary.com/harshitproject/image/upload/v1746774430/member-two.png", quote: "Our development velocity has doubled since adopting SolaceUI.", logo: ( ), }, { id: "5", name: "James Mitchell", role: "Design, Nvidia", image: "https://res.cloudinary.com/harshitproject/image/upload/v1746774430/member-four.png", quote: "Accessibility and performance out of the box. Truly impressive work.", logo: ( ), }, ]; export default function Testimonial4() { const [currentIndex, setCurrentIndex] = useState(1); const handleNext = useCallback(() => { setCurrentIndex((prev) => (prev + 1) % testimonials.length); }, []); const handlePrev = useCallback(() => { setCurrentIndex( (prev) => (prev - 1 + testimonials.length) % testimonials.length, ); }, []); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowLeft") handlePrev(); if (e.key === "ArrowRight") handleNext(); }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [handleNext, handlePrev]); const visibleItems = useMemo(() => { const total = testimonials.length; const leftIndex = (currentIndex - 1 + total) % total; const centerIndex = currentIndex; const rightIndex = (currentIndex + 1) % total; return [ { item: testimonials[leftIndex], position: "left" }, { item: testimonials[centerIndex], position: "center" }, { item: testimonials[rightIndex], position: "right" }, ]; }, [currentIndex]); return (

{/* Header & Actions */}

Trusted By The
Best People

{/* Main Carousel Area */}

{/* Navigation Buttons (Desktop) */}

{/* Shaded Strip Background */}

{/* Pattern */}

{/* Fades */}

{/* Cards Container */}

{visibleItems.map(({ item, position }) => { const isCenter = position === "center"; return ( {/* Image Region (Top Half) */}

{/* Content Region (Bottom Half) */}

{item.quote}

{item.name}, {item.role}

{item.logo}

); })}

{/* Mobile Navigation (Visible only on mobile) */}

); }

Trusted By The Best People

Trusted By The
Best People

Testimonial Section