Testimonial Card

"use client";
 
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Star } from "lucide-react";
 
export interface TestimonialCardProps {
  name: string;
  role: string;
  company?: string;
  testimonial: string;
  rating?: number;
  image?: string;
  className?: string;
}
 
export const TestimonialCard = ({
  name,
  role,
  company,
  testimonial,
  rating = 5,
  image = "",
  className = "",
}: TestimonialCardProps) => {
  return (
    <div
      className={`relative overflow-hidden rounded-2xl border border-primary/10 bg-background p-6 transition-all hover:shadow-lg dark:hover:shadow-primary/5 md:p-8 ${className}`}
    >
      {/* Quote Icon */}
      <div className="absolute right-6 top-6 text-6xl font-serif text-muted-foreground/20">
        "
      </div>
 
      {/* Content Container */}
      <div className="flex flex-col gap-4 justify-between h-full">
        {/* Rating Stars */}
        {rating > 0 && (
          <div className="flex gap-1">
            {Array.from({ length: 5 }).map((_, index) => (
              <Star
                key={index}
                size={16}
                className={`${
                  index < rating
                    ? "fill-yellow-400 text-yellow-400"
                    : "fill-muted text-muted"
                }`}
              />
            ))}
          </div>
        )}
 
        {/* Testimonial Text */}
        <p className="text-pretty text-base text-muted-foreground">
          {testimonial}
        </p>
 
        <div className="flex items-center gap-4 justify-start">
          {/* Author Info */}
          <div className="flex items-center gap-4 ">
            {image && (
              <div className="relative h-12 w-12 overflow-hidden rounded-full flex items-center justify-center">
                <Avatar>
                  <AvatarImage
                    src={image}
                    alt={`${name}`}
                    height={48}
                    width={48}
                  />
                  <AvatarFallback>{name[0]}</AvatarFallback>
                </Avatar>
              </div>
            )}
 
            <div className="flex flex-col">
              <h3 className="font-semibold text-foreground">{name}</h3>
              <p className="text-sm text-muted-foreground">
                {role}
                {company && `@ ${company}`}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

import { TestimonialCard } from "@/components/library/marketing/TestimonialCard";
 
<div className="grid gap-4 grid-cols-1 md:grid-cols-2">
  <TestimonialCard
    name="Sarah Johnson"
    role="Product Manager"
    company="Amazun"
    rating={5}
    image="https://placehold.co/48?text=S"
    testimonial="This library has completely transformed how we build our UI components. The attention to detail and smooth animations make our application stand out. Highly recommended!"
  />
  <TestimonialCard
    name="John Doe"
    role="Software Engineer"
    company="Goggle"
    rating={4}
    image="https://placehold.co/48?text=J"
    testimonial="The components are well documented and easy to customize. The code quality is top-notch and the support is excellent. I'm very happy with my purchase."
  />
</div>;