From 49e873283246cc558024b8ce6eccab3592d80fd1 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Wed, 29 Apr 2026 10:08:37 +0000
Subject: [PATCH] Bob AI: Change the background color of the specific div
 element cont

---
 .../sections/metrics/MetricsSimpleCards.tsx   | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/sections/metrics/MetricsSimpleCards.tsx b/src/components/sections/metrics/MetricsSimpleCards.tsx
index d9c5830..4745be7 100644
--- a/src/components/sections/metrics/MetricsSimpleCards.tsx
+++ b/src/components/sections/metrics/MetricsSimpleCards.tsx
@@ -47,23 +47,26 @@ const MetricsSimpleCards = ({
         {(primaryButton || secondaryButton) && (
           <div className="flex flex-wrap justify-center gap-3 mt-3">
             {primaryButton && <ButtonExpand text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
-            {secondaryButton && <ButtonExpand text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
+            {secondaryButton && <ButtonExpand text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
           </div>
         )}
       </div>
 
       <ScrollReveal variant="slide-up">
         <GridOrCarousel carouselThreshold={3}>
-          {metrics.map((metric) => (
-            <div key={metric.value} className="flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 min-h-70 h-full card rounded">
-              <span className="text-7xl md:text-8xl font-medium leading-none truncate">{metric.value}</span>
-              <p className="text-base leading-tight text-balance">{metric.description}</p>
-            </div>
-          ))}
+          {metrics.map((metric) => {
+            const isTarget = (metric.value + " " + metric.description).includes("200+ Events Styled") || metric.value.includes("200+");
+            return (
+              <div key={metric.value} className={`flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 min-h-70 h-full rounded ${isTarget ? 'bg-green-600 text-white' : 'card'}`}>
+                <span className="text-7xl md:text-8xl font-medium leading-none truncate">{metric.value}</span>
+                <p className="text-base leading-tight text-balance">{metric.description}</p>
+              </div>
+            );
+          })}
         </GridOrCarousel>
       </ScrollReveal>
     </div>
   </section>
 );
 
-export default MetricsSimpleCards;
+export default MetricsSimpleCards;
\ No newline at end of file
-- 
2.49.1