From 5c26f1ca7addba97ceadf06d287d68c2a9a5d3c4 Mon Sep 17 00:00:00 2001
From: yashpatil641 <yashpatil4395@gmail.com>
Date: Thu, 10 Jul 2025 23:22:22 +0530
Subject: [PATCH] chore: updated stats for smaller screens

---
 .gitignore   |  6 ++++++
 app/page.tsx | 51 ++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 61c388c..6271432 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,9 @@ next-env.d.ts
 
 # misc
 .vscode
+
+# pnpm
+pnpm-lock.yaml
+
+.yarn/*
+!.yarn/patches
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 9adea43..cc0ff14 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -172,9 +172,54 @@ export default function Home() {
           <HB4Form />
         </div>
       </div>
-      <div className="sm:hidden w-screen mt-28">
-        <Image src={bottomstats} alt="bottomstats" className="w-screen" />
-        <Image src={topstats} alt="topstats" className="w-screen" />
+      <div className="sm:hidden w-screen mt-28 flex flex-col gap-52 mb-14">
+        <div className="relative">
+          <Image
+            src={stats}
+            alt="bottomstats"
+            className="w-screen scale-[2.6] xs:scale-[1.8]"
+          />
+          <div className="w-full flex justify-evenly absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-6 ">
+            <div className="w-[40%] text-center flex flex-col items-center mb-4 scale-150">
+              <CountAnimation targetValue={5154} />
+              <div className="font-bold text-sm text-white">Registrations</div>
+              <div className="font-bold text-xs text-[#FFC1C7] max-w-[70%]">
+                5100+ registrations from across the country.
+              </div>
+            </div>
+            <div className="w-[40%] text-center flex flex-col items-center mb-4 scale-150">
+              <CountAnimation targetValue={425} />
+              <div className="font-bold text-sm text-white">Participants</div>
+              <div className="font-bold text-xs text-[#FFC1C7] max-w-[70%]">
+                400+ participants joined the offline hackathon!
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative">
+          <Image
+            src={stats}
+            alt="bottomstats"
+            className="w-screen scale-[2.6] xs:scale-[1.8] -rotate-12"
+          />
+          <div className="w-full flex flex-wrap justify-evenly absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 -rotate-6">
+            <div className="w-[40%] text-center flex flex-col items-center mb-4 scale-150">
+              <CountAnimation targetValue={100} />
+              <div className="font-bold text-sm text-white">Volunteers</div>
+              <div className="font-bold text-xs text-[#FFC1C7] max-w-[70%]">
+                To help you, get the best out of HackByte.
+              </div>
+            </div>
+            <div className="w-[40%] text-center flex flex-col items-center mb-4 scale-150">
+              <CountAnimation targetValue={105} />
+              <div className="font-bold text-sm text-white">Projects</div>
+              <div className="font-bold text-xs text-[#FFC1C7] max-w-[70%]">
+                Innovative submissions from various domains.
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div className="relative sm:mt-0 mt-28 sm:block hidden">
         <Image