Testimonial

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function Testimonial01() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-3xl px-6 text-center">
        <blockquote>
          <p className="text-2xl font-medium leading-relaxed text-foreground md:text-3xl">
            &ldquo;Switching to this platform was the best decision we made all
            year. Our team productivity increased by 40% in the first month
            alone. The intuitive interface and powerful automation tools have
            completely transformed how we work.&rdquo;
          </p>
        </blockquote>
        <div className="mt-10 flex flex-col items-center gap-3">
          <Avatar size="lg">
            <AvatarImage src="" alt="Sarah Chen" />
            <AvatarFallback>SC</AvatarFallback>
          </Avatar>
          <div>
            <div className="font-medium text-foreground">Sarah Chen</div>
            <div className="text-sm text-muted-foreground">
              VP of Engineering, Meridian Labs
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

import { StarIcon } from "lucide-react"
import {
  Card,
  CardContent,
  CardHeader,
} from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

const testimonials = [
  {
    quote:
      "The developer experience is unmatched. We migrated our entire design system in under a week and haven't looked back since.",
    name: "Alex Rivera",
    role: "Lead Developer, Nomad",
    initials: "AR",
    rating: 5,
  },
  {
    quote:
      "Finally, a component library that actually works out of the box. The accessibility defaults saved us hundreds of hours of testing.",
    name: "Priya Sharma",
    role: "Product Manager, Skyline",
    initials: "PS",
    rating: 5,
  },
  {
    quote:
      "Our design and engineering teams are finally on the same page. The documentation is clear, the API is intuitive, and the community is fantastic.",
    name: "Marcus Johnson",
    role: "CTO, Helix Ventures",
    initials: "MJ",
    rating: 5,
  },
]

function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex gap-0.5">
      {Array.from({ length: rating }).map((_, i) => (
        <StarIcon
          key={i}
          className="size-4 fill-amber-400 text-amber-400"
        />
      ))}
    </div>
  )
}

export default function Testimonial02() {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-6xl px-6">
        <div className="mb-12 text-center">
          <h2 className="text-3xl font-bold tracking-tight text-foreground">
            Loved by teams everywhere
          </h2>
          <p className="mt-3 text-muted-foreground">
            See what our customers have to say about their experience.
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-3">
          {testimonials.map((t) => (
            <Card key={t.name}>
              <CardHeader>
                <StarRating rating={t.rating} />
              </CardHeader>
              <CardContent className="flex flex-1 flex-col justify-between gap-6">
                <p className="text-sm leading-relaxed text-muted-foreground">
                  &ldquo;{t.quote}&rdquo;
                </p>
                <div className="flex items-center gap-3">
                  <Avatar>
                    <AvatarImage src="" alt={t.name} />
                    <AvatarFallback>{t.initials}</AvatarFallback>
                  </Avatar>
                  <div>
                    <div className="text-sm font-medium text-foreground">
                      {t.name}
                    </div>
                    <div className="text-xs text-muted-foreground">
                      {t.role}
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}