"use client"; import React from "react"; import { motion, Variants } from "framer-motion"; import { Quote, Star, CheckCircle2 } from "lucide-react"; // --- TYPES & INTERFACES --- export interface ClassicTestimonialCardProps { quote: string; authorName: string; authorRole: string; authorAvatar: string; rating?: number; isVerified?: boolean; themeColor?: "indigo" | "amber" | "rose" | "emerald"; className?: string; } /** * Classic Testimonial Card (v1.0 Anzuelo/Free) * Una tarjeta de testimonios de alta fidelidad. * Utiliza jerarquía tipográfica Pro, elementos suspendidos y bimodalidad nativa. */ export const ClassicTestimonialCard = ({ quote, authorName, authorRole, authorAvatar, rating = 5, isVerified = true, themeColor = "indigo", className, }: ClassicTestimonialCardProps) => { // --- THEME ENGINE --- const themes = { indigo: "text-indigo-500 bg-indigo-500/10", amber: "text-amber-500 bg-amber-500/10", rose: "text-rose-500 bg-rose-500/10", emerald: "text-emerald-500 bg-emerald-500/10", }; const currentTheme = themes[themeColor]; // --- ANIMATIONS --- const cardVariants: Variants = { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1, transition: { type: "spring", stiffness: 300, damping: 25 } }, hover: { y: -8, transition: { type: "spring", stiffness: 400, damping: 20 } } }; const quoteVariants: Variants = { initial: { opacity: 0, rotate: -15, scale: 0.5 }, hover: { opacity: 0.15, rotate: 0, scale: 1.2, transition: { duration: 0.4 } } }; return ( {/* 1. SUSPENDED QUOTE ICON */} {/* 2. RATING & VERIFIED BADGE */}

{[...Array(5)].map((_, i) => ( ))}

{isVerified && (

Verified Buyer

)}

{/* 3. TESTIMONIAL CONTENT */}

"{quote}"

{/* 4. AUTHOR INFO */}

{authorName} {authorRole}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function ClassicTestimonialCardDemo() { return (

); }