From b2fce9e9b97bae8ccdca21bff57b91063b108a70 Mon Sep 17 00:00:00 2001
From: Pheonix <150040105+ArshiBansal@users.noreply.github.com>
Date: Sun, 17 May 2026 15:38:10 +0530
Subject: [PATCH] updated footer with better ui/ux

---
 src/components/Footer.tsx | 105 ++++++++++++++++++++++++++++++--------
 1 file changed, 85 insertions(+), 20 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 878366f..e815bc1 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,36 +1,101 @@
-import { FaGithub } from 'react-icons/fa';
+import { FaGithub, FaEnvelope, FaInfoCircle, FaHeart } from 'react-icons/fa';
 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">
-      <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">
+    <footer className="bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-950 border-t border-gray-200/70 dark:border-gray-800/70 text-gray-700 dark:text-gray-300 transition-colors duration-300">
+      <div className="max-w-7xl mx-auto px-6 py-10">
+        {/* Top Section */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
+          {/* Brand Section */}
+          <div className="space-y-3">
             <a
-                href="https://github.com/GitMetricsLab/github_tracker"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center hover:text-gray-300 transition-colors"
+              href="https://github.com/GitMetricsLab/github_tracker"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-3 text-xl font-bold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
             >
-                <FaGithub className="h-5 w-5 mr-1" />
-                GitHub Tracker
+              <div className="p-2 rounded-xl bg-gray-100 dark:bg-gray-800 shadow-sm">
+                <FaGithub className="h-5 w-5" />
+              </div>
+              GitHub Tracker
             </a>
+
+            <p className="text-sm leading-6 text-gray-600 dark:text-gray-400 max-w-sm">
+              Track repositories, analyze contributions, and explore GitHub
+              insights with a clean and intuitive interface.
+            </p>
           </div>
-          <div className="flex space-x-6 text-gray-600 dark:text-gray-300">
-            <Link to='/contact' className="hover:text-gray-900 dark:hover:text-white transition-colors">Contact Us</Link>
-            <Link to='/about' className="hover:text-gray-900 dark:hover:text-white transition-colors">About</Link>
+
+          {/* Navigation Links */}
+          <div className="space-y-3">
+            <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-900 dark:text-white">
+              Quick Links
+            </h3>
+
+            <div className="flex flex-col space-y-2">
+              <Link
+                to="/contact"
+                className="inline-flex items-center gap-2 text-sm hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+              >
+                <FaEnvelope className="h-3.5 w-3.5" />
+                Contact Us
+              </Link>
+
+              <Link
+                to="/about"
+                className="inline-flex items-center gap-2 text-sm hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+              >
+                <FaInfoCircle className="h-3.5 w-3.5" />
+                About
+              </Link>
+            </div>
           </div>
-        </div>
-        <div className="p-2 border-t border-gray-200 dark:border-gray-800 text-center text-gray-600 dark:text-gray-400">
-            <p className="text-xs md:text-sm font-semibold">
-                &copy; {new Date().getFullYear()}{" "}
-                <span className="font-semibold">GitHub Tracker</span>. All rights reserved.
+
+          {/* Social Section */}
+          <div className="space-y-3 md:text-right">
+            <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-900 dark:text-white">
+              Connect
+            </h3>
+
+            <div className="flex md:justify-end">
+              <a
+                href="https://github.com/GitMetricsLab/github_tracker"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="GitHub Repository"
+                className="group inline-flex items-center justify-center h-11 w-11 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/40 text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 shadow-sm transition-all duration-300 hover:scale-105"
+              >
+                <FaGithub className="h-5 w-5" />
+              </a>
+            </div>
+
+            <p className="text-xs text-gray-500 dark:text-gray-500">
+              Open source and community-driven.
             </p>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="my-8 h-px bg-gradient-to-r from-transparent via-gray-300 dark:via-gray-700 to-transparent" />
+
+        {/* Bottom Section */}
+        <div className="flex flex-col md:flex-row items-center justify-between gap-3 text-sm">
+          <p className="text-gray-500 dark:text-gray-400 text-center md:text-left">
+            &copy; {new Date().getFullYear()}{' '}
+            <span className="font-semibold text-gray-900 dark:text-white">
+              GitHub Tracker
+            </span>
+            . All rights reserved.
+          </p>
+
+          <p className="flex items-center gap-1 text-gray-500 dark:text-gray-400">
+            Made with <FaHeart className="h-3 w-3 text-red-500" /> for developers
+          </p>
         </div>
       </div>
     </footer>
   );
 }
 
-export default Footer;
+export default Footer;
\ No newline at end of file