"use client"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"; import { Star, Quote, Fingerprint } from "lucide-react"; // --- MOCK DATA --- const TESTIMONIALS = [ { id: 1, name: "Alexia Vance", role: "Lead UI Engineer", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=150&h=150", rating: 5, text: "The glassmorphism implementation here is flawless. The way it diffuses the background light while maintaining crisp typography is a testament to the build quality. Truly a next-gen library.", }, { id: 2, name: "Julian Brooks", role: "Creative Director", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=150&h=150", rating: 5, text: "Visually stunning. The depth created by the multi-layered blurs and interactive backlights gives our platform an incredibly premium, tangible feel that our users love.", }, { id: 3, name: "Sophia Martinez", role: "Frontend Architect", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150&h=150", rating: 5, text: "I'm blown away by the performance. Achieving this level of visual fidelity with complex filters usually tanks the framerate, but these components are buttery smooth.", }, ]; // --- SUB-COMPONENT: Individual Glass Card with 3D Tilt --- function GlassCard({ review }: { review: typeof TESTIMONIALS[0] }) { const cardRef = useRef(null); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const smoothX = useSpring(mouseX, { stiffness: 100, damping: 20 }); const smoothY = useSpring(mouseY, { stiffness: 100, damping: 20 }); const rotateX = useTransform(smoothY, [-0.5, 0.5], ["10deg", "-10deg"]); const rotateY = useTransform(smoothX, [-0.5, 0.5], ["-10deg", "10deg"]); function handleMouseMove(e: React.MouseEvent) { if (!cardRef.current) return; const rect = cardRef.current.getBoundingClientRect(); const xPct = (e.clientX - rect.left) / rect.width - 0.5; const yPct = (e.clientY - rect.top) / rect.height - 0.5; mouseX.set(xPct); mouseY.set(yPct); } function handleMouseLeave() { mouseX.set(0); mouseY.set(0); } return (

{/* Physical Glass Noise Texture */}

{/* Diagonal Shine */}

{Array.from({ length: 5 }).map((_, i) => ( ))}

"{review.text}"

{review.name} {review.role}

); } // --- MAIN COMPONENT: Interactive Chroma Glass Container --- export default function ChromaGlassReviews() { const [isMounted, setIsMounted] = useState(false); const containerRef = useRef(null); // Orb tracking const orbX = useMotionValue(0); const orbY = useMotionValue(0); const smoothOrbX = useSpring(orbX, { stiffness: 40, damping: 20 }); const smoothOrbY = useSpring(orbY, { stiffness: 40, damping: 20 }); // Orb Opacity on hover const [isHovered, setIsHovered] = useState(false); useEffect(() => { setIsMounted(true); }, []); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); // Center the orb on the cursor (assuming 400px width/height for orb) orbX.set(e.clientX - rect.left - 200); orbY.set(e.clientY - rect.top - 200); }; if (!isMounted) { return (

); } return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} className="@container relative w-full min-h-[800px] flex flex-col items-center justify-center bg-zinc-950 dark:bg-[#030303] py-24 px-4 sm:px-8 font-sans isolate overflow-hidden" > {/* STATIC BACKGROUND BLOBS (Baseline ambient light) */}

{/* DYNAMIC INTERACTIVE ORB (Moves behind the glass) */}

{/* Header Section */}

Verified Feedback

Reflecting Excellence.

Hover over the grid to reveal the dynamic chroma spotlight. The physical properties of our glassmorphism filter light precisely as expected.

{/* 3D Glass Grid */}

{TESTIMONIALS.map((review) => ( ))}

); }