Testimonial 04

1"use client";
2 
3import { useState } from "react";
4import { ArrowRight } from "lucide-react";
5import { cn } from "@/lib/utils";
6import { Card } from "@/components/ui/card";
7 
8interface Testimonial04Card {
9  image?: string;
10  brand: string;
11  title?: string;
12  url?: string;
13}
14 
15interface Testimonial04Props {
16  title?: string;
17  description?: string;
18  readMore?: { text: string; url?: string };
19  cards?: Testimonial04Card[];
20  className?: string;
21}
22 
23const defaultCards: Testimonial04Card[] = [
24  {
25    image:
26      "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
27    brand: "shadcnship",
28    title: "How teams ship landing pages faster with reusable components",
29    url: "#",
30  },
31  {
32    image:
33      "https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp",
34    brand: "Acme Corp",
35    title: "How Acme scaled their design system with copy & paste blocks",
36    url: "#",
37  },
38  {
39    image:
40      "https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp",
41    brand: "Globex",
42    title: "How Globex rebuilt their marketing site in a week",
43    url: "#",
44  },
45  {
46    image:
47      "https://www.shadcnship.com/images/placeholders/hero-architecture-8.webp",
48    brand: "Initech",
49    title: "How Initech kept brand consistency across every launch",
50    url: "#",
51  },
52];
53 
54const Testimonial04 = ({
55  title = "Loved by Developers",
56  description = "See what developers are saying about building faster with our components",
57  readMore = { text: "Read more", url: "#" },
58  cards = defaultCards,
59  className,
60}: Testimonial04Props) => {
61  const [active, setActive] = useState(0);
62 
63  return (
64    <section className={cn("container mx-auto px-8 py-12 md:py-24", className)}>
65      {/* Header */}
66      <div className="mb-12 flex flex-col items-center gap-4 text-center">
67        <h2 className="max-w-2xl text-4xl leading-tight font-medium tracking-tight md:text-5xl">
68          {title}
69        </h2>
70        <p className="max-w-xl text-muted-foreground md:text-lg">
71          {description}
72        </p>
73      </div>
74 
75      {/* Cards row — the hovered card expands, the others shrink.
76          The last hovered card keeps the expanded width. */}
77      <div className="mx-auto flex max-w-5xl flex-col gap-4 md:h-80 md:flex-row">
78        {cards.map((card, index) => {
79          const isActive = index === active;
80 
81          return (
82            <Card
83              key={index}
84              onMouseEnter={() => setActive(index)}
85// … truncated