Testimonial Generator

.testimonial {
  width: 400px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 32px;
  position: relative;
  text-align: center;
  
  transition: all 0.3s ease;
  overflow: hidden;
}

.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: large;
}



.testimonial-quote-icon {
  margin: 0 auto 16px;
  opacity: 0.5;
}

.testimonial-rating {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 16px;
}

.testimonial-star {
  width: 20px;
  height: 20px;
}

.testimonial-star--filled {
  fill: #fbbf24;
}

.testimonial-star--empty {
  fill: #e5e7eb;
}

.testimonial-quote {
  font-size: 18px;
  line-height: 1.6;
  color: #374151;
  margin: 0 0 24px 0;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}

.testimonial-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #3b82f6;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 26px;
  flex-shrink: 0;
  overflow: hidden;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-info {
  
}

.testimonial-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.testimonial-title {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

<div class="testimonial">
  <div class="testimonial-quote-icon">
    <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
      <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
    </svg>
  </div>
  <div class="testimonial-rating">
    <svg class="testimonial-star testimonial-star--filled" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
    <svg class="testimonial-star testimonial-star--filled" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
    <svg class="testimonial-star testimonial-star--filled" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
    <svg class="testimonial-star testimonial-star--filled" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
    <svg class="testimonial-star testimonial-star--filled" viewBox="0 0 24 24">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
  </div>
  <p class="testimonial-quote">"This product has completely transformed how we work. The results have been incredible and our team productivity has doubled."</p>
  <div class="testimonial-author">
    <div class="testimonial-avatar">
      SJ
    </div>
    <div class="testimonial-info">
      <p class="testimonial-name">Sarah Johnson</p>
      <p class="testimonial-title">CEO at TechCorp</p>
    </div>
  </div>
</div>

import React from 'react';
import './Testimonial.css';
import ToolHeader from '../components/ToolHeader'
import ToolFooter from '../components/ToolFooter'

const Testimonial = ({
  quote = "This product has completely transformed how we work. The results have been incredible and our team productivity has doubled.",
  authorName = "Sarah Johnson",
  authorTitle = "CEO at TechCorp",
  avatarUrl = "",
  avatarInitials = "SJ",
  rating = 5
}) => {
  const renderStars = () => {
    return Array.from({ length: 5 }, (_, i) => (
      <svg
        key={i}
        className={`testimonial-star testimonial-star--${i < rating ? 'filled' : 'empty'}`}
        viewBox="0 0 24 24"
      >
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>
    ));
  };

  return (
    <div className="testimonial">
      <div className="testimonial-quote-icon">
        <svg width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
          <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
        </svg>
      </div>
      <div className="testimonial-rating">
        {renderStars()}
      </div>
      <p className="testimonial-quote">"{quote}"</p>
      <div className="testimonial-author">
        <div className="testimonial-avatar">
          {avatarUrl ? (
            <img src={avatarUrl} alt={authorName} />
          ) : (
            avatarInitials
          )}
        </div>
        <div className="testimonial-info">
          <p className="testimonial-name">{authorName}</p>
          <p className="testimonial-title">{authorTitle}</p>
        </div>
      </div>

      <ToolFooter />
    </div>
  );
};

export default Testimonial;