From d57b9e2fa452574673e1739958fac9f8e29cd723 Mon Sep 17 00:00:00 2001
From: yuvraj-k-singh <yuvrajstudentbussiness@gmail.com>
Date: Mon, 18 May 2026 15:20:13 +0530
Subject: [PATCH 1/2] feat: updated hero section UI with dark and light mode

Signed-off-by: yuvraj-k-singh <yuvrajstudentbussiness@gmail.com>
---
 src/components/Hero.tsx | 131 +++++++++++++++++++++++++++++++++-------
 1 file changed, 108 insertions(+), 23 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 1549f8e..d48afe6 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,34 +1,119 @@
-import { Search } from 'lucide-react';
+import { Search, GitBranch, GitCommit, GitPullRequest, Layout } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
+// Fixed array declaration for stability
+const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i);
+
 const Hero = () => {
   return (
-    <section className="relative bg-gradient-to-br px-6 py-10">
-      <div className="max-w-7xl mx-auto">
-        <div className="text-center">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
-            Track GitHub Activity
-            <span className="block text-blue-600">Like Never Before</span>
-          </h1>
-          <p className="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
-            Monitor and analyze GitHub user activity with powerful insights. Perfect for developers,
-            project managers, and teams who want to understand contribution patterns and repository engagement.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <button className="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition-all transform hover:scale-105 shadow-lg flex items-center space-x-2">
-              <Search className="h-5 w-5" />
-              <Link to='/track'>Start Tracking</Link>
-            </button>
-            {/*
-            <button className="border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-8 py-4 rounded-lg font-semibold hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center space-x-2">
-              <span>View Demo</span>
-              <ArrowRight className="h-5 w-5" />
-            </button>*/}
+    <section className="relative overflow-hidden bg-slate-50 dark:bg-[#030712] text-slate-900 dark:text-white px-6 py-20 lg:py-32 min-h-[90vh] flex items-center transition-colors duration-500">
+      
+      {/* 1. Cyber Grid Overlay */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#e2e8f0_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f0_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f293710_1px,transparent_1px),linear-gradient(to_bottom,#1f293710_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
+      
+      {/* Ambient Radial Glow Elements */}
+      <div className="absolute top-1/4 left-1/4 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-blue-400/10 dark:bg-blue-500/10 rounded-full blur-[120px] pointer-events-none" />
+      <div className="absolute bottom-1/4 right-1/4 translate-x-1/2 translate-y-1/2 w-[600px] h-[600px] bg-cyan-400/10 dark:bg-cyan-500/10 rounded-full blur-[160px] pointer-events-none" />
+
+      <div className="relative max-w-7xl mx-auto w-full z-10">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
+          
+          {/* LEFT COLUMN: Typography & CTA */}
+          <div className="lg:col-span-6 text-left space-y-6 max-w-2xl mx-auto lg:mx-0">
+            <h1 className="text-4xl md:text-5xl xl:text-6xl font-extrabold tracking-tight leading-none text-slate-900 dark:text-slate-100">
+              Track GitHub Activity
+              <span className="block mt-2 bg-gradient-to-r from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-400 dark:via-cyan-400 dark:to-teal-400 bg-clip-text text-transparent drop-shadow-[0_0_30px_rgba(56,189,248,0.2)]">
+                Like Never Before
+              </span>
+            </h1>
+            
+            <p className="text-base md:text-lg text-slate-600 dark:text-slate-400 leading-relaxed max-w-xl">
+              Monitor and analyze GitHub user activity with powerful insights. Perfect for developers, 
+              project managers, and teams who want to understand contribution patterns and repository engagement.
+            </p>
+
+            <div className="pt-4 flex flex-wrap gap-4">
+              {/* Interactive Primary Link Button */}
+              <Link to='/track' className="group relative inline-flex items-center justify-center p-0.5 overflow-hidden text-sm font-semibold rounded-xl bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-500 dark:via-cyan-400 dark:to-teal-400 text-slate-900 dark:text-white transition-all shadow-md dark:shadow-[0_0_20px_rgba(59,130,246,0.3)] hover:shadow-lg dark:hover:shadow-[0_0_35px_rgba(34,211,238,0.5)] transform hover:-translate-y-0.5">
+                <span className="relative px-7 py-3.5 transition-all ease-in duration-75 bg-white dark:bg-[#030712] rounded-[10px] group-hover:bg-opacity-0 flex items-center space-x-2">
+                  <Search className="h-5 w-5 text-blue-600 dark:text-cyan-400 group-hover:text-white transition-colors" />
+                  <span className="text-slate-900 dark:text-white group-hover:text-white">Start Tracking</span>
+                </span>
+              </Link>
+            </div>
+          </div>
+
+          {/* RIGHT COLUMN: Dashboard & Floating Git Elements */}
+          <div className="lg:col-span-6 relative flex items-center justify-center h-[400px] md:h-[500px]">
+            
+            {/* The Main Dashboard Mockup Card */}
+            <div className="relative w-full max-w-md bg-white/70 dark:bg-slate-900/60 backdrop-blur-xl border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-xl dark:shadow-2xl dark:shadow-cyan-950/20 transform hover:scale-[1.02] transition-transform duration-500 z-10">
+              <div className="flex items-center justify-between pb-4 border-b border-slate-200 dark:border-slate-800/60 mb-6">
+                <div className="flex items-center space-x-2">
+                  <Layout className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">Dashboard Insights</span>
+                </div>
+                <div className="flex space-x-1.5">
+                  <span className="w-2.5 h-2.5 rounded-full bg-red-400 dark:bg-red-500/60"></span>
+                  <span className="w-2.5 h-2.5 rounded-full bg-yellow-400 dark:bg-yellow-500/60"></span>
+                  <span className="w-2.5 h-2.5 rounded-full bg-green-400 dark:bg-green-500/60"></span>
+                </div>
+              </div>
+
+              {/* Mockup Data widgets */}
+              <div className="space-y-4">
+                <div className="bg-slate-100/80 dark:bg-slate-950/80 p-4 rounded-xl border border-slate-200/60 dark:border-slate-800/40">
+                  <div className="text-xs text-slate-500 uppercase tracking-wider font-semibold mb-1">Weekly Commits</div>
+                  <div className="text-2xl font-bold text-slate-800 dark:text-slate-200">176 <span className="text-xs text-emerald-600 dark:text-emerald-400 font-normal ml-1">+12%</span></div>
+                  <div className="w-full bg-slate-200 dark:bg-slate-800 h-1.5 rounded-full mt-3 overflow-hidden">
+                    <div className="bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-500 dark:to-cyan-400 h-full w-[70%] rounded-full animate-pulse" />
+                  </div>
+                </div>
+
+                {/* Simulated GitHub Contribution Grid */}
+                <div className="bg-slate-100/80 dark:bg-slate-950/80 p-4 rounded-xl border border-slate-200/60 dark:border-slate-800/40">
+                  <div className="text-xs text-slate-500 uppercase tracking-wider font-semibold mb-2">Contribution Matrix</div>
+                  <div className="grid grid-cols-7 gap-1.5 w-max">
+                    {MATRIX_CELLS.map((cellIndex) => {
+                      // Stable indexing pattern to avoid flashing visual layouts on state updates
+                      const intensitiesDark = ['bg-slate-800', 'bg-emerald-900/60', 'bg-emerald-700', 'bg-emerald-500', 'bg-emerald-400'];
+                      const intensitiesLight = ['bg-slate-200', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-500', 'bg-emerald-600'];
+                      
+                      return (
+                        <div 
+                          key={cellIndex} 
+                          className={`w-3 h-3 rounded-[2px] transition-all duration-300 hover:scale-125 
+                            ${intensitiesLight[cellIndex % intensitiesLight.length]} 
+                            dark:${intensitiesDark[cellIndex % intensitiesDark.length]}`} 
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Floating Git Icon Nodes with Safe Tailwind standard bounce animations */}
+            <div className="absolute -top-4 left-6 md:left-12 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce">
+              <GitBranch className="w-6 h-6 text-blue-600 dark:text-blue-400" />
+            </div>
+
+            <div className="absolute bottom-12 left-2 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce [animation-delay:1s]">
+              <GitCommit className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
+            </div>
+
+            <div className="absolute top-12 right-6 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce [animation-delay:0.5s]">
+              <GitPullRequest className="w-6 h-6 text-purple-600 dark:text-purple-400" />
+            </div>
+
+            {/* Subtle Neon Center Glow */}
+            <div className="absolute inset-0 m-auto w-64 h-64 bg-cyan-400/10 dark:bg-cyan-500/20 rounded-full blur-[80px] z-0 pointer-events-none" />
           </div>
+
         </div>
       </div>
     </section>
   );
 };
 
-export default Hero;
+export default Hero;
\ No newline at end of file

From 42323cbbc865f62449953f1e3227318e2ad54f0b Mon Sep 17 00:00:00 2001
From: yuvraj-k-singh <yuvrajstudentbussiness@gmail.com>
Date: Mon, 18 May 2026 15:37:51 +0530
Subject: [PATCH 2/2] feat: complete hero section redesign and resolve code
 review feedback

---
 src/components/Hero.tsx | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index d48afe6..a606d77 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -1,7 +1,7 @@
 import { Search, GitBranch, GitCommit, GitPullRequest, Layout } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
-// Fixed array declaration for stability
+// Fixed array declaration for data structure rendering stability
 const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i);
 
 const Hero = () => {
@@ -22,7 +22,7 @@ const Hero = () => {
           <div className="lg:col-span-6 text-left space-y-6 max-w-2xl mx-auto lg:mx-0">
             <h1 className="text-4xl md:text-5xl xl:text-6xl font-extrabold tracking-tight leading-none text-slate-900 dark:text-slate-100">
               Track GitHub Activity
-              <span className="block mt-2 bg-gradient-to-r from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-400 dark:via-cyan-400 dark:to-teal-400 bg-clip-text text-transparent drop-shadow-[0_0_30px_rgba(56,189,248,0.2)]">
+              <span className="block mt-2 bg-gradient-to-r from-blue-600 via-cyan-500 to-teal-500 dark:from-blue-400 dark:via-cyan-400 dark:to-teal-400 bg-clip-text text-transparent [filter:drop-shadow(0_0_30px_rgba(56,189,248,0.3))]">
                 Like Never Before
               </span>
             </h1>
@@ -75,16 +75,17 @@ const Hero = () => {
                   <div className="text-xs text-slate-500 uppercase tracking-wider font-semibold mb-2">Contribution Matrix</div>
                   <div className="grid grid-cols-7 gap-1.5 w-max">
                     {MATRIX_CELLS.map((cellIndex) => {
-                      // Stable indexing pattern to avoid flashing visual layouts on state updates
-                      const intensitiesDark = ['bg-slate-800', 'bg-emerald-900/60', 'bg-emerald-700', 'bg-emerald-500', 'bg-emerald-400'];
+                      // Fully qualified class names to ensure they aren't removed by Tailwind's compilation process
                       const intensitiesLight = ['bg-slate-200', 'bg-emerald-200', 'bg-emerald-300', 'bg-emerald-500', 'bg-emerald-600'];
+                      const intensitiesDark = ['dark:bg-slate-800', 'dark:bg-emerald-900/60', 'dark:bg-emerald-700', 'dark:bg-emerald-500', 'dark:bg-emerald-400'];
+                      
+                      const lightClass = intensitiesLight[cellIndex % intensitiesLight.length];
+                      const darkClass = intensitiesDark[cellIndex % intensitiesDark.length];
                       
                       return (
                         <div 
                           key={cellIndex} 
-                          className={`w-3 h-3 rounded-[2px] transition-all duration-300 hover:scale-125 
-                            ${intensitiesLight[cellIndex % intensitiesLight.length]} 
-                            dark:${intensitiesDark[cellIndex % intensitiesDark.length]}`} 
+                          className={`w-3 h-3 rounded-[2px] transition-all duration-300 hover:scale-125 ${lightClass} ${darkClass}`} 
                         />
                       );
                     })}
@@ -93,16 +94,25 @@ const Hero = () => {
               </div>
             </div>
 
-            {/* Floating Git Icon Nodes with Safe Tailwind standard bounce animations */}
-            <div className="absolute -top-4 left-6 md:left-12 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce">
+            {/* Floating Git Icon Nodes using native inline styles for correct staggered delays */}
+            <div 
+              style={{ animationDelay: '0s' }}
+              className="absolute -top-4 left-6 md:left-12 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce"
+            >
               <GitBranch className="w-6 h-6 text-blue-600 dark:text-blue-400" />
             </div>
 
-            <div className="absolute bottom-12 left-2 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce [animation-delay:1s]">
+            <div 
+              style={{ animationDelay: '1s' }}
+              className="absolute bottom-12 left-2 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce"
+            >
               <GitCommit className="w-6 h-6 text-emerald-600 dark:text-emerald-400" />
             </div>
 
-            <div className="absolute top-12 right-6 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce [animation-delay:0.5s]">
+            <div 
+              style={{ animationDelay: '0.5s' }}
+              className="absolute top-12 right-6 bg-white dark:bg-slate-900/80 backdrop-blur-md p-3 rounded-xl border border-slate-200 dark:border-slate-800 shadow-md dark:shadow-lg z-20 animate-bounce"
+            >
               <GitPullRequest className="w-6 h-6 text-purple-600 dark:text-purple-400" />
             </div>