From e8c5c2cf5650fca79d9f2443488dda6198ad66de Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 27 Feb 2026 12:56:35 +0000
Subject: [PATCH] Update src/components/sections/metrics/MetricCardThree.tsx

---
 .../sections/metrics/MetricCardThree.tsx      | 72 +++++++++----------
 1 file changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/components/sections/metrics/MetricCardThree.tsx b/src/components/sections/metrics/MetricCardThree.tsx
index dd4ca8f..3ad9845 100644
--- a/src/components/sections/metrics/MetricCardThree.tsx
+++ b/src/components/sections/metrics/MetricCardThree.tsx
@@ -54,23 +54,22 @@ export default function MetricCardThree({
   return (
     <section className={`py-16 px-4 sm:px-6 lg:px-8 ${bgClass}`}>
       <div className="max-w-6xl mx-auto">
-        {/* Header Section */}
-        <div className="mb-12 text-center">
-          <div className="inline-flex items-center gap-2 mb-4 px-4 py-2 rounded-full bg-blue-100 text-blue-700">
-            <TagIcon className="w-4 h-4" />
-            <span className="text-sm font-semibold">{tag}</span>
+        <div className="mb-12">
+          <div className="flex items-center gap-2 mb-4">
+            <TagIcon className="w-5 h-5 text-blue-500" />
+            <span className="text-sm font-semibold text-blue-500 uppercase tracking-wide">
+              {tag}
+            </span>
           </div>
-
           <h2 className="text-4xl sm:text-5xl font-bold mb-4">{title}</h2>
-          <p className="text-lg text-slate-600 max-w-2xl mx-auto">
+          <p className={`text-lg ${useInvertedBackground ? "text-slate-300" : "text-slate-600"}`}>
             {description}
           </p>
         </div>
 
-        {/* Metrics Grid with Flip Cards */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
           {metrics.map((metric) => {
-            const MetricIcon = metric.icon;
+            const Icon = metric.icon;
             const isFlipped = flipped[metric.id] || false;
 
             return (
@@ -81,49 +80,47 @@ export default function MetricCardThree({
               >
                 <div
                   className={`relative w-full h-full transition-transform duration-500 transform-gpu ${
-                    isFlipped ? "rotate-y-180" : ""
+                    isFlipped ? "scale-x-[-1]" : ""
                   }`}
                   style={{
                     transformStyle: "preserve-3d",
-                    transform: isFlipped
-                      ? "rotateY(180deg)"
-                      : "rotateY(0deg)",
+                    transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
                   }}
                 >
-                  {/* Front of Card */}
                   <div
-                    className="absolute w-full h-full bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6 flex flex-col items-center justify-center text-center border border-blue-200 shadow-lg"
-                    style={{
-                      backfaceVisibility: "hidden",
-                    }}
+                    className={`absolute w-full h-full p-6 rounded-lg border-2 flex flex-col justify-between ${
+                      useInvertedBackground
+                        ? "bg-slate-800 border-slate-700 text-white"
+                        : "bg-slate-50 border-slate-200 text-slate-900"
+                    }`}
+                    style={{ backfaceVisibility: "hidden" }}
                   >
-                    <MetricIcon className="w-12 h-12 text-blue-600 mb-4" />
-                    <h3 className="text-sm font-semibold text-slate-700 mb-3">
-                      {metric.title}
-                    </h3>
-                    <p className="text-4xl font-bold text-blue-600">
-                      {metric.value}
-                    </p>
-                    <p className="text-xs text-slate-500 mt-4">
-                      Click to see more
-                    </p>
+                    <div>
+                      <div className="mb-4 p-3 bg-blue-100 rounded-lg w-fit">
+                        <Icon className="w-6 h-6 text-blue-600" />
+                      </div>
+                      <h3 className="text-sm font-semibold mb-2 opacity-75">
+                        {metric.title}
+                      </h3>
+                    </div>
+                    <div className="text-4xl font-bold">{metric.value}</div>
                   </div>
 
-                  {/* Back of Card */}
                   <div
-                    className="absolute w-full h-full bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg p-6 flex flex-col items-center justify-center text-center border border-slate-700 shadow-lg text-white"
+                    className={`absolute w-full h-full p-6 rounded-lg border-2 flex items-center justify-center ${
+                      useInvertedBackground
+                        ? "bg-slate-800 border-slate-700 text-white"
+                        : "bg-slate-50 border-slate-200 text-slate-900"
+                    }`}
                     style={{
                       backfaceVisibility: "hidden",
                       transform: "rotateY(180deg)",
                     }}
                   >
-                    <p className="text-sm leading-relaxed mb-4">
+                    <p className="text-center text-sm leading-relaxed">
                       {metric.title} represents our commitment to excellence and
                       continuous growth in the computer club community.
                     </p>
-                    <p className="text-xs text-slate-400">
-                      Click to flip back
-                    </p>
                   </div>
                 </div>
               </div>
@@ -131,14 +128,13 @@ export default function MetricCardThree({
           })}
         </div>
 
-        {/* Buttons Section */}
         {buttons.length > 0 && (
-          <div className="flex flex-wrap gap-4 justify-center">
+          <div className="flex flex-wrap gap-4">
             {buttons.map((button, index) => (
               <a
                 key={index}
                 href={button.href}
-                className="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-300 shadow-md hover:shadow-lg"
+                className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors duration-200"
               >
                 {button.text}
               </a>