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

src/App.tsx

@@ -13,7 +13,7 @@ function App() {
 
         <Navbar />
 
-        <main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
+        <main className="flex-grow bg-white dark:bg-dark flex justify-center items-center">
           <Router />
         </main>
 
@@ -25,7 +25,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,77 +1,124 @@
 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: 'Comprehensive charts and graphs showing commit patterns, contribution streaks, and repository activity over time.',
-      bgColor: 'bg-blue-100',
-      iconColor: 'text-blue-600'
+      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'
     },
     {
       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'
+      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'
     },
     {
       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'
+      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'
     },
     {
       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'
+      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 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'
+      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: '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'
+      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'
     }
   ];
 
+  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 (
-              <div key={index} className="bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl hover:shadow-lg transition-all duration-300">
-                <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}`} />
+              <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-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-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">
                   {feature.description}
                 </p>
-              </div>
+              </motion.div>
             );
           })}
-        </div>
+        </motion.div>
       </div>
     </section>
   );

src/components/Footer.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 function Footer() {
   return (
-    <footer className="dark:text-white bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 py-2 px-6 transition-colors duration-300">
+    <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">

src/components/Hero.tsx

@@ -1,30 +1,86 @@
-import { Search } from 'lucide-react';
+import { Search, ArrowRight, Sparkles } from 'lucide-react';
 import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
 
 const Hero = () => {
   return (
-    <section className="relative bg-gradient-to-br px-6 py-10">
-      <div className="max-w-7xl mx-auto">
+    <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">
-          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
+          <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-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">
+            <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 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">
+            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" />
-              <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>*/}
-          </div>
+              <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>
         </div>
       </div>
     </section>

src/components/HowItWorks.tsx

@@ -1,45 +1,75 @@
+import { motion } from 'framer-motion';
+import { Search, LineChart, PieChart } from 'lucide-react';
 
 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.'
+      description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard with one click.'
     },
     {
-      number: 2,
+      icon: LineChart,
       title: 'Monitor Activity',
-      description: 'Watch insights of commits, pull requests, issues, and other GitHub activities.'
+      description: 'Watch real-time insights of commits, pull requests, issues, and other GitHub activities across multiple users.'
     },
     {
-      number: 3,
+      icon: PieChart,
       title: 'Analyze Insights',
-      description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.'
+      description: 'Review detailed analytics, export professional reports, and gain valuable insights into development patterns.'
     }
   ];
 
   return (
-    <section id="how-it-works" className="px-6 py-10 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
-      <div className="mx-auto">
+    <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">
-          <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">How It Works</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"
+          >
+            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"
+          >
             Get started in minutes with our simple three-step process
-          </p>
+          </motion.p>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-8">
-          {steps.map((step, index) => (
-            <div key={index} className="text-center">
-              <div className="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">
-                {step.number}
-              </div>
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">{step.title}</h3>
-              <p className="text-gray-600 dark:text-gray-300 leading-relaxed">
-                {step.description}
-              </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>
       </div>
     </section>