TestimonialCard

testimonialcard-1779354147396.tsx

'use client';

import React from 'react';

interface Testimonial {
  avatar: string;
  quote: string;
  rating: number;
  name: string;
  role: string;
}

const testimonials: Testimonial[] = [
  {
    avatar: 'https://via.placeholder.com/50',
    quote: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    rating: 5,
    name: 'John Doe',
    role: 'CEO',
  },
];

const TestimonialCard = () => {
  return (
    <div
      className="bg-zinc-950 bg-opacity-50 backdrop-blur-md rounded-2xl p-6 flex flex-col items-center justify-center w-80 h-96 border border-zinc-800/50 transition duration-300 hover:scale-105"
    >
      <img
        src={testimonials[0].avatar}
        alt="Avatar"
        className="w-20 h-20 rounded-full object-cover mb-4 border-2 border-zinc-800"
      />
      <p className="text-lg text-zinc-200 mb-4">{testimonials[0].quote}</p>
      <div className="flex mb-4">
        {[1, 2, 3, 4, 5].map((rating, index) => (
          <span
            key={index}
            className={`text-lg mr-1 ${
              rating <= testimonials[0].rating ? 'text-C9A84C' : 'text-zinc-600'
            }`}
          >
            &#9733;
          </span>
        ))}
      </div>
      <h5 className="text-lg text-zinc-200 mb-1">{testimonials[0].name}</h5>
      <p className="text-zinc-500">{testimonials[0].role}</p>
    </div>
  );
};

export default TestimonialCard;

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Customer testimonial card with avatar and star rating

More from Cards

'use client';

import React from 'react';

interface Feature {
  name: string;
}

interface PricingCardProps {
  title: string;
  price: string;
  features: Feature[];
  featured?: boolean;
}

const PricingCard: React.FC<PricingCardProps> = ({ title,

PricingCard

Cards

'use client';

import React from 'react';

interface SocialLink {
  icon: string;
  url: string;
}

interface Profile {
  avatar: string;
  name: string;
  bio: string;
  socialLinks: SocialLink[];
}

const demoProfile: Profile = {
  avatar: 'https:/

ProfileCard

Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards