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

src/components/sections/testimonial/TestimonialCardTwelve.tsx

@@ -44,29 +44,27 @@ export default function TestimonialCardTwelve({
   ];
 
   return (
-    <section className={`py-16 px-4 ${useInvertedBackground ? 'bg-gray-900' : 'bg-white'}`}>
+    <section className={`py-16 px-4 ${useInvertedBackground ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'}`}>
       <div className="max-w-6xl mx-auto">
         <div className="text-center mb-12">
           <div className="flex items-center justify-center gap-2 mb-4">
-            {TagIcon && <TagIcon className="w-5 h-5 text-blue-600" />}
-            <span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">
-              {cardTag}
-            </span>
+            {TagIcon && <TagIcon className="w-5 h-5" />}
+            <span className="text-sm font-semibold text-blue-600">{cardTag}</span>
           </div>
-          <h2 className={`text-3xl md:text-4xl font-bold ${useInvertedBackground ? 'text-white' : 'text-gray-900'}`}>
-            {cardTitle}
-          </h2>
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">{cardTitle}</h2>
         </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 ${cardAnimation === 'slide-up' ? 'animate-slide-up' : ''}`}
+              className="h-80 cursor-pointer perspective"
               onClick={() => toggleFlip(testimonial.id)}
             >
               <div
-                className="relative w-full h-full transition-transform duration-500 transform-gpu"
+                className={`relative w-full h-full transition-transform duration-500 transform-gpu ${
+                  flipped[testimonial.id] ? '[transform:rotateY(180deg)]' : ''
+                }`}
                 style={{
                   transformStyle: 'preserve-3d',
                   transform: flipped[testimonial.id] ? 'rotateY(180deg)' : 'rotateY(0deg)',
@@ -74,10 +72,8 @@ export default function TestimonialCardTwelve({
               >
                 {/* Front of card */}
                 <div
-                  className="absolute w-full h-full bg-white rounded-lg shadow-lg overflow-hidden"
-                  style={{
-                    backfaceVisibility: 'hidden',
-                  }}
+                  className="absolute w-full h-full bg-gray-100 rounded-lg overflow-hidden shadow-lg"
+                  style={{ backfaceVisibility: 'hidden' }}
                 >
                   <div className="relative w-full h-full">
                     <Image
@@ -100,9 +96,7 @@ export default function TestimonialCardTwelve({
                     transform: 'rotateY(180deg)',
                   }}
                 >
-                  <h3 className="text-white text-lg font-semibold mb-6 text-center">
-                    {testimonial.name}
-                  </h3>
+                  <h3 className="text-white text-lg font-semibold mb-6 text-center">{testimonial.name}</h3>
                   <div className="flex flex-col gap-4 w-full">
                     {socialLinks.map((link) => (
                       <a
@@ -116,33 +110,13 @@ export default function TestimonialCardTwelve({
                       </a>
                     ))}
                   </div>
+                  <p className="text-white/70 text-xs mt-6 text-center">Click to flip back</p>
                 </div>
               </div>
             </div>
           ))}
         </div>
       </div>
-
-      <style jsx>{`
-        @keyframes slide-up {
-          from {
-            opacity: 0;
-            transform: translateY(20px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-
-        .animate-slide-up {
-          animation: slide-up 0.6s ease-out forwards;
-        }
-
-        .perspective {
-          perspective: 1000px;
-        }
-      `}</style>
     </section>
   );
 }