"use client"; import React, { useState, useRef } from "react"; import { motion, AnimatePresence, useInView } from "framer-motion"; import type { Variants } from "framer-motion"; interface Testimonial { id: number; name: string; title: string; avatar: string; bgImage: string; quote: string; rotation: string; } const testimonialsData: Testimonial[] = [ { id: 1, name: "Md Jahid Hasan", title: "CEO at Nexora Solutions", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&h=150&q=80", bgImage: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/testimonials%20img%201.png", quote: '"Glimpse has completely changed how I work. I can access directions, reminders, and AI assistance without breaking my creative flow."', rotation: "-12deg", }, { id: 2, name: "Sophia Chen", title: "Photographer", avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=150&h=150&q=80", bgImage: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/testimonials%20img%202.png", quote: '"The navigation is incredibly seamless, allowing me to focus completely on capturing the perfect shot while walking through busy city streets."', rotation: "8deg", }, { id: 3, name: "Marcus Brody", title: "Senior Software Engineer", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&h=150&q=80", bgImage: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/testimonials%20img%203.png", quote: '"A remarkable breakthrough in heads-up displays. Integrating notifications with contextual visual awareness makes my daily commute feel like science fiction."', rotation: "-6deg", }, { id: 4, name: "Elena Rostova", title: "Creative Director", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=150&h=150&q=80", bgImage: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/testimonials%20img%204.png", quote: '"Minimalist, sleek, and comfortable. Finally, a wearable that complements my style without compromising on high-performance AI capabilities."', rotation: "14deg", }, { id: 5, name: "David Kim", title: "Product Lead", avatar: "https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?auto=format&fit=crop&w=150&h=150&q=80", bgImage: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/testimonials%20img%205.png", quote: '"The hands-free real-time translation is a game-changer during international travel. I can read road signs and converse naturally with ease."', rotation: "-15deg", }, { id: 6, name: "Aisha Rahman", title: "UI/UX Architect", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&h=150&q=80", bgImage: "https://cdn.jiro.build/Flora/Glimpse/All%20Images/testimonials%20img%202.png", quote: '"I am amazed by the visual precision and typography of the interface. It integrates seamlessly with the user natural field of view."', rotation: "5deg", }, ]; export default function Testimonial({ className }: { className?: string }) { const [currentPage, setCurrentPage] = useState(0); const [activeCardId, setActiveCardId] = useState(1); const containerRef = useRef(null); const isSectionInView = useInView(containerRef, { once: true, amount: 0.1 }); const cardsPerPage = 3; const totalPages = Math.ceil(testimonialsData.length / cardsPerPage); const displayedTestimonials = testimonialsData.slice( currentPage * cardsPerPage, (currentPage + 1) * cardsPerPage ); const handlePageChange = (index: number) => { setCurrentPage(index); const firstCardOnPage = testimonialsData[index * cardsPerPage]; if (firstCardOnPage) { setActiveCardId(firstCardOnPage.id); } }; const headerVariants: Variants = { hidden: { opacity: 0, y: 30, filter: "blur(4px)" }, visible: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const }, }, }; const nameTitleVariants: Variants = { hidden: { opacity: 0, y: 15 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" as const, delay: 0.3 }, }, }; return ( <>

What people say about GLAIR

Experience intelligent eyewear that combines immersive visuals, seamless connectivity, and all-day comfort to help you stay informed

{displayedTestimonials.map((testimonial: Testimonial) => { const isActive = activeCardId === testimonial.id; return (

setActiveCardId(testimonial.id)} > {isActive ? (

{testimonial.name}

{testimonial.title}

{testimonial.quote}

) : (

{testimonial.name}

{testimonial.title}

)}

); })}

{Array.from({ length: totalPages }).map((_, idx: number) => (

); }