feat: Comprehensive UI/UX Overhaul & Premium Design System Refresh

src/App.tsx

@@ -17,6 +17,7 @@ function App() {
 
         {!isFullscreen && <Navbar />}
 
+        <main className="flex-grow bg-white dark:bg-dark flex justify-center items-center">
         <main className={`flex justify-center items-center ${isFullscreen ? "flex-1" : "flex-grow bg-gray-50 dark:bg-gray-800"}`}>
           <Router />
         </main>
@@ -29,7 +30,7 @@ function App() {
           gutter={8}
           containerClassName="mt-12"
           toastOptions={{
-            className: "bg-white dark:bg-gray-800 text-black dark:text-white",
+            className: "bg-white dark:bg-dark-lighter text-black dark:text-white",
             duration: 5000,
             success: {
               duration: 3000,

src/components/Features.tsx

@@ -1,10 +1,15 @@
 import { BarChart3, Users, Search, Zap, Shield, Globe } from 'lucide-react';
+import { motion } from 'framer-motion';
 
 const Features = () => {
   const features = [
     {
       icon: BarChart3,
       title: 'Activity Analytics',
+      description: 'Detailed insights into commits, pull requests, and code activity patterns with beautiful visualizations.',
+      iconColor: 'text-blue-600',
+      bgColor: 'bg-blue-50',
+      darkBg: 'dark:bg-blue-900/20'
       description: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
       bgColor: 'bg-blue-100',
       iconColor: 'text-blue-600',
@@ -14,6 +19,10 @@ const Features = () => {
     {
       icon: Users,
       title: 'Multi-User Tracking',
+      description: 'Track multiple users and compare contribution metrics side by side in real-time dashboards.',
+      iconColor: 'text-green-600',
+      bgColor: 'bg-green-50',
+      darkBg: 'dark:bg-green-900/20'
       description: 'Monitor multiple GitHub users simultaneously and compare their activity levels and contribution patterns.',
       bgColor: 'bg-green-100',
       iconColor: 'text-green-600',
@@ -23,6 +32,10 @@ const Features = () => {
     {
       icon: Search,
       title: 'Smart Search',
+      description: 'Advanced search and filtering to find specific repositories and contributions with ease.',
+      iconColor: 'text-purple-600',
+      bgColor: 'bg-purple-50',
+      darkBg: 'dark:bg-purple-900/20'
       description: 'Quickly find and add users to your tracking list with intelligent search and auto-suggestions.',
       bgColor: 'bg-purple-100',
       iconColor: 'text-purple-600',
@@ -32,6 +45,26 @@ const Features = () => {
     {
       icon: Zap,
       title: 'Real-time Updates',
+      description: 'Stay ahead with instant notifications on new contributions and repository changes as they happen.',
+      iconColor: 'text-orange-600',
+      bgColor: 'bg-orange-50',
+      darkBg: 'dark:bg-orange-900/20'
+    },
+    {
+      icon: Shield,
+      title: 'Privacy Focused',
+      description: 'Your data is safe. We use public APIs and never store sensitive personal information.',
+      iconColor: 'text-red-600',
+      bgColor: 'bg-red-50',
+      darkBg: 'dark:bg-red-900/20'
+    },
+    {
+      icon: Globe,
+      title: 'Global Insights',
+      description: 'Understand development trends across different regions and open-source ecosystems.',
+      iconColor: 'text-indigo-600',
+      bgColor: 'bg-indigo-50',
+      darkBg: 'dark:bg-indigo-900/20'
       description: 'Get instant notifications and updates when tracked users make new contributions or repositories.',
       bgColor: 'bg-orange-100',
       iconColor: 'text-orange-600',
@@ -58,20 +91,66 @@ const Features = () => {
     }
   ];
 
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 }
+  };
+
   return (
-    <section id="features" className="px-6 py-6 bg-white dark:bg-gray-900 transition-colors duration-300">
-      <div className="mx-auto">
+    <section id="features" className="px-6 py-24 bg-white dark:bg-dark transition-colors duration-300 relative">
+      <div className="max-w-7xl mx-auto relative z-10">
         <div className="text-center mb-16">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Powerful Features</h2>
-          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight"
+          >
+            Powerful Features
+          </motion.h2>
+          <motion.p 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
+          >
             Everything you need to track, analyze, and understand GitHub activity patterns
-          </p>
+          </motion.p>
         </div>
 
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <motion.div 
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
+        >
           {features.map((feature, index) => {
             const IconComponent = feature.icon;
             return (
+              <motion.div 
+                key={index}
+                variants={itemVariants}
+                className="group p-8 rounded-3xl bg-gray-50 dark:bg-dark-lighter border border-gray-100 dark:border-dark-border hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-300"
+              >
+                <div className={`${feature.bgColor} ${feature.darkBg} w-14 h-14 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
+                  <IconComponent className={`h-7 w-7 ${feature.iconColor}`} />
+                </div>
+                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                  {feature.title}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
               <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 hover:shadow-blue-500/20 border dark:border-gray-800 transform hover:-translate-y-3 hover:scale-105 backdrop-blur-sm 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 transition-transform duration-300 group-hover:rotate-6 group-hover:scale-110`}>
                   <IconComponent className={`h-6 w-6 ${feature.iconColor}`} />
@@ -80,10 +159,10 @@ const Features = () => {
                 <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>
+              </motion.div>
             );
           })}
-        </div>
+        </motion.div>
       </div>
     </section>
   );

src/components/Footer.tsx

@@ -22,6 +22,15 @@ function Footer() {
   };
 
   return (
+    <footer className="dark:text-white bg-white dark:bg-dark border-t border-gray-200 dark:border-dark-border py-2 px-6 transition-colors duration-300">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col md:flex-row justify-between items-center p-3">
+          <div className="flex items-center space-x-2 md:mb-0">
+            <a
+                href="https://github.com/GitMetricsLab/github_tracker"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center hover:text-gray-300 transition-colors"
     <footer
       className="
         w-full relative overflow-hidden transition-colors duration-300

src/components/Hero.tsx

@@ -1,11 +1,90 @@
+import { Search, ArrowRight, Sparkles } from 'lucide-react';
 import { Search, GitBranch, GitCommit, GitPullRequest, Layout } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
 
 // Fixed array declaration for data structure rendering stability
 const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i);
 
 const Hero = () => {
   return (
+    <section className="relative overflow-hidden px-6 py-24 md:py-32 bg-white dark:bg-dark transition-colors duration-300">
+      {/* Background Glows */}
+      <div aria-hidden="true" className="bg-glow top-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-500 rounded-full animate-pulse-slow"></div>
+      <div aria-hidden="true" className="bg-glow bottom-[-10%] right-[-10%] w-[400px] h-[400px] bg-indigo-500 rounded-full animate-pulse-slow" style={{ animationDelay: '2s' }}></div>
+
+      <div className="max-w-7xl mx-auto relative z-10">
+        <div className="text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-100 dark:border-blue-800 text-blue-600 dark:text-blue-400 text-sm font-medium mb-8"
+          >
+            <Sparkles className="h-4 w-4" />
+            <span>Track Smarter. Build Better.</span>
+          </motion.div>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+            className="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6 leading-[1.1] tracking-tight"
+          >
+            Track GitHub Activity
+            <span className="block text-gradient">Like Never Before</span>
+          </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-10 max-w-2xl 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.
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16"
+          >
+            <Link
+              to='/track'
+              className="group bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-8 py-4 rounded-full font-semibold transition-all transform hover:scale-105 shadow-[0_0_20px_rgba(37,99,235,0.3)] flex items-center space-x-2"
+            >
+              <Search className="h-5 w-5" />
+              <span>Start Tracking</span>
+              <ArrowRight className="h-5 w-5 group-hover:translate-x-1 transition-transform" />
+            </Link>
+          </motion.div>
+
+          {/* Social Proof */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 0.5 }}
+            className="flex flex-col items-center space-y-4"
+          >
+            <div className="flex -space-x-3">
+              {[1, 2, 3, 4].map((i) => (
+                <img
+                  key={i}
+                  className="w-10 h-10 rounded-full border-2 border-white dark:border-dark object-cover bg-gray-200"
+                  src={`https://i.pravatar.cc/100?u=${i + 10}`}
+                  alt={`User ${i}`}
+                />
+              ))}
+              <div className="w-10 h-10 rounded-full border-2 border-white dark:border-dark bg-blue-600 flex items-center justify-center text-white text-xs font-bold">
+                +50
+              </div>
+            </div>
+            <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+              Join <span className="text-gray-900 dark:text-white font-bold">500+ developers</span> already tracking
+            </p>
+          </motion.div>
     <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 */}

src/components/HowItWorks.tsx

@@ -1,3 +1,5 @@
+import { motion } from 'framer-motion';
+import { Search, LineChart, PieChart } from 'lucide-react';
 import { useContext } from 'react';
 import { ArrowDown, ArrowRight, BarChart3, Activity, Search } from 'lucide-react';
 import { ThemeContext } from '../context/ThemeContext';
@@ -9,20 +11,23 @@ const HowItWorks = () => {
 
   const steps = [
     {
-      number: 1,
+      icon: Search,
       title: 'Search Users',
+      description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard with one click.'
       description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard.',
       icon: Search,
     },
     {
-      number: 2,
+      icon: LineChart,
       title: 'Monitor Activity',
+      description: 'Watch real-time insights of commits, pull requests, issues, and other GitHub activities across multiple users.'
       description: 'Watch insights of commits, pull requests, issues, and other GitHub activities.',
       icon: Activity,
     },
     {
-      number: 3,
+      icon: PieChart,
       title: 'Analyze Insights',
+      description: 'Review detailed analytics, export professional reports, and gain valuable insights into development patterns.'
       description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.',
       icon: BarChart3,
     }
@@ -43,15 +48,60 @@ const HowItWorks = () => {
     : 'how-it-works-flow-line light';
 
   return (
+    <section id="how-it-works" className="px-6 py-24 bg-gray-50 dark:bg-dark-lighter transition-colors duration-300 relative overflow-hidden">
+      <div className="max-w-7xl mx-auto relative z-10">
+        <div className="text-center mb-16">
+          <motion.h2 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4 tracking-tight"
+          >
+            How It Works
+          </motion.h2>
+          <motion.p 
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="text-lg md:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
+          >
     <section id="how-it-works" className={`relative overflow-hidden px-6 py-20 ${sectionBgClass}`}>
       <div className="mx-auto max-w-7xl">
         <div className="text-center mb-16">
           <h2 className={`text-3xl md:text-4xl font-bold mb-4 ${titleTextClass}`}>How It Works</h2>
           <p className={`text-lg md:text-xl max-w-2xl mx-auto ${bodyTextClass}`}>
             Get started in minutes with our simple three-step process
-          </p>
+          </motion.p>
         </div>
 
+        <div className="grid md:grid-cols-3 gap-12">
+          {steps.map((step, index) => {
+            const IconComponent = step.icon;
+            return (
+              <motion.div 
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: index * 0.1 }}
+                className="text-center group"
+              >
+                <div className="relative mb-8">
+                  <div className="bg-blue-600 text-white w-20 h-20 rounded-3xl flex items-center justify-center mx-auto text-3xl font-bold shadow-xl shadow-blue-500/20 group-hover:rotate-6 transition-transform duration-300">
+                    <IconComponent className="h-10 w-10" />
+                  </div>
+                  {index < steps.length - 1 && (
+                    <div className="hidden lg:block absolute top-10 left-[calc(50%+60px)] w-[calc(100%-120px)] h-0.5 bg-gradient-to-r from-blue-200 to-transparent dark:from-blue-900"></div>
+                  )}
+                </div>
+                <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">{step.title}</h3>
+                <p className="text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs mx-auto">
+                  {step.description}
+                </p>
+              </motion.div>
+            );
+          })}
         <div className="relative">
           <div className="pointer-events-none absolute left-0 right-0 top-28 hidden md:block">
             <div className="relative mx-auto h-10 max-w-6xl">