From 2f3edfaa59be3a1c832b84a5b4ddbe0b9a6be471 Mon Sep 17 00:00:00 2001
From: Purnavu-12 <purnasaivu0730@gmail.com>
Date: Fri, 23 Jan 2026 22:07:59 +0530
Subject: [PATCH 1/3] Level 1 of enhacement

---
 package-lock.json | 97 ++++++++++++++++-------------------------------
 1 file changed, 33 insertions(+), 64 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b5a1c009..a32e7d93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -262,6 +262,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -305,6 +306,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz",
       "integrity": "sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -387,6 +389,7 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
       "integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
       "hasInstallScript": true,
+      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "6.2.1"
       },
@@ -615,7 +618,6 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
       "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
-      "peer": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
         "@jridgewell/trace-mapping": "^0.3.9"
@@ -660,6 +662,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-2.3.0.tgz",
       "integrity": "sha512-IqsscXh7Q3Rzb+f5DXYk0HU71PK+WuFsEhf+mSV3fOhpLcEpgsHvTQ2h0T6TlZ5gHOaBeFjkXwB52by7ypMyNg==",
+      "peer": true,
       "dependencies": {
         "@mdx-js/mdx": "^2.0.0",
         "source-map": "^0.7.0"
@@ -718,6 +721,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-2.3.0.tgz",
       "integrity": "sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==",
+      "peer": true,
       "dependencies": {
         "@types/mdx": "^2.0.0",
         "@types/react": ">=16"
@@ -771,6 +775,7 @@
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.1.tgz",
       "integrity": "sha512-MFBfia6UiKxyoLeGkAh8M15bkeDmfnsUTMRJd/vTQue6YQ8AQ6lw9HqDthyYghzDEWIvZO/lQQzLrZE8XwNJLA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.26.0",
         "@mui/core-downloads-tracker": "^6.4.1",
@@ -1333,7 +1338,6 @@
       "version": "8.4.10",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.10.tgz",
       "integrity": "sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==",
-      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -1343,7 +1347,6 @@
       "version": "3.7.4",
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
       "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -1373,8 +1376,7 @@
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
-      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
-      "peer": true
+      "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -1403,8 +1405,7 @@
     "node_modules/@types/node": {
       "version": "18.11.18",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
-      "peer": true
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
@@ -1422,6 +1423,7 @@
       "version": "18.0.27",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
       "integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1552,7 +1554,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
       "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
@@ -1561,26 +1562,22 @@
     "node_modules/@webassemblyjs/floating-point-hex-parser": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==",
-      "peer": true
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz",
-      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==",
-      "peer": true
+      "integrity": "sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg=="
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz",
-      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==",
-      "peer": true
+      "integrity": "sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA=="
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz",
       "integrity": "sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -1590,14 +1587,12 @@
     "node_modules/@webassemblyjs/helper-wasm-bytecode": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz",
-      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==",
-      "peer": true
+      "integrity": "sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q=="
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz",
       "integrity": "sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -1609,7 +1604,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz",
       "integrity": "sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==",
-      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -1618,7 +1612,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.1.tgz",
       "integrity": "sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==",
-      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -1626,14 +1619,12 @@
     "node_modules/@webassemblyjs/utf8": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.1.tgz",
-      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==",
-      "peer": true
+      "integrity": "sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ=="
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz",
       "integrity": "sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -1649,7 +1640,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz",
       "integrity": "sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.11.1",
@@ -1662,7 +1652,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz",
       "integrity": "sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-buffer": "1.11.1",
@@ -1674,7 +1663,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz",
       "integrity": "sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@webassemblyjs/helper-api-error": "1.11.1",
@@ -1688,7 +1676,6 @@
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz",
       "integrity": "sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==",
-      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.11.1",
         "@xtuc/long": "4.2.2"
@@ -1697,19 +1684,18 @@
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "peer": true
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "peer": true
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "node_modules/acorn": {
       "version": "8.8.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
       "integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1721,7 +1707,6 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "peer": true,
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -1767,6 +1752,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1782,7 +1768,6 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peer": true,
       "peerDependencies": {
         "ajv": "^6.9.1"
       }
@@ -2326,6 +2311,7 @@
           "url": "https://tidelift.com/funding/github/npm/browserslist"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001400",
         "electron-to-chromium": "^1.4.251",
@@ -2342,8 +2328,7 @@
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "peer": true
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
     },
     "node_modules/builtins": {
       "version": "1.0.3",
@@ -2544,6 +2529,7 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz",
       "integrity": "sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -2592,7 +2578,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -3311,8 +3296,7 @@
     "node_modules/es-module-lexer": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz",
-      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
-      "peer": true
+      "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ=="
     },
     "node_modules/es-set-tostringtag": {
       "version": "2.0.3",
@@ -3386,6 +3370,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.26.0.tgz",
       "integrity": "sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.3.3",
         "@humanwhocodes/config-array": "^0.11.6",
@@ -3556,6 +3541,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
       "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.7",
         "array.prototype.findlastindex": "^1.2.3",
@@ -3924,7 +3910,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -4450,8 +4435,7 @@
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "peer": true
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
     "node_modules/global-dirs": {
       "version": "2.1.0",
@@ -5507,7 +5491,6 @@
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -5521,7 +5504,6 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -6196,7 +6178,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
       "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       }
@@ -6720,8 +6701,7 @@
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "peer": true
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -7435,7 +7415,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7444,7 +7423,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -7671,8 +7649,7 @@
     "node_modules/neo-async": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "peer": true
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/next": {
       "version": "14.1.3",
@@ -8284,6 +8261,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -8434,6 +8412,7 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
       "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -8558,7 +8537,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -8589,6 +8567,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8610,6 +8589,7 @@
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -9058,7 +9038,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
       "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
@@ -9133,7 +9112,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
       "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
-      "peer": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -9260,7 +9238,6 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "peer": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -9270,7 +9247,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9555,6 +9531,7 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
       "integrity": "sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==",
+      "peer": true,
       "dependencies": {
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
@@ -9614,7 +9591,6 @@
       "version": "5.16.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
       "integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.2",
         "acorn": "^8.5.0",
@@ -9632,7 +9608,6 @@
       "version": "5.3.6",
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz",
       "integrity": "sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==",
-      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.14",
         "jest-worker": "^27.4.5",
@@ -10303,7 +10278,6 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
       "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -10316,7 +10290,6 @@
       "version": "5.75.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
       "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -10371,7 +10344,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -10379,14 +10351,12 @@
     "node_modules/webpack/node_modules/@types/estree": {
       "version": "0.0.51",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-      "peer": true
+      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ=="
     },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -10399,7 +10369,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }

From d48219c7ae3f7b847192ab8a683f70fc3b780ea4 Mon Sep 17 00:00:00 2001
From: Purnavu-12 <purnasaivu0730@gmail.com>
Date: Sat, 24 Jan 2026 11:26:46 +0530
Subject: [PATCH 2/3] Remove documentation files not to be included in PR

---
 src/components/Banner.jsx         | 15 +++++++------
 src/components/Card.jsx           |  5 ++++-
 src/components/Footer.jsx         | 20 ++++++++---------
 src/components/SectionHeading.jsx | 14 ++++++------
 tailwind.config.js                | 36 +++++++++++++++++++++++++++++++
 5 files changed, 66 insertions(+), 24 deletions(-)

diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
index 44a482da..2fa61fdc 100644
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -4,22 +4,23 @@ import { Pattern } from '@/components/Pattern';
 
 export function Banner() {
   return (
-    <section aria-label="Apply Banner" className="scroll-mt-14 bg-[#00843D] dark:bg-yellow-400 sm:scroll-mt-32">
+    <section aria-label="Apply Banner" className="scroll-mt-14 bg-gradient-to-r from-primary via-primary-accent to-primary-dark dark:from-yellow-400 dark:to-yellow-400 sm:scroll-mt-32 shadow-xl-soft">
       <div className="overflow-hidden lg:relative">
         <ContainerPattern size="md" className="relative grid grid-cols-1 items-end gap-y-12 lg:static lg:grid-cols-2 pt-24 pb-8 sm:py-10">
-          <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3" />
-          <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible" />
+          <Pattern className="absolute -top-28 left-0 w-full sm:left-3/4 sm:-top-10 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 animate-pulse" />
+          <Pattern className="absolute mt-2 -top-32 left-0 w-full sm:left-3/4 sm:top-36 sm:ml-8 sm:w-auto md:left-2/3 lg:left-auto lg:right-2 lg:ml-0 xl:right-auto xl:left-2/3 sm:visible invisible animate-pulse" />
           <div>
-            <h2 className="font-mono text-5xl font-black tracking-tighter text-white dark:text-black sm:w-3/4 sm:text-5xl md:w-2/3 lg:w-auto">
+            <h2 className="font-mono text-5xl font-black tracking-tighter text-white dark:text-black sm:w-3/4 sm:text-5xl md:w-2/3 lg:w-auto drop-shadow-xl">
               Launch into AOSSIE&apos;s open-source world through GSoC!
             </h2>
             <p className="mt-4 text-lg tracking-tighter text-white dark:text-black font-medium font-mono">
               Learn how to apply for an opportunity to work on open-source projects and gain real-world experience through Google Summer of Code.
             </p>
-            <div className="mt-5">
+            <div className="mt-8">
               <Link href="/apply" legacyBehavior>
-                <a className="group relative rounded-lg inline-flex items-center overflow-hidden bg-white dark:bg-black px-8 py-3 text-black dark:text-white focus:outline-none font-mono font-semibold">
-                  Apply to GSoC with AOSSIE
+                <a className="group relative rounded-2xl inline-flex items-center overflow-hidden bg-white dark:bg-black px-10 py-4 text-black dark:text-white focus:outline-none font-mono font-bold shadow-md-soft transition-all duration-400 ease-in-expo hover:bg-primary hover:text-white hover:scale-105 dark:hover:bg-yellow-400 dark:hover:text-black">
+                  <span className="z-10 relative">Apply to GSoC with AOSSIE</span>
+                  <span className="absolute left-0 top-0 h-full w-0 bg-primary transition-all duration-400 ease-in-expo group-hover:w-full opacity-20 rounded-2xl"></span>
                 </a>
               </Link>
             </div>
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 92d38d4e..b7a2c2ff 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -16,7 +16,10 @@ function ChevronRightIcon(props) {
 export function Card({ as: Component = 'div', className, children }) {
   return (
     <Component
-      className={clsx(className, 'group relative flex flex-col items-start')}
+      className={clsx(
+        className,
+        'group relative flex flex-col items-start rounded-2xl shadow-soft bg-white dark:bg-zinc-900 transition-all duration-400 ease-in-expo hover:shadow-xl-soft focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 focus-within:ring-offset-white dark:focus-within:ring-yellow-400 dark:focus-within:ring-offset-zinc-900'
+      )}
     >
       {children}
     </Component>
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index ea36f59c..9a28031e 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -18,34 +18,34 @@ function NavLink({ href, children }) {
 
 export function Footer() {
   return (
-    <footer className="mt-16">
+    <footer className="mt-16 border-t border-zinc-200 dark:border-zinc-700 bg-secondary dark:bg-secondary-dark">
       <Container.Outer>
         <div className="pt-10 pb-10">
           <Container.Inner>
-            <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
-              <div className="flex gap-5 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
+            <div className="flex flex-col items-center justify-between gap-8 sm:flex-row">
+              <div className="flex gap-7 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
                 <NavLink href="/about">About</NavLink>
                 <NavLink href="/projects">Projects</NavLink>
                 <NavLink href="/ideas">Ideas</NavLink>
                 <NavLink href="/apply">Apply</NavLink>
               </div>
-              <p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono">
+              <p className="text-sm text-zinc-400 dark:text-zinc-500 font-mono mt-4 sm:mt-0">
                 &copy; 2016-2025 AOSSIE. All rights reserved.
               </p>
-              <div className="flex gap-6">
-                <Link aria-label="Contact by Mail" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='mailto:aossie.oss@gmail.com'>
+              <div className="flex gap-7">
+                <Link aria-label="Contact by Mail" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='mailto:aossie.oss@gmail.com'>
                   <FontAwesomeIcon icon={faEnvelope} size='xl' />
                 </Link>
-                <Link aria-label="Follow on GitLab" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://gitlab.com/aossie'>
+                <Link aria-label="Follow on GitLab" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='https://gitlab.com/aossie'>
                   <FontAwesomeIcon icon={faGitlab} size='xl' />
                 </Link>
-                <Link aria-label="Follow on GitHub" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://github.com/AOSSIE-Org'>
+                <Link aria-label="Follow on GitHub" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='https://github.com/AOSSIE-Org'>
                   <FontAwesomeIcon icon={faGithub} size='xl' />
                 </Link>
-                <Link aria-label="Join on Discord" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://discord.gg/hjUhu33uAn'>
+                <Link aria-label="Join on Discord" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='https://discord.gg/hjUhu33uAn'>
                   <FontAwesomeIcon icon={faDiscord} size='xl' />
                 </Link>
-                <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
+                <Link aria-label="Follow on Twitter" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='https://twitter.com/aossie_org'>
                   <FontAwesomeIcon icon={faTwitter} size='xl' />
                 </Link>
               </div>
diff --git a/src/components/SectionHeading.jsx b/src/components/SectionHeading.jsx
index 7a616007..2bb82d4c 100644
--- a/src/components/SectionHeading.jsx
+++ b/src/components/SectionHeading.jsx
@@ -4,15 +4,17 @@ export function SectionHeading({ number, children, className, ...props }) {
   return (
     <h2
       className={clsx(
-        className,
-        'inline-flex items-center rounded-full py-1 px-4 text-[#00843D] dark:text-yellow-400 ring-1 ring-inset ring-[#00843D] dark:ring-yellow-400'
+        'text-3xl md:text-4xl font-extrabold tracking-tight text-primary dark:text-yellow-400 flex items-center gap-3 mb-8 animate-fade-in',
+        className
       )}
       {...props}
     >
-      <span className="font-mono text-base font-semibold" aria-hidden="true">
-      </span>
-      {/* <span className="ml-3 h-3.5 w-px bg-blue-600/20 dark:bg-white" /> */}
-      <span className="ml-3 text-base font-semibold font-mono tracking-tighter">
+      {number && (
+        <span className="font-mono text-lg font-black text-primary-accent dark:text-yellow-400 drop-shadow" aria-hidden="true">
+          {number}
+        </span>
+      )}
+      <span className="ml-3 text-xl md:text-2xl font-semibold font-mono tracking-tighter">
         {children}
       </span>
     </h2>
diff --git a/tailwind.config.js b/tailwind.config.js
index fee0df0e..7cf1af0f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,42 @@ module.exports = {
       scale: {
         180: '1.8',
       },
+      colors: {
+        primary: {
+          DEFAULT: '#00843D',
+          dark: '#3C982C',
+          accent: '#FED41E',
+        },
+        secondary: {
+          DEFAULT: '#F5F5F5',
+          dark: '#23272F',
+        },
+        brand: {
+          green: '#00843D',
+          yellow: '#FED41E',
+        },
+      },
+      boxShadow: {
+        'soft': '0 2px 8px 0 rgba(0,0,0,0.06)',
+        'md-soft': '0 4px 16px 0 rgba(0,0,0,0.10)',
+        'xl-soft': '0 8px 32px 0 rgba(0,0,0,0.12)',
+      },
+      borderRadius: {
+        'xl': '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '2rem',
+      },
+      transitionProperty: {
+        'spacing': 'margin, padding',
+      },
+      transitionDuration: {
+        '400': '400ms',
+        '600': '600ms',
+      },
+      transitionTimingFunction: {
+        'in-expo': 'cubic-bezier(0.95,0.05,0.795,0.035)',
+        'out-expo': 'cubic-bezier(0.19,1,0.22,1)',
+      },
     },
     typography: (theme) => ({
       invert: {

From ebd0d2fc6d068e6261944bb396ffd6f58e9b2944 Mon Sep 17 00:00:00 2001
From: Purnavu-12 <purnasaivu0730@gmail.com>
Date: Sat, 24 Jan 2026 11:44:43 +0530
Subject: [PATCH 3/3] Fix: Tailwind class issues

---
 jsconfig.json                         |  3 +-
 src/components/BrandingBackground.jsx | 25 +++++++++++
 src/components/Footer.jsx             | 61 +++++++++++++++++++--------
 src/components/Header.jsx             | 11 ++++-
 src/components/PageTransition.jsx     | 19 +++++++++
 src/components/Pattern.jsx            |  8 ++--
 src/components/SectionHeading.jsx     |  2 +-
 src/components/TimelineElement.jsx    |  6 +--
 src/pages/_app.jsx                    | 38 ++++++++++++-----
 src/pages/index.jsx                   | 30 ++++++-------
 tailwind.config.js                    | 23 ++++++++++
 11 files changed, 173 insertions(+), 53 deletions(-)
 create mode 100644 src/components/BrandingBackground.jsx
 create mode 100644 src/components/PageTransition.jsx

diff --git a/jsconfig.json b/jsconfig.json
index 2c8ee2bb..6246d8cc 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -3,6 +3,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "ignoreDeprecations": "6.0"
   }
 }
diff --git a/src/components/BrandingBackground.jsx b/src/components/BrandingBackground.jsx
new file mode 100644
index 00000000..279016af
--- /dev/null
+++ b/src/components/BrandingBackground.jsx
@@ -0,0 +1,25 @@
+// Example SVG background pattern for branding
+export default function BrandingBackground() {
+  return (
+    <svg
+      className="absolute inset-0 w-full h-full pointer-events-none z-0"
+      aria-hidden="true"
+      focusable="false"
+      width="100%"
+      height="100%"
+      viewBox="0 0 1440 320"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient id="brand-gradient" x1="0" y1="0" x2="0" y2="1" gradientTransform="rotate(20)">
+          <stop offset="0%" stopColor="#00843D" stopOpacity="0.15" />
+          <stop offset="100%" stopColor="#FED41E" stopOpacity="0.10" />
+        </linearGradient>
+      </defs>
+      <rect width="1440" height="320" fill="url(#brand-gradient)" />
+      <circle cx="200" cy="120" r="80" fill="#00843D" fillOpacity="0.08" />
+      <circle cx="1240" cy="200" r="100" fill="#FED41E" fillOpacity="0.10" />
+    </svg>
+  );
+}
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 9a28031e..bf4da1f0 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -15,7 +15,6 @@ function NavLink({ href, children }) {
     </Link>
   )
 }
-
 export function Footer() {
   return (
     <footer className="mt-16 border-t border-zinc-200 dark:border-zinc-700 bg-secondary dark:bg-secondary-dark">
@@ -23,7 +22,7 @@ export function Footer() {
         <div className="pt-10 pb-10">
           <Container.Inner>
             <div className="flex flex-col items-center justify-between gap-8 sm:flex-row">
-              <div className="flex gap-7 text-md font-semibold font-mono text-zinc-800 dark:text-zinc-200">
+              <div className="flex gap-7 text-base font-semibold font-mono text-zinc-800 dark:text-zinc-200">
                 <NavLink href="/about">About</NavLink>
                 <NavLink href="/projects">Projects</NavLink>
                 <NavLink href="/ideas">Ideas</NavLink>
@@ -33,21 +32,36 @@ export function Footer() {
                 &copy; 2016-2025 AOSSIE. All rights reserved.
               </p>
               <div className="flex gap-7">
-                <Link aria-label="Contact by Mail" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='mailto:aossie.oss@gmail.com'>
-                  <FontAwesomeIcon icon={faEnvelope} size='xl' />
-                </Link>
-                <Link aria-label="Follow on GitLab" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='https://gitlab.com/aossie'>
-                  <FontAwesomeIcon icon={faGitlab} size='xl' />
-                </Link>
-                <Link aria-label="Follow on GitHub" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='https://github.com/AOSSIE-Org'>
-                  <FontAwesomeIcon icon={faGithub} size='xl' />
-                </Link>
-                <Link aria-label="Join on Discord" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='https://discord.gg/hjUhu33uAn'>
-                  <FontAwesomeIcon icon={faDiscord} size='xl' />
-                </Link>
-                <Link aria-label="Follow on Twitter" className='text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-400 outline-none' href='https://twitter.com/aossie_org'>
-                  <FontAwesomeIcon icon={faTwitter} size='xl' />
-                </Link>
+                {/** SocialLink component for DRY markup */}
+                {[
+                  {
+                    href: 'mailto:aossie.oss@gmail.com',
+                    label: 'Contact by Mail',
+                    icon: faEnvelope,
+                  },
+                  {
+                    href: 'https://gitlab.com/aossie',
+                    label: 'Follow on GitLab',
+                    icon: faGitlab,
+                  },
+                  {
+                    href: 'https://github.com/AOSSIE-Org',
+                    label: 'Follow on GitHub',
+                    icon: faGithub,
+                  },
+                  {
+                    href: 'https://discord.gg/hjUhu33uAn',
+                    label: 'Join on Discord',
+                    icon: faDiscord,
+                  },
+                  {
+                    href: 'https://twitter.com/aossie_org',
+                    label: 'Follow on Twitter',
+                    icon: faTwitter,
+                  },
+                ].map(({ href, label, icon }) => (
+                  <SocialLink key={href} href={href} ariaLabel={label} icon={icon} />
+                ))}
               </div>
             </div>
           </Container.Inner>
@@ -56,3 +70,16 @@ export function Footer() {
     </footer>
   )
 }
+
+// DRY SocialLink component
+function SocialLink({ href, ariaLabel, icon }) {
+  return (
+    <Link
+      aria-label={ariaLabel}
+      className="text-zinc-400 hover:text-primary focus:text-primary dark:text-zinc-400 dark:hover:text-yellow-400 dark:focus:text-yellow-400 transition-colors duration-300 outline-none"
+      href={href}
+    >
+      <FontAwesomeIcon icon={icon} size="xl" />
+    </Link>
+  );
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 3ffdd386..495add5a 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -81,7 +81,12 @@ function MobileNavItem({ href, children }) {
 function MobileNavigation(props) {
   return (
     <Popover {...props}>
-      <Popover.Button className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20">
+      <Popover.Button
+        className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20"
+        aria-haspopup="true"
+        aria-controls="mobile-menu"
+        aria-expanded="false"
+      >
         Menu
         <ChevronDownIcon className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400" />
       </Popover.Button>
@@ -108,6 +113,8 @@ function MobileNavigation(props) {
         >
           <Popover.Panel
             focus
+            id="mobile-menu"
+            aria-label="Mobile Navigation Menu"
             className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800"
           >
             <div className="flex flex-row-reverse items-center justify-between">
@@ -118,7 +125,7 @@ function MobileNavigation(props) {
                 Navigation
               </h2>
             </div>
-            <nav className="mt-6">
+            <nav className="mt-6" aria-label="Mobile Navigation">
               <ul className="-my-2 font-mono font-black divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300">
                 <MobileNavItem href="/about">About</MobileNavItem>
                 <MobileNavItem href="/projects">Projects</MobileNavItem>
diff --git a/src/components/PageTransition.jsx b/src/components/PageTransition.jsx
new file mode 100644
index 00000000..97b697d0
--- /dev/null
+++ b/src/components/PageTransition.jsx
@@ -0,0 +1,19 @@
+// Framer Motion setup for Next.js
+import { AnimatePresence, motion } from 'framer-motion';
+
+export default function PageTransition({ children, router }) {
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={router.route}
+        initial={{ opacity: 0, y: 24 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -24 }}
+        transition={{ duration: 0.4, ease: 'easeInOut' }}
+        style={{ minHeight: '100vh' }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}
diff --git a/src/components/Pattern.jsx b/src/components/Pattern.jsx
index 5be975d2..e324ea27 100644
--- a/src/components/Pattern.jsx
+++ b/src/components/Pattern.jsx
@@ -20,9 +20,9 @@ export function Pattern({
     <svg aria-hidden="true" width={width} height={height} {...props}>
       <defs>
         <symbol id={`${id}-0`} width={size} height={size}>
-          <rect className="fill-green-200 dark:fill-yellow-200" width={size} height={size} />
+          <rect className="fill-primary/20 dark:fill-primary-accent/20" width={size} height={size} />
           <circle
-            className="fill-[#00843D]  dark:fill-yellow-400"
+            className="fill-primary dark:fill-primary-accent"
             cx={size / 2}
             cy={size / 2}
             r={size * (13 / 40)}
@@ -30,13 +30,13 @@ export function Pattern({
         </symbol>
         <symbol id={`${id}-1`} width={size} height={size}>
           <circle
-            className="fill-green-400 dark:fill-yellow-300 animate-pulse"
+            className="fill-primary dark:fill-primary-accent animate-pulse"
             cx={size / 2}
             cy={size / 2}
             r={size / 2}
           />
           <rect
-            className="fill-[#00843D] dark:fill-yellow-400"
+            className="fill-primary dark:fill-primary-accent"
             width={size / 2}
             height={size / 2}
             x={size / 4}
diff --git a/src/components/SectionHeading.jsx b/src/components/SectionHeading.jsx
index 2bb82d4c..b1a37148 100644
--- a/src/components/SectionHeading.jsx
+++ b/src/components/SectionHeading.jsx
@@ -9,7 +9,7 @@ export function SectionHeading({ number, children, className, ...props }) {
       )}
       {...props}
     >
-      {number && (
+      {number !== null && number !== undefined && (
         <span className="font-mono text-lg font-black text-primary-accent dark:text-yellow-400 drop-shadow" aria-hidden="true">
           {number}
         </span>
diff --git a/src/components/TimelineElement.jsx b/src/components/TimelineElement.jsx
index 9e977f5f..27c06e15 100644
--- a/src/components/TimelineElement.jsx
+++ b/src/components/TimelineElement.jsx
@@ -3,15 +3,15 @@ import clsx from "clsx"
 export function TimelineElement({ title, description, button, time, link, classCondition }) {
     return (
         <li className="mb-10 ml-6">
-            <span className="absolute flex items-center justify-center w-6 h-6 bg-green-100 rounded-full -left-3 ring-8 ring-white dark:ring-zinc-900 dark:bg-yellow-900 scale-150">
-                <svg aria-hidden="true" className="w-3 h-3 text-green-800 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <span className="absolute flex items-center justify-center w-6 h-6 bg-primary/10 rounded-full -left-3 ring-8 ring-white dark:ring-secondary-dark dark:bg-primary-accent/20 scale-150">
+                <svg aria-hidden="true" className="w-3 h-3 text-primary dark:text-primary-accent" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd"></path>
                 </svg>
             </span>
             <h3 className="flex font-mono tracking-tighter items-center mb-1 text-xl font-bold text-gray-900 dark:text-white ml-2">{title}</h3>
             <time className="block mb-2 font-mono text-sm font-normal leading-none text-gray-400 dark:text-gray-500">{time}</time>
             <p className="mb-4 font-mono tracking-tight text-base font-normal text-gray-500 dark:text-gray-400 ml-2">{description}</p>
-            <a href={link} className={clsx(classCondition,"inline-flex font-mono items-center px-4 py-2 text-sm font-bold text-gray-900 bg-white border-2 border-gray-200 rounded-lg hover:bg-gray-100 hover:text-green-700 focus:z-10 focus:ring-2 focus:outline-none focus:ring-gray-300 focus:text-green-700 dark:bg-zinc-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700")}>{button}</a>
+            <a href={link} className={clsx(classCondition,"inline-flex font-mono items-center px-4 py-2 text-sm font-bold text-secondary-dark bg-white border-2 border-secondary rounded-lg hover:bg-secondary hover:text-primary focus:z-10 focus:ring-2 focus:outline-none focus:ring-primary focus:text-primary dark:bg-secondary-dark dark:text-secondary dark:border-secondary dark:hover:text-white dark:hover:bg-primary dark:focus:ring-primary-accent")}>{button}</a>
         </li>
     )
 }
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index f2d6ffb9..6b0a7666 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,10 +1,25 @@
+
+
 import { useEffect, useRef } from 'react'
 
+// Accessibility: Skip to content link
+function SkipToContent() {
+  return (
+    <a
+      href="#main-content"
+      className="sr-only focus:not-sr-only absolute top-2 left-2 z-50 rounded bg-primary px-4 py-2 text-white dark:bg-primary-accent focus:outline-none focus:ring-4 focus:ring-primary-accent"
+      tabIndex={0}
+    >
+      Skip to main content
+    </a>
+  )
+}
 import { Header } from '@/components/Header'
 
 import '@/style/tailwind.css'
 import 'focus-visible'
 import { Footer } from '@/components/Footer'
+import PageTransition from '@/components/PageTransition'
 
 function usePrevious(value) {
   let ref = useRef()
@@ -21,18 +36,21 @@ export default function App({ Component, pageProps, router }) {
 
   return (
     <>
-        <div className="fixed inset-0 flex justify-center sm:px-8">
-          <div className="flex w-full max-w-7xl lg:px-8">
-            <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
-          </div>
+      <SkipToContent />
+      <div className="fixed inset-0 flex justify-center sm:px-8">
+        <div className="flex w-full max-w-7xl lg:px-8">
+          <div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
         </div>
-        <div className="relative">
-          <Header />
-          <main>
+      </div>
+      <div className="relative">
+        <Header />
+        <main id="main-content">
+          <PageTransition router={router}>
             <Component previousPathname={previousPathname} {...pageProps} />
-          </main>
-          <Footer />
-        </div>
+          </PageTransition>
+        </main>
+        <Footer />
+      </div>
     </>
   )
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 14e063cd..41d32e4a 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -13,6 +13,7 @@ import {
   faTwitter,
 } from '@fortawesome/free-brands-svg-icons'
 import { CardEffect } from '@/components/CardEffect'
+import BrandingBackground from '@/components/BrandingBackground'
 import { Banner } from '@/components/Banner'
 import projects from '@/helper/projects'
 import Journey from '@/components/Journey'
@@ -31,11 +32,10 @@ export default function Home() {
       </Head>
 
       <Container.Outer className="mt-9 relative">
-        <div className="relative">
-
+        <div className="relative overflow-hidden">
+          <BrandingBackground />
           {/* Background Image */}
-          <div className=" hidden  absolute md:block z-0 bg-[url('../images/background.png')] dark:bg-[url('../images/background-dark.png')] right-0 top-[-230px] w-full h-[-webkit-fill-available] bg-cover bg-center mb-20"></div>
-
+          <div className="hidden absolute md:block z-0 bg-[url('../images/background.png')] dark:bg-[url('../images/background-dark.png')] right-0 top-[-230px] w-full h-[-webkit-fill-available] bg-cover bg-center mb-20"></div>
           {/* Main Content */}
           <div className="flex flex-col sm:flex-row relative z-10 mb-8">
             <div className="flex-1 self-center">
@@ -49,10 +49,10 @@ export default function Home() {
             </div>
             <div className="mt-10 flex-1 sm:ml-10 lg:ml-0 lg:mt-0 pt-8">
               <div className="max-w-xl ml-12">
-                <h1 className="font-mono text-6xl font-extrabold tracking-tighter text-[#00843d] md:text-[#FED41E] dark:text-[#FED41E] md:dark:text-black sm:text-6xl md:text-5xl lg:text-6xl">
+                <h1 className="font-mono text-6xl font-extrabold tracking-tighter text-primary md:text-primary-accent dark:text-primary-accent md:dark:text-secondary-dark sm:text-6xl md:text-5xl lg:text-6xl">
                   We Innovate <br /> We Educate
                 </h1>
-                <p className="mt-8 font-mono text-xl leading-7 text-zinc-600 dark:text-[rgb(161 161 170/var(--tw-text-opacity))]  md:dark:text-[#FED41E]">
+                <p className="mt-8 font-mono text-xl leading-7 text-secondary-dark dark:text-secondary md:dark:text-primary-accent">
                   We are an Australian not-for-profit umbrella organization for
                   open-source projects. We believe the open-source philosophy
                   provides a resource-efficient channel to transfer knowledge and
@@ -115,16 +115,16 @@ export default function Home() {
           </div>
 
           {/* Green Band with Counts */}
-          <div className="hidden bg-[#3C982C] relative dark:text-black sm:flex flex-col md:flex-row justify-between p-4 sm:p-8 px-4 sm:px-16 text-center border border-white text-white dark:bg-yellow-400 z-20">
-            <div className="mb-4 sm:mb-0">
+          <div className="hidden bg-primary-dark relative dark:text-secondary-dark sm:grid grid-cols-1 md:grid-cols-3 gap-6 p-4 sm:p-8 px-4 sm:px-16 text-center border border-white text-white dark:bg-primary-accent z-20">
+            <div className="flex flex-col items-center justify-center">
               <h6 className="text-xl">Active Projects</h6>
               <p className="font-semibold text-2xl">34+</p>
             </div>
-            <div className="mb-4 sm:mb-0">
+            <div className="flex flex-col items-center justify-center">
               <h6 className="text-xl">Total Contributors</h6>
               <p className="font-semibold text-2xl">500+</p>
             </div>
-            <div className="mb-4 sm:mb-0">
+            <div className="flex flex-col items-center justify-center">
               <h6 className="text-xl">Community Count</h6>
               <p className="font-semibold text-2xl">2000+</p>
             </div>
@@ -138,7 +138,7 @@ export default function Home() {
         <div className="mx-auto gap-y-20 lg:max-w-none lg:grid-cols-2">
           <div className="space-y-10 ">
             <div className="flex text-center items-center justify-center">
-              <div className=" relative top-2 hidden h-12 w-12 translate-x-px transform items-center justify-center rounded-full bg-[#00843D] p-2 dark:bg-yellow-400 md:flex">
+              <div className=" relative top-2 hidden h-12 w-12 translate-x-px transform items-center justify-center rounded-full bg-primary p-2 dark:bg-primary-accent md:flex">
                 <svg
                   aria-hidden="true"
                   role="img"
@@ -156,18 +156,18 @@ export default function Home() {
                 </svg>
               </div>
               <div className="col-span-8 mt-3 self-center lg:col-start-2">
-                <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-800 dark:text-white">
+                <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-secondary-dark dark:text-white">
                   projects
                 </h1>
               </div>
             </div>
 
-            <p className=" font-mono text-lg text-zinc-600 dark:text-zinc-400 text-center ">
+            <p className=" font-mono text-lg text-secondary-dark dark:text-secondary text-center ">
               Our Projects, where we showcase our tech wizardry and
               code-slinging skills!! <br></br> Be a part of our community and
-              contribute to meaningful projects that are <span className="text-[#3C982C] dark:text-yellow-400">making a difference</span>.
+              contribute to meaningful projects that are <span className="text-primary-dark dark:text-primary-accent">making a difference</span>.
               Explore our selection of projects and find the perfect opportunity
-              to showcase your skills and <span className="text-[#3C982C] dark:text-yellow-400">make an impact</span>.
+              to showcase your skills and <span className="text-primary-dark dark:text-primary-accent">make an impact</span>.
             </p>
           </div>
           <div className="mt-10 flex flex-col items-center gap-6 sm:flex-row sm:justify-evenly sm:gap-0">
diff --git a/tailwind.config.js b/tailwind.config.js
index 7cf1af0f..6df762fc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,29 @@ module.exports = {
       '9xl': ['8rem', { lineHeight: '1' }],
     },
     extend: {
+      fontFamily: {
+        sans: [
+          'Inter',
+          'ui-sans-serif',
+          'system-ui',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'sans-serif',
+        ],
+        mono: [
+          'Fira Mono',
+          'ui-monospace',
+          'SFMono-Regular',
+          'Menlo',
+          'Monaco',
+          'Consolas',
+          'Liberation Mono',
+          'Courier New',
+          'monospace',
+        ],
+      },
       scale: {
         180: '1.8',
       },