From be411ce3195149d100e275d780c7f5757ea2a962 Mon Sep 17 00:00:00 2001
From: bbcoder2005 <bcbeereshkumar@gmail.com>
Date: Mon, 28 Jul 2025 23:46:50 +0530
Subject: [PATCH] Improving UIUX of a About page

---
 backend/.env.example      |   3 -
 backend/server.js         |  43 +++++++------
 src/assets/git_icon.png   | Bin 0 -> 6026 bytes
 src/components/Navbar.tsx | 129 ++++++++++++++------------------------
 src/pages/About/About.tsx |  85 ++++++++++++++-----------
 src/pages/Home/Home.tsx   |   3 +-
 6 files changed, 122 insertions(+), 141 deletions(-)
 delete mode 100644 backend/.env.example
 create mode 100644 src/assets/git_icon.png

diff --git a/backend/.env.example b/backend/.env.example
deleted file mode 100644
index 98f9688..0000000
--- a/backend/.env.example
+++ /dev/null
@@ -1,3 +0,0 @@
-PORT=5000
-MONGO_URI=mongodb://localhost:27017/githubTracker
-SESSION_SECRET=your-secret-key
diff --git a/backend/server.js b/backend/server.js
index 3f19f00..4aa453d 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -1,39 +1,44 @@
-const express = require('express');
-const mongoose = require('mongoose');
-const session = require('express-session');
-const passport = require('passport');
-const bodyParser = require('body-parser');
-require('dotenv').config();
-const cors = require('cors');
+const express = require("express");
+const mongoose = require("mongoose");
+const session = require("express-session");
+const passport = require("passport");
+const bodyParser = require("body-parser");
+require("dotenv").config();
+const cors = require("cors");
 
 // Passport configuration
-require('./config/passportConfig');
+require("./config/passportConfig");
 
 const app = express();
 
 // CORS configuration
-app.use(cors('*'));
+app.use(cors("*"));
 
 // Middleware
 app.use(bodyParser.json());
-app.use(session({
+app.use(
+  session({
     secret: process.env.SESSION_SECRET,
     resave: false,
     saveUninitialized: false,
-}));
+  })
+);
 app.use(passport.initialize());
 app.use(passport.session());
 
 // Routes
-const authRoutes = require('./routes/auth');
-app.use('/api/auth', authRoutes);
+const authRoutes = require("./routes/auth");
+app.use("/api/auth", authRoutes);
 
 // Connect to MongoDB
-mongoose.connect(process.env.MONGO_URI, {}).then(() => {
-    console.log('Connected to MongoDB');
+mongoose
+  .connect(process.env.MONGO_URI, {})
+  .then(() => {
+    console.log("Connected to MongoDB");
     app.listen(process.env.PORT, () => {
-        console.log(`Server running on port ${process.env.PORT}`);
+      console.log(`Server running on port ${process.env.PORT}`);
     });
-}).catch((err) => {
-    console.log('MongoDB connection error:', err);
-});
+  })
+  .catch((err) => {
+    console.log("MongoDB connection error:", err);
+  });
diff --git a/src/assets/git_icon.png b/src/assets/git_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fac8ff1911f0776a73e2afe621ccfe4c4ae14077
GIT binary patch
literal 6026
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

