Update src/components/sections/about/AboutMetric.tsx

src/components/sections/about/AboutMetric.tsx

@@ -34,15 +34,6 @@ export default function AboutMetric({
   const bgClass = useInvertedBackground ? 'bg-slate-900' : 'bg-white';
   const textClass = useInvertedBackground ? 'text-white' : 'text-slate-900';
 
-  const getAnimationDelay = (index: number) => {
-    if (metricsAnimation === 'slide-up') {
-      return {
-        transitionDelay: `${index * 100}ms`,
-      };
-    }
-    return {};
-  };
-
   return (
     <section className={`${bgClass} py-16 px-4 sm:px-6 lg:px-8`}>
       <div className="max-w-6xl mx-auto">
@@ -62,10 +53,11 @@ export default function AboutMetric({
                 key={index}
                 className="h-64 cursor-pointer perspective"
                 onClick={() => toggleFlip(index)}
-                style={getAnimationDelay(index)}
               >
                 <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 ${
+                    isFlipped ? '[transform:rotateY(180deg)]' : ''
+                  }`}
                   style={{
                     transformStyle: 'preserve-3d',
                     transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
@@ -73,36 +65,52 @@ export default function AboutMetric({
                 >
                   {/* Front Side */}
                   <div
-                    className={`absolute w-full h-full ${bgClass} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
+                    className={`absolute w-full h-full ${
-                    style={{
+                      useInvertedBackground ? 'bg-slate-800' : 'bg-slate-50'
-                      backfaceVisibility: 'hidden',
+                    } rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border ${
-                    }}
+                      useInvertedBackground ? 'border-slate-700' : 'border-slate-200'
+                    }`}
+                    style={{ backfaceVisibility: 'hidden' }}
                   >
-                    <Icon className={`w-12 h-12 ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'} mb-4`} />
+                    <Icon
-                    <p className={`text-sm font-semibold ${textClass} text-center mb-2`}>
+                      className={`w-12 h-12 mb-4 ${
+                        useInvertedBackground ? 'text-blue-400' : 'text-blue-600'
+                      }`}
+                    />
+                    <p
+                      className={`text-sm font-medium ${
+                        useInvertedBackground ? 'text-slate-300' : 'text-slate-600'
+                      } text-center mb-2`}
+                    >
                       {metric.label}
                     </p>
-                    <p className={`text-3xl font-bold ${useInvertedBackground ? 'text-blue-400' : 'text-blue-600'}`}>
+                    <p
+                      className={`text-3xl font-bold ${textClass} text-center`}
+                    >
                       {metric.value}
                     </p>
-                    <p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
+                    <p
-                      Click to learn more
+                      className={`text-xs mt-4 ${
+                        useInvertedBackground ? 'text-slate-400' : 'text-slate-500'
+                      }`}
+                    >
+                      Click to flip
                     </p>
                   </div>
 
                   {/* Back Side */}
                   <div
-                    className={`absolute w-full h-full ${useInvertedBackground ? 'bg-slate-800' : 'bg-slate-100'} rounded-lg shadow-lg p-6 flex flex-col items-center justify-center border border-slate-200`}
+                    className={`absolute w-full h-full ${
+                      useInvertedBackground ? 'bg-blue-600' : 'bg-blue-500'
+                    } rounded-lg shadow-lg p-6 flex flex-col items-center justify-center`}
                     style={{
                       backfaceVisibility: 'hidden',
                       transform: 'rotateY(180deg)',
                     }}
                   >
-                    <p className={`text-sm ${textClass} text-center leading-relaxed`}>
+                    <p className="text-white text-center text-sm leading-relaxed">
-                      {metric.label}: {metric.value} represents our commitment to excellence and continuous growth in this area.
+                      {metric.label}: {metric.value} represents our commitment to
-                    </p>
+                      excellence and continuous growth in the tech community.
-                    <p className={`text-xs ${useInvertedBackground ? 'text-slate-400' : 'text-slate-500'} mt-4 text-center`}>
-                      Click to flip back
                     </p>
                   </div>
                 </div>