From 02328bcd874450fd9ee429da5dd8353c0712b29b Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 19:07:56 +0000
Subject: [PATCH] Update components/hero.tsx

---
 components/hero.tsx | 54 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/components/hero.tsx b/components/hero.tsx
index 9cc56a7..084a3f9 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -100,14 +100,54 @@ export const Hero = () => {
           </Link>
         </Button>
       </motion.div>
-      <div className="p-4 border border-neutral-200 bg-neutral-100 dark:bg-neutral-800 dark:border-neutral-700 rounded-[32px] mt-20 relative">
-        <div className="absolute inset-x-0 bottom-0 h-40 w-full bg-gradient-to-b from-transparent via-white to-white dark:via-black/50 dark:to-black scale-[1.1] pointer-events-none" />
-        <div className="p-2 bg-white dark:bg-black dark:border-neutral-700 border border-neutral-200 rounded-[24px]">
-          <div className="mt-20 rounded-[20px] bg-gradient-to-br from-blue-600 to-purple-700 aspect-video w-full max-w-5xl mx-auto shadow-2xl flex items-center justify-center text-white text-2xl font-bold">
-          Predictable Pipeline Engine
+      
+      {/* Stats Images Section */}
+      <motion.div
+        initial={{
+          y: 80,
+          opacity: 0,
+        }}
+        animate={{
+          y: 0,
+          opacity: 1,
+        }}
+        transition={{
+          ease: "easeOut",
+          duration: 0.5,
+          delay: 0.6,
+        }}
+        className="mt-20 w-full max-w-6xl mx-auto"
+      >
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 px-4">
+          <div className="rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-lg">
+            <Image
+              src="https://lrggyvioreorxttbasgi.supabase.co/storage/v1/object/public/app-assets/1754/images/1768761086722-Good_stats_1.png"
+              alt="Stats proof 1"
+              width={400}
+              height={300}
+              className="w-full h-auto object-cover"
+            />
+          </div>
+          <div className="rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-lg">
+            <Image
+              src="https://lrggyvioreorxttbasgi.supabase.co/storage/v1/object/public/app-assets/1754/images/1768761089212-Good_stats_2.png"
+              alt="Stats proof 2"
+              width={400}
+              height={300}
+              className="w-full h-auto object-cover"
+            />
+          </div>
+          <div className="rounded-2xl overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-lg">
+            <Image
+              src="https://lrggyvioreorxttbasgi.supabase.co/storage/v1/object/public/app-assets/1754/images/1768761092430-Good_stats_3_better.png"
+              alt="Stats proof 3"
+              width={400}
+              height={300}
+              className="w-full h-auto object-cover"
+            />
+          </div>
         </div>
-        </div>
-      </div>
+      </motion.div>
     </div>
   );
 };