literal 0
HcmV?d00001

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index bf67ba3..8d61b06 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -10,127 +10,92 @@ const Navbar: React.FC = () => {
   const { toggleTheme, mode } = themeContext;
 
   return (
-    <nav className="bg-white text-black dark:bg-gray-800 dark:text-white shadow-lg">
+    <nav className="bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900 text-black dark:text-white border-b-2 border-blue-300 shadow-lg">
+      {/* Top Nav */}
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
-        {/* Logo Section */}
+        {/* Logo */}
         <Link
           to="/"
-          className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
+          className="text-2xl font-bold hover:text-gray-500 dark:hover:text-gray-300 flex items-center"
         >
           <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
           GitHub Tracker
         </Link>
 
         {/* Desktop Links */}
-        <div className="hidden md:flex space-x-6">
-          <Link
-            to="/"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Home
-          </Link>
-          <Link
-            to="/about"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            About
-          </Link>
-          <Link
-            to="/contact"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Contact
-          </Link>
-          <Link
-            to="/contributors"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Contributors
-          </Link>
-          <Link
-            to="/login"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Login
-          </Link>
+        <div className="hidden md:flex space-x-6 items-center">
+          {["/", "/about", "/contact", "/contributors", "/login"].map((path, idx) => {
+            const labels = ["Home", "About", "Contact", "Contributors", "Login"];
+            return (
+              <Link
+                key={path}
+                to={path}
+                className="text-lg font-medium hover:text-gray-600 dark:hover:text-gray-300 transition px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+              >
+                {labels[idx]}
+              </Link>
+            );
+          })}
+
+          {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
-            className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
+            className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 dark:border-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 transition duration-200"
           >
             {mode === "dark" ? "🌞 Light" : "🌙 Dark"}
           </button>
         </div>
 
-        {/* Mobile Menu Button */}
+        {/* Mobile Hamburger */}
         <div className="md:hidden">
           <button
             onClick={() => setIsOpen(!isOpen)}
-            className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
+            className="w-8 h-8 flex flex-col justify-between items-center focus:outline-none"
           >
             <span
-              className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-transform duration-300 ${
                 isOpen ? "rotate-45 translate-y-2" : ""
               }`}
-            ></span>
+            />
             <span
-              className={`block h-[3px] w-full bg-white rounded-lg transition-opacity duration-300 ${
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-opacity duration-300 ${
                 isOpen ? "opacity-0" : ""
               }`}
-            ></span>
+            />
             <span
-              className={`block h-[3px] w-full bg-white rounded-lg transition-transform duration-300 ${
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded transition-transform duration-300 ${
                 isOpen ? "-rotate-45 -translate-y-2" : ""
               }`}
-            ></span>
+            />
           </button>
         </div>
       </div>
 
-      {/* Mobile Links */}
+      {/* Mobile Dropdown Menu */}
       {isOpen && (
-        <div className="md:hidden bg-gray-800">
-          <div className="space-y-4 px-6 py-4">
-            <Link
-              to="/home"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Home
-            </Link>
-            <Link
-              to="/about"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              About
-            </Link>
-            <Link
-              to="/contact"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Contact
-            </Link>
-            <Link
-              to="/contributors"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Contributors
-            </Link>
-            <Link
-              to="/login"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Login
-            </Link>
+        <div className="md:hidden bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900 text-black dark:text-white">
+          <div className="space-y-4 px-6 py-6">
+            {["/", "/about", "/contact", "/contributors", "/login"].map((path, idx) => {
+              const labels = ["Home", "About", "Contact", "Contributors", "Login"];
+              return (
+                <Link
+                  key={path}
+                  to={path}
+                  onClick={() => setIsOpen(false)}
+                  className="block text-lg font-medium hover:text-gray-700 dark:hover:text-gray-300 transition px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+                >
+                  {labels[idx]}
+                </Link>
+              );
+            })}
+
+            {/* Theme Toggle */}
             <button
               onClick={() => {
                 toggleTheme();
                 setIsOpen(false);
               }}
-              className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200 w-full text-left"
+              className="text-sm font-semibold px-3 py-1 w-xl text-left rounded border border-gray-500 dark:border-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 transition duration-200"
             >
               {mode === "dark" ? "🌞 Light" : "🌙 Dark"}
             </button>
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
index e6713a8..38c8d09 100644
--- a/src/pages/About/About.tsx
+++ b/src/pages/About/About.tsx
@@ -1,48 +1,61 @@
 const About = () => {
   return (
-    <div className="about-container">
-      {/* Hero Section */}
-      <section className="hero bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 py-12 px-4">
-        <h1 className="text-4xl font-bold text-center">About Us</h1>
-        <p className="text-lg text-center mt-4">
-          Welcome to GitHub Tracker! We simplify issue tracking for developers.
-        </p>
-      </section>
+    <div className="about-container w-full bg-gradient-to-br from-indigo-100 to-slate-100 dark:from-blue-950 dark:to-gray-900">
+      {/* Main Flex Wrapper */}
+      <div className="flex flex-col lg:flex-row mt-8 items-center justify-around gap-8 px-4">
+        {/* Image Section */}
+        <div className="border p-10 sm:p-14 border-indigo-400 rounded-lg shadow-lg hover:scale-105 duration-300 transition-all">
+          <img className="w-32 sm:w-64 max-w-full h-auto" src="/crl-icon.png" alt="Logo" />
+        </div>
 
-      {/* Mission Section */}
-      <section className="mission py-12 text-gray-800 dark:text-gray-100 px-4">
-        <h2 className="text-3xl font-semibold text-center">Our Mission</h2>
-        <p className="text-lg text-center mt-4 max-w-3xl mx-auto">
-          We aim to provide an efficient and user-friendly way to track GitHub
-          issues and pull requests. Our goal is to make it easy for developers to
-          stay organized and focused on their projects without getting bogged down
-          by the details.
-        </p>
-      </section>
+        {/* About & Mission Sections */}
+        <div className="w-full lg:w-2/3">
+          <section className="hero text-gray-900 dark:text-white py-10 sm:py-16 px-4 md:px-12 text-center">
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold">About Us</h1>
+            <p className="mt-6 max-w-3xl mx-auto text-base md:text-lg leading-relaxed border border-gray-300 dark:border-gray-600 px-6 py-4 rounded-lg hover:scale-105 transition-all duration-300 shadow-md dark:shadow-gray-800">
+              Welcome to <span className="font-semibold text-indigo-600 dark:text-indigo-400">GitHub Tracker</span>! 
+              We simplify issue tracking for developers with clean design and powerful tools.
+            </p>
+          </section>
+
+          <section className="mission py-10 sm:py-16 px-4 md:px-12 text-center text-gray-800 dark:text-white">
+            <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold">Our Mission</h2>
+            <p className="mt-6 max-w-3xl mx-auto text-base md:text-lg leading-relaxed border border-gray-300 dark:border-gray-600 px-6 py-4 rounded-lg hover:scale-105 transition-all duration-300 shadow-md dark:shadow-gray-800">
+              We aim to provide an efficient and user-friendly way to track GitHub issues and pull requests. 
+              Our goal is to keep developers focused and organized without the hassle.
+            </p>
+          </section>
+        </div>
+      </div>
 
       {/* Features Section */}
-      <section className="features bg-gray-100 dark:bg-gray-800 py-12 text-gray-800 dark:text-gray-100 px-4">
-        <h2 className="text-3xl font-semibold text-center">What We Do</h2>
-        <div className="flex justify-around mt-8 flex-wrap gap-8">
-          <div className="feature-item text-center max-w-xs">
-            <div className="feature-icon text-4xl">🔍</div>
-            <h3 className="font-semibold mt-4">Simple Issue Tracking</h3>
-            <p className="text-lg mt-2 dark:text-gray-300">
-              Track your GitHub issues seamlessly with intuitive filters and search options.
+      <section className="features py-10 sm:py-16 px-4 md:px-12">
+        <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center text-gray-800 dark:text-white">What We Do</h2>
+        <div className="mt-10 flex flex-col md:flex-row justify-center items-stretch gap-10">
+          {/* Feature 1 */}
+          <div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900 dark:to-pink-900 transition-all duration-300 shadow-md dark:shadow-lg">
+            <div className="text-5xl mb-4">🔍</div>
+            <h3 className="text-xl font-semibold dark:text-white">Simple Issue Tracking</h3>
+            <p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
+              Track GitHub issues with intuitive filters and fast search tools.
             </p>
           </div>
-          <div className="feature-item text-center max-w-xs">
-            <div className="feature-icon text-4xl">👥</div>
-            <h3 className="font-semibold mt-4">Team Collaboration</h3>
-            <p className="text-lg mt-2 dark:text-gray-300">
-              Collaborate with your team in real-time, manage issues and pull requests effectively.
+
+          {/* Feature 2 */}
+          <div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-green-100 to-yellow-100 dark:from-green-900 dark:to-yellow-900 transition-all duration-300 shadow-md dark:shadow-lg">
+            <div className="text-5xl mb-4">👥</div>
+            <h3 className="text-xl font-semibold dark:text-white">Team Collaboration</h3>
+            <p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
+              Collaborate in real-time with your team and manage pull requests effectively.
             </p>
           </div>
-          <div className="feature-item text-center max-w-xs">
-            <div className="feature-icon text-4xl">⚙️</div>
-            <h3 className="font-semibold mt-4">Customizable Settings</h3>
-            <p className="text-lg mt-2 dark:text-gray-300">
-              Customize your issue tracking workflow to match your team's needs.
+
+          {/* Feature 3 */}
+          <div className="feature-item flex-1 max-w-sm w-full mx-auto text-center border border-gray-300 dark:border-gray-700 rounded-xl p-6 hover:bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 transition-all duration-300 shadow-md dark:shadow-lg">
+            <div className="text-5xl mb-4">⚙️</div>
+            <h3 className="text-xl font-semibold dark:text-white">Customizable Settings</h3>
+            <p className="mt-3 text-sm text-gray-700 dark:text-gray-300">
+              Tailor your workflow and preferences to fit your team’s needs and goals.
             </p>
           </div>
         </div>
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 613a32e..87b3b1e 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -132,9 +132,10 @@ const Home: React.FC = () => {
           color: theme.palette.text.primary,
         }}
       >
-        <form onSubmit={handleSubmit}>
+        <form className="" onSubmit={handleSubmit}>
           <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
             <TextField
+            className=""
               label="GitHub Username"
               value={username}
               onChange={(e) => setUsername(e.target.value)}