From 4dbb638b1ef5b3caadb75e1bb31a1974ce7daa96 Mon Sep 17 00:00:00 2001
From: ankitsunil530 <22bcs244@iiitdmj.ac.in>
Date: Mon, 21 Oct 2024 00:11:11 +0530
Subject: [PATCH] UI changes

---
 index.html                          |   4 +-
 package-lock.json                   | 188 +++++++++++++++++++++++++---
 package.json                        |   3 +-
 src/components/shared/Nav.css       |  13 ++
 src/components/shared/Navbar.jsx    |  74 ++++++-----
 src/css/Auth.css                    |   2 +-
 src/css/ChanakyaGpt.css             |   3 +
 src/pages/auth/Login.jsx            |  15 ++-
 src/pages/auth/SignUp.jsx           |  13 +-
 src/pages/resources/ChanakyaGpt.jsx |  56 +++++----
 10 files changed, 290 insertions(+), 81 deletions(-)
 create mode 100644 src/components/shared/Nav.css
 create mode 100644 src/css/ChanakyaGpt.css

diff --git a/index.html b/index.html
index 3e2477b..d8a726b 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,9 @@
 
   <title>Chanakya Niti - A website of Aacharya Chanakya's life style</title>
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+  
   <script type="application/ld+json">
     {
       "@context": "https://schema.org",
diff --git a/package-lock.json b/package-lock.json
index 8c6cc89..8da4f9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,12 +17,13 @@
         "dotenv": "^16.4.5",
         "groq-sdk": "^0.5.0",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.10.5",
         "react-dom": "^18.2.0",
         "react-icons": "^5.2.1",
         "react-loader-spinner": "^6.1.6",
         "react-parallax-tilt": "^1.7.229",
         "react-player": "^2.16.0",
-        "react-router-dom": "^6.23.1",
+        "react-router-dom": "^6.27.0",
         "react-spinners": "^0.14.1",
         "react-top-loading-bar": "^2.3.1",
         "react-typed": "^2.0.12"
@@ -334,9 +335,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
-      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
+      "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1369,14 +1370,67 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.6.tgz",
+      "integrity": "sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@remix-run/router": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
-      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
       "engines": {
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.8.0.tgz",
+      "integrity": "sha512-xJEOXUOTmT4FngTmhdjKFRrVVF0hwCLNPdatLCHkyS4dkiSK12cEu1Y0fjxktjJrdst9jJIc5J6ihMJCoWEN/g==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.22.5",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz",
@@ -1585,6 +1639,14 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
+      "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1696,6 +1758,11 @@
       "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
       "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -2105,6 +2172,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -2403,6 +2475,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -3442,6 +3522,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -4335,6 +4423,18 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -4380,6 +4480,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.5",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.5.tgz",
+      "integrity": "sha512-XueAOEn64RRkZ0s6yzUTdpFtdUXs5L5491QU//8ZcODKJNDLt/r01tNyriZccjgRImH1REynUc9pqjiRMpDLWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.9",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4410,6 +4539,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-loader-spinner": {
       "version": "6.1.6",
       "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz",
@@ -4465,11 +4599,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
-      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
       "dependencies": {
-        "@remix-run/router": "1.16.1"
+        "@remix-run/router": "1.20.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -4479,12 +4613,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
-      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
       "dependencies": {
-        "@remix-run/router": "1.16.1",
-        "react-router": "6.23.1"
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -5158,6 +5292,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -5289,6 +5437,14 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
diff --git a/package.json b/package.json
index 547ece7..9e43cbf 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,13 @@
     "dotenv": "^16.4.5",
     "groq-sdk": "^0.5.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.5",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-loader-spinner": "^6.1.6",
     "react-parallax-tilt": "^1.7.229",
     "react-player": "^2.16.0",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.27.0",
     "react-spinners": "^0.14.1",
     "react-top-loading-bar": "^2.3.1",
     "react-typed": "^2.0.12"
diff --git a/src/components/shared/Nav.css b/src/components/shared/Nav.css
new file mode 100644
index 0000000..2785773
--- /dev/null
+++ b/src/components/shared/Nav.css
@@ -0,0 +1,13 @@
+.nav-link:hover {
+    color: #ff8800;
+    font-weight: bold;
+}
+.nav-link.active {
+    color: #ff5500;
+    font-weight: bold;
+    border-bottom: 2px solid #ff5500;
+}
+.dropdown-item:hover {
+    background-color: rgba(255, 136, 0, 0.2);
+    color: #ff8800;
+}
\ No newline at end of file
diff --git a/src/components/shared/Navbar.jsx b/src/components/shared/Navbar.jsx
index b2698d0..f3aa947 100644
--- a/src/components/shared/Navbar.jsx
+++ b/src/components/shared/Navbar.jsx
@@ -1,15 +1,15 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, NavLink } from 'react-router-dom';
 import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
 import { Collapse } from 'bootstrap'; // Ensure Bootstrap's JavaScript is loaded in your project
 import { Context } from '../../context/Context';
-
+import './Nav.css';
 const Navbar = () => {
   const { isDarkMode, toggleTheme } = useContext(Context);
   const [isSticky, setIsSticky] = useState(false);
-
+ 
   const handleScroll = () => {
-    setIsSticky(window.scrollY > 50);
+    setIsSticky(window.scrollY > -10);
   };
 
   useEffect(() => {
@@ -42,10 +42,10 @@ const Navbar = () => {
 
   return (
     <nav
-      className={`navbar navbar-expand-lg ${isSticky ? 'mt-2 fixed-top' : ''} ${isDarkMode ? 'navbar-dark' : 'navbar-light'}`}
+      className={`navbar navbar-expand-lg ${isSticky ? 'fixed-top' : ''} ${isDarkMode ? 'navbar-dark' : 'navbar-light'}`}
       style={{ backgroundColor: `${isDarkMode ? 'rgba(0, 0, 0, 0.4)' : 'rgba(223, 223, 176, 0.4)'}` }}
     >
-      <div className="container-fluid">
+      <div className="container-fluid bg-transparent">
         <Link className="navbar-brand d-flex align-items-center px-4" to="/">
           <img src="logo.webp" alt="Chanakya Image" className="me-2" style={{ width: '30px', height: '30px' }} />
           <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>चाणक्य नीति</span>
@@ -65,31 +65,47 @@ const Navbar = () => {
 
         <div className="collapse navbar-collapse" id="navbarSupportedContent">
           <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
-            <li className="nav-item"><Link className="nav-link" to="/about">About</Link></li>
+          <li className="nav-item"><NavLink className={({isActive})=>isActive ? 'nav-link active font-bold':'nav-link'} to="/">Home</NavLink></li>
+            <li className="nav-item"><NavLink className={({isActive})=> isActive ? 'nav-link active': 'nav-link'} to="/about">About</NavLink></li>
+            <div>
+              <li className="nav-item dropdown ">
+                <Link
+                  className="nav-link dropdown-toggle"
+                  to="/"
+                  id="navbarDropdown"
+                  role="button"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  Resources
+                </Link>
+                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
+                  <li>
+                    <Link className="dropdown-item" to="/resources/chanakyagpt">ChanakyaGpt</Link>
+                  </li>
+                  <li>
+                    <Link className="dropdown-item" to="/resources/audio">Audios</Link>
+                  </li>
+                  <li>
+                    <Link className="dropdown-item" to="/resources/book">Books</Link>
+                  </li>
+                  <li>
+                    <Link className="dropdown-item" to="/resources/news">News</Link>
+                  </li>
+                  <li>
+                    <Link className="dropdown-item" to="/resources/quiz">Quiz</Link>
+                  </li>
+                  <li>
+                    <Link className="dropdown-item" to="/resources/video">Videos</Link>
+                  </li>
+                </ul>
+              </li>
+            </div>
+
 
-            <li className="nav-item dropdown">
-              <Link
-                className="nav-link dropdown-toggle"
-                to="#"
-                id="navbarDropdown"
-                role="button"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                Resources
-              </Link>
-              <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
-                <li><Link className="dropdown-item" to="/resources/chanakyagpt">ChanakyaGpt</Link></li>
-                <li><Link className="dropdown-item" to="/resources/audio">Audios</Link></li>
-                <li><Link className="dropdown-item" to="/resources/book">Books</Link></li>
-                <li><Link className="dropdown-item" to="/resources/news">News</Link></li>
-                <li><Link className="dropdown-item" to="/resources/quiz">Quiz</Link></li>
-                <li><Link className="dropdown-item" to="/resources/video">Videos</Link></li>
-              </ul>
-            </li>
 
-            <li className="nav-item"><Link className="nav-link" to="/contributor">Contributors</Link></li>
-            <li className="nav-item"><Link className="nav-link" to="/auth/login">Login</Link></li>
+            <li className="nav-item"><NavLink className={({isActive})=>isActive ? 'nav-link active font-bold':'nav-link'} to="/contributor">Contributors</NavLink></li>
+            <li className="nav-item"><NavLink className={({isActive})=>isActive ? 'nav-link active':'nav-link'} to="/auth/login">Login</NavLink></li>
 
             <li className="nav-item nav-link px-4" onClick={toggleTheme} style={{ cursor: 'pointer' }}>
               {isDarkMode ? (
diff --git a/src/css/Auth.css b/src/css/Auth.css
index c0e3786..3c80ff8 100644
--- a/src/css/Auth.css
+++ b/src/css/Auth.css
@@ -2,7 +2,7 @@
   width: auto;
   max-width: 500px;
   border-radius: 0.75rem;
-  background-color: rgba(17, 24, 39, 1);
+  background-color: rgba(87, 78, 130, 0.878);
   padding: 2rem;
   color: rgba(243, 244, 246, 1);
   margin: auto;
diff --git a/src/css/ChanakyaGpt.css b/src/css/ChanakyaGpt.css
new file mode 100644
index 0000000..b90efc2
--- /dev/null
+++ b/src/css/ChanakyaGpt.css
@@ -0,0 +1,3 @@
+.container{
+    
+}
\ No newline at end of file
diff --git a/src/pages/auth/Login.jsx b/src/pages/auth/Login.jsx
index 33bb40c..3169e8f 100644
--- a/src/pages/auth/Login.jsx
+++ b/src/pages/auth/Login.jsx
@@ -31,7 +31,7 @@ const Login = () => {
 	};
 
 	return (
-		<div className="form-container mb-4">
+		<div className="form-container mb-4 ">
 			<p className="title">Login</p>
 
 			<form className="form" onSubmit={handleSubmit}>
@@ -72,11 +72,18 @@ const Login = () => {
 			</div>
 
 			<div className="social-icons">
-				<button aria-label="Log in with Google" className="icon"><FaGoogle /></button>
-				<button aria-label="Log in with Twitter" className="icon"><FaTwitter /></button>
-				<button aria-label="Log in with GitHub" className="icon"><FaGithub /></button>
+				<a aria-label="Log in with Google" className="icon" href="https://accounts.google.com/signin" target="_blank" rel="noopener noreferrer">
+					<FaGoogle />
+				</a>
+				<a aria-label="Log in with Twitter" className="icon" href="https://twitter.com/login" target="_blank" rel="noopener noreferrer">
+					<FaTwitter />
+				</a>
+				<a aria-label="Log in with GitHub" className="icon" href="https://github.com/login" target="_blank" rel="noopener noreferrer">
+					<FaGithub />
+				</a>
 			</div>
 
+
 			<p className="signup">Don't have an account?
 				<a rel="noopener noreferrer" href="/auth/signup"> Sign up</a>
 			</p>
diff --git a/src/pages/auth/SignUp.jsx b/src/pages/auth/SignUp.jsx
index 52cf65c..d865f2b 100644
--- a/src/pages/auth/SignUp.jsx
+++ b/src/pages/auth/SignUp.jsx
@@ -71,11 +71,18 @@ const SignUp = () => {
 			</div>
 
 			<div className="social-icons">
-				<button aria-label="Sign up with Google" className="icon"><FaGoogle /></button>
-				<button aria-label="Sign up with Twitter" className="icon"><FaTwitter /></button>
-				<button aria-label="Sign up with GitHub" className="icon"><FaGithub /></button>
+				<a aria-label="Log in with Google" className="icon" href="https://accounts.google.com/signin" target="_blank" rel="noopener noreferrer">
+					<FaGoogle />
+				</a>
+				<a aria-label="Log in with Twitter" className="icon" href="https://twitter.com/login" target="_blank" rel="noopener noreferrer">
+					<FaTwitter />
+				</a>
+				<a aria-label="Log in with GitHub" className="icon" href="https://github.com/login" target="_blank" rel="noopener noreferrer">
+					<FaGithub />
+				</a>
 			</div>
 
+
 		</div>
 	)
 }
diff --git a/src/pages/resources/ChanakyaGpt.jsx b/src/pages/resources/ChanakyaGpt.jsx
index 122d5b5..d1340e1 100644
--- a/src/pages/resources/ChanakyaGpt.jsx
+++ b/src/pages/resources/ChanakyaGpt.jsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
 import Groq from 'groq-sdk';
 import { ClipLoader } from "react-spinners";
-
+import '../../css/ChanakyaGpt.css';
 const groq = new Groq({
-    apiKey : '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',
-    dangerouslyAllowBrowser : true
+  apiKey: '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',
+  dangerouslyAllowBrowser: true
 })
 
 const ChanakyaGpt = () => {
@@ -20,41 +20,45 @@ const ChanakyaGpt = () => {
       setLoader(true);
       const response = await groq.chat.completions.create({
         messages: [
-            {
-                role: "user",
-                content: `
+          {
+            role: "user",
+            content: `
                 Answer this question as if you are chanakya and the question is :
                     ${prompt}
                 `
-            }
+          }
         ],
         model: "llama3-8b-8192"
-    });
-    setLoader(false);
-    console.log(response.choices[0]?.message?.content || '');
-    setResponse(response.choices[0]?.message?.content);
-    } catch(error){
+      });
+      setLoader(false);
+      console.log(response.choices[0]?.message?.content || '');
+      setResponse(response.choices[0]?.message?.content);
+    } catch (error) {
       console.log("Error occured")
     }
     setPrompt('');
   }
 
   return (
-    <div className="font-bold flex w-screen items-center rounded-lg m-2">
-            <form onSubmit={e => handleSubmit(e)} className="shadow-md p-10">
-                <div className="flex flex-col gap-7">
-                    <h1 className="text-3xl font-semibold">Ask your questions</h1>
-                    <div className="flex flex-col justify-center items-center">
-                      <input onChange={e => setPrompt(e.target.value)} value={prompt} type="text" placeholder="type something..." className="w-screen text-xl font-normal border-gray-300 rounded-lg border-2 p-2"/>
-                      {loader ? <button className="text-white w-full bg-white mt-2 p-2 rounded-md cursor-pointer"><ClipLoader /></button> :<button className="text-white w-full bg-black mt-2 p-2 rounded-md cursor-pointer">Search</button>}
-                    </div> 
-                </div>
-                <div className="font-normal mt-2">
-                {response && <>
-                    {response}</>}
-                </div>
-            </form>
+    <div className="container d-flex justify-content-center align-items-center min-vh-100">
+  <div className="row w-100 justify-content-center rounded-lg">
+    <form onSubmit={e => handleSubmit(e)} className="col-md-6 p-4 shadow-md  rounded-xl bg-secondary">
+      <div className="flex flex-col gap-4">
+        <h1 className="text-3xl font-semibold text-center">Ask your questions</h1>
+        <div className="d-flex flex-column justify-content-center align-items-center">
+          <input onChange={e => setPrompt(e.target.value)} value={prompt} type="text" placeholder="Type something..." className="form-control text-xl font-normal border-gray-300 rounded-lg mb-3 p-2" />
+          {loader ? 
+            <button className="btn btn-light w-100 mt-2 p-2 rounded-md" disabled><ClipLoader /></button> : 
+            <button className="btn btn-dark w-100 mt-2 p-2 rounded-md">Search</button>}
         </div>
+      </div>
+      <div className="font-normal mt-3">
+        {response && <>{response}</>}
+      </div>
+    </form>
+  </div>
+</div>
+
   )
 }