"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { Play, Verified, ArrowRight } from "lucide-react"; // --- MOCK DATA --- const VIDEO_REVIEWS = [ { id: 1, author: "Elena Rostova", role: "Founder @ Lumina", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=150&h=150", thumbnail: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80&w=800&h=500", quote: "Integrating these components cut our frontend development time in half. The visual consistency is remarkable.", duration: "1:42", }, { id: 2, author: "Michael Chen", role: "VP of Engineering", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=150&h=150", thumbnail: "https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=800&h=500", quote: "The accessibility standards and clean code structure make this the best UI investment our team has ever made.", duration: "2:15", }, { id: 3, author: "Sarah Jenkins", role: "Lead Designer", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150&h=150", thumbnail: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=800&h=500", quote: "It bridges the gap between design and development perfectly. Everything looks exactly as it did in Figma.", duration: "0:58", }, ]; export default function VideoThumbnailTestimonials() { const [isMounted, setIsMounted] = useState(false); useEffect(() => { setIsMounted(true); }, []); if (!isMounted) { return (

{[1, 2, 3].map((i) => (

))}

); } return (

{/* Header Area */}

Customer Stories

Don't just take our word for it.
Hear from our users.

{/* Video Cards Grid */}

{VIDEO_REVIEWS.map((review, idx) => ( {/* Video Thumbnail Section */}

{/* Background Image with Scale Effect */}

{/* Overlays */}

{/* Duration Badge */}

{review.duration}

{/* Centered Glassmorphism Play Button */}

{/* Ripple/Glow effect on hover */}

{/* Glass Button Base */}

{/* Play Icon */}

{/* Text Content Section */}

"{review.quote}"

{review.author}

{review.role}

{/* Subtle Bottom Accent Line */}

))}

); }

Don't just take our word for it. Hear from our users.

Don't just take our word for it.
Hear from our users.