Testimonial Exemple 1

1"use client";
2 
3import { motion, Variants } from "framer-motion";
4import Image from "next/image";
5 
6/* ─── Types ─── */
7interface Testimonial {
8    id: number;
9    quote: string;
10    author: string;
11    location: string;
12    avatar: string;
13    variant: "white" | "muted" | "dark";
14}
15 
16/* ─── Data ─── */
17const testimonials: Testimonial[] = [
18    {
19        id: 1,
20        quote:
21            '"The process of buying our home was as stress-free as we could have imagined."',
22        author: "Janie Stewart",
23        location: "Idaho, USA.",
24        avatar: "https://i.pravatar.cc/80?img=47",
25        variant: "white",
26    },
27    {
28        id: 2,
29        quote:
30            '"We have had two great experiences working with Realty Group, as they sold two of our homes. They were professional, attentive, and patient."',
31        author: "Madison Wilson",
32        location: "Idaho, USA.",
33        avatar: "https://i.pravatar.cc/80?img=32",
34        variant: "muted",
35    },
36    {
37        id: 3,
38        quote:
39            "Great experience working with Realty Group, especially as a first time buyer!",
40        author: "Rosa Smith",
41        location: "Idaho, USA.",
42        avatar: "https://i.pravatar.cc/80?img=25",
43        variant: "dark",
44    },
45];
46 
47/* ─── Variants map ─── */
48const variantStyles = {
49    white: {
50        card: "bg-white border border-[#e2e8f0]",
51        quote: "text-[#1e293b]",
52        author: "text-[#0f172a]",
53        location: "text-[#94a3b8]",
54        ring: "ring-[#e2e8f0]",
55    },
56    muted: {
57        card: "bg-[#f1f5f9] border border-[#e2e8f0]",
58        quote: "text-[#1e293b]",
59        author: "text-[#0f172a]",
60        location: "text-[#94a3b8]",
61        ring: "ring-[#e2e8f0]",
62    },
63    dark: {
64        card: "bg-black border border-[#1e293b]",
65        quote: "text-[#f1f5f9]",
66        author: "text-white",
67        location: "text-[#64748b]",
68        ring: "ring-[#334155]",
69    },
70};
71 
72/* ─── Animation ─── */
73const containerVariants: Variants = {
74    hidden: {},
75    visible: { transition: { staggerChildren: 0.14 } },
76};
77 
78const cardVariants: Variants = {
79    hidden: { opacity: 0, y: 32 },
80    visible: {
81        opacity: 1,
82        y: 0,
83        transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] },
84    },
85};
86 
87const headerVariants: Variants = {
88    hidden: { opacity: 0, y: 18 },
89    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
90};
91 
92/* ─── Card ─── */
93// … truncated