Update src/components/sections/testimonial/TestimonialCardSix.tsx

src/components/sections/testimonial/TestimonialCardSix.tsx

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 
 interface Testimonial {
   id: number;
@@ -10,156 +10,152 @@ interface Testimonial {
   shortText: string;
   fullText: string;
   avatar?: string;
+  rating?: number;
 }
 
-interface TestimonialCardSixProps {
-  testimonials?: Testimonial[];
-}
-
-const defaultTestimonials: Testimonial[] = [
+const testimonials: Testimonial[] = [
   {
     id: 1,
-    author: "Sarah Johnson",
-    role: "Product Manager",
-    company: "TechCorp",
-    shortText: "Amazing service!",
-    fullText:
-      "This service has completely transformed how we manage our projects. The intuitive interface and powerful features have saved us countless hours. The support team is incredibly responsive and helpful. I would highly recommend this to any team looking to improve their workflow.",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah",
+    author: 'Sarah Johnson',
+    role: 'Product Manager',
+    company: 'Tech Innovations Inc',
+    shortText: 'Exceptional service and support.',
+    fullText: 'This product has completely transformed how our team works. The exceptional service and support from the team made the transition seamless. We saw a 40% improvement in productivity within the first month.',
+    avatar: '👩‍💼',
+    rating: 5,
   },
   {
     id: 2,
-    author: "Michael Chen",
-    role: "CEO",
-    company: "StartupXYZ",
-    shortText: "Game changer!",
-    fullText:
-      "We've been using this platform for 6 months now and the results speak for themselves. Our team productivity has increased by 40%, and the ROI has been exceptional. The platform scales beautifully with our growing needs. Couldn't ask for a better solution.",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Michael",
+    author: 'Michael Chen',
+    role: 'CEO',
+    company: 'Digital Solutions Ltd',
+    shortText: 'Best investment we made this year.',
+    fullText: 'Best investment we made this year. The platform is intuitive, powerful, and the ROI has exceeded our expectations. The team is responsive and genuinely cares about customer success. Highly recommended for any growing business.',
+    avatar: '👨‍💼',
+    rating: 5,
   },
   {
     id: 3,
-    author: "Emily Rodriguez",
-    role: "Design Lead",
-    company: "Creative Studios",
-    shortText: "Exceeded expectations!",
-    fullText:
-      "The design and user experience are top-notch. Every detail has been thoughtfully considered. The collaboration features make it easy for our distributed team to work together seamlessly. This is the kind of tool that makes you wonder how you ever worked without it.",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Emily",
+    author: 'Emily Rodriguez',
+    role: 'Operations Director',
+    company: 'Global Enterprises',
+    shortText: 'Streamlined our entire workflow.',
+    fullText: 'Streamlined our entire workflow and reduced operational costs significantly. The implementation was smooth, and the training provided was comprehensive. Our team is now more efficient than ever before.',
+    avatar: '👩‍💻',
+    rating: 5,
   },
   {
     id: 4,
-    author: "David Park",
-    role: "Operations Director",
-    company: "Global Solutions",
-    shortText: "Best investment ever!",
-    fullText:
-      "We've tried many solutions before, but this one stands out. The implementation was smooth, the training was comprehensive, and the ongoing support is exceptional. Our team adopted it immediately and we're seeing measurable improvements in efficiency and accuracy.",
-    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=David",
+    author: 'David Thompson',
+    role: 'Founder',
+    company: 'StartUp Ventures',
+    shortText: 'Game-changer for our startup.',
+    fullText: 'A true game-changer for our startup. The scalability and flexibility of the solution allowed us to grow without limitations. Customer support is outstanding and always available when we need them.',
+    avatar: '👨‍🚀',
+    rating: 5,
+  },
+  {
+    id: 5,
+    author: 'Jessica Lee',
+    role: 'Marketing Lead',
+    company: 'Creative Agency Pro',
+    shortText: 'Transformed our client deliverables.',
+    fullText: 'Transformed our client deliverables and improved our team collaboration. The analytics and reporting features are incredibly detailed and actionable. We\'ve already recommended it to several clients.',
+    avatar: '👩‍🎨',
+    rating: 5,
+  },
+  {
+    id: 6,
+    author: 'Robert Martinez',
+    role: 'Technical Director',
+    company: 'Enterprise Solutions',
+    shortText: 'Robust, reliable, and secure.',
+    fullText: 'Robust, reliable, and secure platform that meets all our enterprise requirements. The API documentation is excellent, and integration with our existing systems was straightforward. Outstanding technical support team.',
+    avatar: '👨‍💻',
+    rating: 5,
   },
 ];
 
-export default function TestimonialCardSix({
-  testimonials = defaultTestimonials,
-}: TestimonialCardSixProps) {
-  const [flipped, setFlipped] = useState<{ [key: number]: boolean }>({});
+interface CardProps {
+  testimonial: Testimonial;
+}
 
-  const toggleFlip = (id: number) => {
-    setFlipped((prev) => ({
-      ...prev,
-      [id]: !prev[id],
-    }));
-  };
+function TestimonialCard({ testimonial }: CardProps) {
+  const [isFlipped, setIsFlipped] = useState(false);
 
   return (
-    <section className="py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-slate-50 to-slate-100">
-      <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
-            What Our Clients Say
-          </h2>
-          <p className="text-lg text-gray-600">
-            Hover over cards to see full testimonials
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {testimonials.map((testimonial) => (
     <div
-              key={testimonial.id}
       className="h-80 cursor-pointer perspective"
-              onClick={() => toggleFlip(testimonial.id)}
+      onMouseEnter={() => setIsFlipped(true)}
+      onMouseLeave={() => setIsFlipped(false)}
     >
       <div
         className="relative w-full h-full transition-transform duration-500 transform-gpu"
         style={{
-                  transformStyle: "preserve-3d",
-                  transform: flipped[testimonial.id]
-                    ? "rotateY(180deg)"
-                    : "rotateY(0deg)",
+          transformStyle: 'preserve-3d',
+          transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
         }}
       >
-                {/* Front of card */}
+        {/* Front Side */}
         <div
-                  className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between"
-                  style={{ backfaceVisibility: "hidden" }}
+          className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
+          style={{ backfaceVisibility: 'hidden' }}
         >
           <div>
             <div className="flex items-center gap-4 mb-4">
-                      {testimonial.avatar && (
-                        <img
-                          src={testimonial.avatar}
-                          alt={testimonial.author}
-                          className="w-12 h-12 rounded-full"
-                        />
-                      )}
+              <div className="text-4xl">{testimonial.avatar}</div>
               <div>
-                        <h3 className="font-semibold text-gray-900">
-                          {testimonial.author}
-                        </h3>
-                        <p className="text-sm text-gray-600">
-                          {testimonial.role}
-                        </p>
-                      </div>
-                    </div>
-                    <p className="text-gray-700 text-sm mb-4">
-                      "{testimonial.shortText}"
-                    </p>
-                  </div>
-                  <div className="flex items-center justify-between">
+                <h3 className="font-semibold text-gray-900">{testimonial.author}</h3>
+                <p className="text-sm text-gray-600">{testimonial.role}</p>
                 <p className="text-xs text-gray-500">{testimonial.company}</p>
-                    <div className="flex gap-1">
-                      {[...Array(5)].map((_, i) => (
+              </div>
+            </div>
+            <div className="flex gap-1 mb-4">
+              {Array.from({ length: testimonial.rating || 5 }).map((_, i) => (
                 <span key={i} className="text-yellow-400">
                   ★
                 </span>
               ))}
             </div>
+            <p className="text-gray-700 text-sm leading-relaxed">{testimonial.shortText}</p>
           </div>
+          <p className="text-xs text-gray-500 text-center mt-4">Hover to read more</p>
         </div>
 
-                {/* Back of card */}
+        {/* Back Side */}
         <div
-                  className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg shadow-lg p-6 flex flex-col justify-between text-white"
+          className="absolute w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 rounded-lg shadow-lg p-6 flex flex-col justify-center border border-blue-700"
           style={{
-                    backfaceVisibility: "hidden",
-                    transform: "rotateY(180deg)",
+            backfaceVisibility: 'hidden',
+            transform: 'rotateY(180deg)',
           }}
         >
-                  <div>
-                    <h3 className="font-semibold text-lg mb-3">
-                      {testimonial.author}
-                    </h3>
-                    <p className="text-sm text-blue-100 leading-relaxed">
-                      "{testimonial.fullText}"
+          <p className="text-white text-sm leading-relaxed font-medium">
+            {testimonial.fullText}
           </p>
-                  </div>
-                  <p className="text-xs text-blue-200 text-center">
-                    Click to flip back
+          <p className="text-blue-200 text-xs mt-4 text-center italic">
+            — {testimonial.author}
           </p>
         </div>
       </div>
     </div>
+  );
+}
+
+export default function TestimonialCardSix() {
+  return (
+    <section className="py-16 px-4 bg-gray-50">
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-4xl font-bold text-gray-900 mb-4">What Our Clients Say</h2>
+          <p className="text-lg text-gray-600">
+            Hover over any card to read the full testimonial
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {testimonials.map((testimonial) => (
+            <TestimonialCard key={testimonial.id} testimonial={testimonial} />
           ))}
         </div>
       </div>