"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { Star, Quote } from "lucide-react"; const REVIEWS = [ { id: 1, content: "The level of engineering behind these components is extraordinary. It completely eliminates the friction between design handoffs and frontend execution. We shipped our MVP three weeks ahead of schedule because we didn't have to fight with complex CSS or broken state logic.", author: "Jonathan Hayes", role: "CTO @ Vertex", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=150&h=150", rating: 5, span: "col-span-1 @4xl:col-span-7", }, { id: 2, content: "A masterclass in modern UI development. The attention to accessibility while maintaining top-tier aesthetics is exactly what our enterprise clients demand.", author: "Clara Oswald", role: "Lead UI Architect", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=150&h=150", rating: 5, span: "col-span-1 @4xl:col-span-5", }, { id: 3, content: "I was skeptical about dropping another library into our stack, but this feels native. The container queries make responsive design effortless. Worth every penny.", author: "David Lin", role: "Frontend Engineer", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=150&h=150", rating: 5, span: "col-span-1 @4xl:col-span-5", }, { id: 4, content: "We transitioned our entire SaaS interface to use these primitives. The hover states, the shadow depths, and the typographic rhythm are mathematically perfect. It instantly elevated our brand perception.", author: "Maya Patel", role: "Founder @ Synth", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150&h=150", rating: 5, span: "col-span-1 @4xl:col-span-7", }, ]; export default function ElevatedFocusTestimonials() { const [isMounted, setIsMounted] = useState(false); const [hoveredId, setHoveredId] = useState(null); useEffect(() => { setIsMounted(true); }, []); if (!isMounted) { return (

); } return (

{/* Header */}

Engineered for perfection.
Validated by experts.

See how top-tier teams are transforming their interfaces with our architecture.

{/* Asymmetrical Bento Grid with Focus Logic */}

setHoveredId(null)} > {REVIEWS.map((review) => { const isHovered = hoveredId === review.id; const isDimmed = hoveredId !== null && hoveredId !== review.id; return ( setHoveredId(review.id)} animate={{ scale: isHovered ? 1.03 : isDimmed ? 0.98 : 1, opacity: isDimmed ? 0.4 : 1, y: isHovered ? -8 : 0, }} transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1], // Custom smooth easing }} className={`${review.span} relative group flex flex-col p-8 sm:p-10 rounded-[2rem] bg-white dark:bg-zinc-900/40 border border-zinc-200/80 dark:border-zinc-800/80 cursor-default transition-shadow duration-500 ${ isHovered ? 'shadow-[0_40px_80px_-20px_rgba(0,0,0,0.15)] dark:shadow-[0_40px_80px_-20px_rgba(0,0,0,0.7)] z-10' : 'shadow-sm z-0' }`} > {/* Decorative Quote Mark */}

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

"{review.content}"

{review.author} {review.role}

); })}

); }

Engineered for perfection. Validated by experts.

Engineered for perfection.
Validated by experts.