From 3639498370dbcdef80b29ff57b1e0d633db152c0 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 25 May 2026 13:45:51 +0000
Subject: [PATCH] Bob AI: make the metric section visual by adding images
 there, and add a gall...

---
 .../sections/metrics/MetricsIconCards.tsx           | 13 +++++++++----
 src/pages/HomePage.tsx                              |  6 +++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/sections/metrics/MetricsIconCards.tsx b/src/components/sections/metrics/MetricsIconCards.tsx
index 90d2096..9148a52 100644
--- a/src/components/sections/metrics/MetricsIconCards.tsx
+++ b/src/components/sections/metrics/MetricsIconCards.tsx
@@ -6,7 +6,8 @@ import ScrollReveal from "@/components/ui/ScrollReveal";
 import { resolveIcon } from "@/utils/resolve-icon";
 
 type Metric = {
-  icon: string | LucideIcon;
+  icon?: string | LucideIcon;
+  imageSrc?: string;
   title: string;
   value: string;
 };
@@ -64,9 +65,13 @@ const MetricsIconCards = ({
             return (
               <div key={metric.value} className="flex flex-col items-center justify-center gap-3 p-3 xl:p-4 2xl:p-5 min-h-70 h-full card rounded">
                 <div className="flex items-center justify-center gap-2">
-                  <div className="flex items-center justify-center size-8 primary-button rounded">
-                    <IconComponent className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
-                  </div>
+                  {metric.imageSrc ? (
+                    <img src={metric.imageSrc} alt={metric.title} className="size-8 object-cover rounded" />
+                  ) : (
+                    <div className="flex items-center justify-center size-8 primary-button rounded">
+                      <IconComponent className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
+                    </div>
+                  )}
                   <span className="text-xl truncate">{metric.title}</span>
                 </div>
                 <span className="text-7xl font-medium leading-none truncate">{metric.value}</span>
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 5c4cc3c..b239745 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -193,17 +193,17 @@ export default function HomePage() {
       description="Our commitment to data-driven strategies consistently delivers outstanding outcomes and measurable success for our diverse clientele."
       metrics={[
         {
-          icon: Sparkles,
+          imageSrc: "https://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg",
           title: "Client Satisfaction",
           value: "98%",
         },
         {
-          icon: TrendingUp,
+          imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",
           title: "Campaign ROI",
           value: "+35%",
         },
         {
-          icon: BarChart2,
+          imageSrc: "https://img.b2bpic.net/free-photo/composition-with-love-emoji_23-2148860254.jpg",
           title: "Website Traffic Increase",
           value: "+70%",
         },