From 6c4daf6a04d2dadf40eb284b38a967c87da29a79 Mon Sep 17 00:00:00 2001
From: Luffy-456 <anshuman567.in@gmail.com>
Date: Wed, 13 May 2026 13:25:25 +0530
Subject: [PATCH 1/3] improve feature card

1. Enhanced feature card hover animations using translate and scale effects
2. Added theme-aware hover backgrounds and border styling for each feature card
3. Improved hover shadow visibility in both light and dark modes
4. Refined typography and text contrast for better readability
5. Added smoother transitions for polished UI interactions
6. Improved dark mode visual consistency across feature cards
7. Introduced individual card color themes matching their respective feature icons
---
 src/components/Features.tsx | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index b8b2092..89ea963 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -7,42 +7,54 @@ const Features = () => {
       title: 'Activity Analytics',
       description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
       bgColor: 'bg-blue-100',
-      iconColor: 'text-blue-600'
+      iconColor: 'text-blue-600',
+      hoverColor: 'hover:bg-blue-400/50 dark:hover:bg-blue-900/30',
+      borderColor: 'hover:border-blue-200 dark:hover:border-blue-700'
     },
     {
       icon: Users,
       title: 'Multi-User Tracking',
       description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
       bgColor: 'bg-green-100',
-      iconColor: 'text-green-600'
+      iconColor: 'text-green-600',
+      hoverColor: 'hover:bg-green-400/50 dark:hover:bg-green-900/30',
+      borderColor: 'hover:border-green-200 dark:hover:border-green-700'
     },
     {
       icon: Search,
       title: 'Smart Search',
       description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
       bgColor: 'bg-purple-100',
-      iconColor: 'text-purple-600'
+      iconColor: 'text-purple-600',
+      hoverColor: 'hover:bg-purple-400/50 dark:hover:bg-purple-900/30',
+      borderColor: 'hover:border-purple-200 dark:hover:border-purple-700'
     },
     {
       icon: Zap,
       title: 'Real-time Updates',
       description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
       bgColor: 'bg-orange-100',
-      iconColor: 'text-orange-600'
+      iconColor: 'text-orange-600',
+      hoverColor: 'hover:bg-orange-400/50 dark:hover:bg-orange-900/30',
+      borderColor: 'hover:border-orange-200 dark:hover:border-orange-700'
     },
     {
       icon: Shield,
       title: 'Privacy First',
       description: 'All data is fetched from public GitHub APIs. We don\'t store personal information or require GitHub access.',
       bgColor: 'bg-red-100',
-      iconColor: 'text-red-600'
+      iconColor: 'text-red-600',
+      hoverColor: 'hover:bg-red-400/50 dark:hover:bg-red-900/30',
+      borderColor: 'hover:border-red-200 dark:hover:border-red-700'
     },
     {
       icon: Globe,
       title: 'Export & Share',
       description: 'Export activity reports and share insights with your team through various formats and integrations.',
       bgColor: 'bg-indigo-100',
-      iconColor: 'text-indigo-600'
+      iconColor: 'text-indigo-600',
+      hoverColor: 'hover:bg-indigo-400/50 dark:hover:bg-indigo-900/30',
+      borderColor: 'hover:border-indigo-200 dark:hover:border-indigo-700'
     }
   ];
 
@@ -60,12 +72,12 @@ const Features = () => {
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
             return (
-              <div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl hover:shadow-lg transition-all duration-300">
+              <div key={index} className={`group w-62 h-72 bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl border dark:border-gray-800 transform hover:-translate-y-2 hover:scale-[1.02] transition-all duration-300 ease-linear p-6`}>
                 <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6`}>
                   <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
                 </div>
-                <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{feature.title}</h3>
-                <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
+                <h3 className="  text-2xl font-bold text-gray-900 dark:text-gray-100 group-hover:text-black dark:group-hover:text-white transition-colors duration-300">{feature.title}</h3>
+                <p className="text-gray-600 dark:text-gray-300 text-md font-semibold leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
                   {feature.description}
                 </p>
               </div>

From abeea4fdbf9e471319f4f132349258b85aec9dff Mon Sep 17 00:00:00 2001
From: Luffy-456 <anshuman567.in@gmail.com>
Date: Wed, 13 May 2026 15:31:11 +0530
Subject: [PATCH 2/3] Fix invalid utility classes

---
 src/components/Features.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index 89ea963..8a59515 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -72,12 +72,12 @@ const Features = () => {
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
             return (
-              <div key={index} className={`group w-62 h-72 bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl border dark:border-gray-800 transform hover:-translate-y-2 hover:scale-[1.02] transition-all duration-300 ease-linear p-6`}>
+              <div key={index} className={`group w-64 h-72 bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl border dark:border-gray-800 transform hover:-translate-y-2 hover:scale-[1.02] transition-all duration-300 ease-linear p-6`}>
                 <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6`}>
                   <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
                 </div>
                 <h3 className="  text-2xl font-bold text-gray-900 dark:text-gray-100 group-hover:text-black dark:group-hover:text-white transition-colors duration-300">{feature.title}</h3>
-                <p className="text-gray-600 dark:text-gray-300 text-md font-semibold leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
+                <p className="text-gray-600 dark:text-gray-300 text-base font-semibold leading-relaxed group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
                   {feature.description}
                 </p>
               </div>

From ae69e0e9e1cfd62d0b3d7895350e6edce7e65185 Mon Sep 17 00:00:00 2001
From: Luffy-456 <anshuman567.in@gmail.com>
Date: Wed, 13 May 2026 15:37:04 +0530
Subject: [PATCH 3/3] Fix responsive card sizing

---
 src/components/Features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index 8a59515..a8ce652 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -72,7 +72,7 @@ const Features = () => {
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
             return (
-              <div key={index} className={`group w-64 h-72 bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl border dark:border-gray-800 transform hover:-translate-y-2 hover:scale-[1.02] transition-all duration-300 ease-linear p-6`}>
+              <div key={index} className={`group h-72 w-full bg-gray-100 dark:bg-gray-800 ${feature.hoverColor} ${feature.borderColor} rounded-2xl shadow-md hover:shadow-2xl border dark:border-gray-800 transform hover:-translate-y-2 hover:scale-[1.02] transition-all duration-300 ease-linear p-6`}>
                 <div className={`${feature.bgColor} w-12 h-12 rounded-lg flex items-center justify-center mb-6`}>
                   <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
                 </div>