diff --git a/package-lock.json b/package-lock.json
index 1bc508ef8..079d59e99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,18 +12,23 @@
         "framer-motion": "^11.1.7",
         "gsap": "^3.12.5",
         "lil-gui": "^0.19.2",
+        "lucide-react": "^0.473.0",
         "react": "^18.2.0",
         "react-chrono": "^2.6.1",
         "react-d3-cloud": "^1.0.6",
         "react-dom": "^18.2.0",
+        "react-hot-toast": "^2.5.1",
         "react-icon-cloud": "^1.1.3",
         "react-icons": "^5.2.1",
+        "react-lazy-load-image-component": "^1.6.3",
         "react-router-dom": "^6.23.0",
         "react-spring": "^9.7.3",
         "react-three-fiber": "^6.0.13",
+        "react-use": "^17.6.0",
         "simple-icons": "^5.24.0",
         "stats.js": "^0.17.0",
         "three": "^0.165.0",
+        "typewriter-effect": "^2.21.0",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
@@ -4245,6 +4250,12 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
+      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.14.2",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.2.tgz",
@@ -4343,6 +4354,12 @@
         "vite": "^4 || ^5"
       }
     },
+    "node_modules/@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==",
+      "license": "MIT"
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -5401,6 +5418,15 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "peer": true
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "license": "MIT",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/core-js-compat": {
       "version": "3.37.1",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.1.tgz",
@@ -5509,6 +5535,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz",
+      "integrity": "sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==",
+      "license": "MIT",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.3"
+      }
+    },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
@@ -5519,6 +5554,28 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5883,7 +5940,6 @@
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz",
       "integrity": "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==",
-      "peer": true,
       "dependencies": {
         "stackframe": "^1.3.4"
       }
@@ -6391,8 +6447,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.2",
@@ -6432,6 +6487,11 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
+    },
     "node_modules/fast-xml-parser": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.1.tgz",
@@ -6454,6 +6514,12 @@
         "fxparser": "src/cli/cli.js"
       }
     },
+    "node_modules/fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==",
+      "license": "MIT"
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -6893,6 +6959,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -7070,6 +7145,12 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -7151,6 +7232,15 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz",
+      "integrity": "sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==",
+      "license": "MIT",
+      "dependencies": {
+        "css-in-js-utils": "^3.1.0"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -7908,6 +7998,12 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==",
+      "license": "MIT"
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8173,8 +8269,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "peer": true
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -8185,8 +8280,7 @@
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
-      "peer": true
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
     },
     "node_modules/log-symbols": {
       "version": "4.1.0",
@@ -8385,6 +8479,15 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.473.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.473.0.tgz",
+      "integrity": "sha512-KW6u5AKeIjkvrxXZ6WuCu9zHE/gEYSXCay+Gre2ZoInD0Je/e3RBtP4OHpJVJ40nDklSvjVKjgH7VU8/e2dzRw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -8431,6 +8534,12 @@
       "integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==",
       "peer": true
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "license": "CC0-1.0"
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -8933,6 +9042,26 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nano-css": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz",
+      "integrity": "sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==",
+      "license": "Unlicense",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "css-tree": "^1.1.2",
+        "csstype": "^3.1.2",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^7.0.1",
+        "rtl-css-js": "^1.16.1",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.3.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -9435,6 +9564,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -9868,6 +10003,15 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -9993,6 +10137,23 @@
         "react": ">=16.8"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.1.tgz",
+      "integrity": "sha512-54Gq1ZD1JbmAb4psp9bvFHjS7lje+8ubboUmvKZkCsQBLH6AOpZ9JemfRvIdHcfb9AZXRaFLrb3qUobGYDJhFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icon-cloud": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/react-icon-cloud/-/react-icon-cloud-1.1.3.tgz",
@@ -10077,6 +10238,19 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-lazy-load-image-component": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz",
+      "integrity": "sha512-kdQYUDbuISF3T9El0sBLNoWrmPohqlytcG4ognLtHYjY8bZAsJ0/Ez+VaV+0QlVyUY3K6dDXkuQAz3GpvdjBkw==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      },
+      "peerDependencies": {
+        "react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x || ^19.x.x"
+      }
+    },
     "node_modules/react-reconciler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.27.0.tgz",
@@ -10301,6 +10475,41 @@
         }
       }
     },
+    "node_modules/react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "peerDependencies": {
+        "react": "*",
+        "tslib": "*"
+      }
+    },
+    "node_modules/react-use": {
+      "version": "17.6.0",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.6.0.tgz",
+      "integrity": "sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==",
+      "license": "Unlicense",
+      "dependencies": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.6.2",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/react-use-measure": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz",
@@ -10516,8 +10725,7 @@
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
-      "peer": true
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
@@ -10625,6 +10833,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -10696,6 +10913,18 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/screenfull": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/selfsigned": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
@@ -10866,6 +11095,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=6.9"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -11062,6 +11300,15 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "peer": true
     },
+    "node_modules/stack-generator": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz",
+      "integrity": "sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "stackframe": "^1.3.4"
+      }
+    },
     "node_modules/stack-utils": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
@@ -11086,8 +11333,37 @@
     "node_modules/stackframe": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
-      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==",
-      "peer": true
+      "integrity": "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="
+    },
+    "node_modules/stacktrace-gps": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz",
+      "integrity": "sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.3.4"
+      }
+    },
+    "node_modules/stacktrace-gps/node_modules/source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "license": "MIT",
+      "dependencies": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
     },
     "node_modules/stacktrace-parser": {
       "version": "0.1.10",
@@ -11672,6 +11948,15 @@
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
       "peer": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -11738,6 +12023,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "license": "MIT"
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -11753,6 +12044,12 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "peer": true
     },
+    "node_modules/ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==",
+      "license": "Unlicense"
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -11870,6 +12167,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typewriter-effect": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz",
+      "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "raf": "^3.4.1"
+      },
+      "peerDependencies": {
+        "react": "^17.x || ^18.x",
+        "react-dom": "^17.x || ^18.x"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
diff --git a/package.json b/package.json
index d555ef09d..5a7c878d8 100644
--- a/package.json
+++ b/package.json
@@ -14,18 +14,23 @@
     "framer-motion": "^11.1.7",
     "gsap": "^3.12.5",
     "lil-gui": "^0.19.2",
+    "lucide-react": "^0.473.0",
     "react": "^18.2.0",
     "react-chrono": "^2.6.1",
     "react-d3-cloud": "^1.0.6",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.5.1",
     "react-icon-cloud": "^1.1.3",
     "react-icons": "^5.2.1",
+    "react-lazy-load-image-component": "^1.6.3",
     "react-router-dom": "^6.23.0",
     "react-spring": "^9.7.3",
     "react-three-fiber": "^6.0.13",
+    "react-use": "^17.6.0",
     "simple-icons": "^5.24.0",
     "stats.js": "^0.17.0",
     "three": "^0.165.0",
+    "typewriter-effect": "^2.21.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
diff --git a/src/App.jsx b/src/App.jsx
index 99d8d90b1..58489211d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,13 +15,15 @@ import VerticalTimeline from './Components/Timeline';
 import Carousel from './Components/Carousel';
 import Hero from './Components/Hero';
 import Footer from "./Components/Footer"
+ import LeaderboardComponent from './Components/LeaderboardComponent';
+ import AchievementsPage from './Components/Achievements';
+
 
 
 const Homepage = () => {
   return (
     <div>
       <Hero />
-       {/* Text Section between Hero and Carousel */}
       <div className="text-center py-8 px-4 md:px-12 bg-opacity-10 text-white">
         <h2 className="text-4xl font-semibold mb-4">Welcome to Project X</h2>
         <p className="text-xl">
@@ -32,6 +34,7 @@ const Homepage = () => {
       <div>
         <Carousel />
       </div>
+    
     </div>
   );
 };
@@ -52,6 +55,7 @@ function App() {
         <Route path="/past-projects" element={<PastProjects />} />
         <Route path="/upcoming-projects" element={<UpcomingProjects />} />
         {/* <Route path="/time" element={<VerticalTimeline />} /> */}
+        <Route path="/LeaderboardComponent" element={<LeaderboardComponent/>} />
 
         {/* <Route path="/" element={<OrderManagement />} /> */}
       </Routes>
diff --git a/src/Components/Achievements.jsx b/src/Components/Achievements.jsx
index 3214455e2..1d8661ef9 100644
--- a/src/Components/Achievements.jsx
+++ b/src/Components/Achievements.jsx
@@ -1,31 +1,297 @@
-import React from 'react';
-import CircularCard from './CircularCard';
+import React, { useState, useEffect } from 'react';
+import Typewriter from 'typewriter-effect';
+import toast, { Toaster } from 'react-hot-toast';
+
+const AchievementsPage = () => {
+  const [showForm, setShowForm] = useState(false); // For toggling the modal form
+  const [sections, setSections] = useState({}); // Dynamic sections
+
+  // Load sections from localStorage on component mount
+  useEffect(() => {
+    const savedSections = localStorage.getItem('sections');
+    if (savedSections) {
+      setSections(JSON.parse(savedSections));
+    }
+  }, []);
+
+  const handleAddEntry = (sectionName, newEntry) => {
+    setSections((prevSections) => {
+      const updatedSections = { ...prevSections };
+      if (!updatedSections[sectionName]) {
+        updatedSections[sectionName] = [];
+      }
+      updatedSections[sectionName].push(newEntry);
+      localStorage.setItem('sections', JSON.stringify(updatedSections));
+      return updatedSections;
+    });
+
+    setShowForm(false);
+    // Show success toast
+    toast.success('Achievement added successfully! 🎉');
+  };
 
-const Achievements = () => {
   return (
-    <div className='min-h-screen'>
-      <h1 className="text-center mx-auto text-5xl font-mono py-12 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-300 to-red-300">
-        GSoC Contributors
-      </h1>
-      <div className="grid grid-cols-6 px-3 gap-12 justify-center">
-        <div></div>
-        <CircularCard image='https://i.ibb.co/jJyjcvZ/Kshitij-Shah-photoaidcom-cropped.png' name='Kshitij Shah' organization='Sugarlabs' link="https://github.com/kshitijdshah99/Pippy_Activity" />
-        <CircularCard image='https://i.ibb.co/Z6fgX5F/IMG-20231110-003535-01-01-photoaidcom-cropped.png' name='Vedant Mehra' organization='CERN' link="https://hepsoftwarefoundation.org/gsoc/blogs/2024/blog_SOFIE_VedantMehra.html" />
-        <CircularCard image='https://i.ibb.co/Sm9FtJ2/1714656497995-photoaidcom-cropped.png' name='Mayank Palan' organization='Red Hen Lab' link="https://medium.com/@mayankpalan066/gsoc24-with-red-hen-lab-modeling-wayfinding-cfb0131b71d1" />
-        <CircularCard image='https://i.ibb.co/C640S72/Scanned-20240502-1627-1-page-0001-photoaidcom-cropped.png' name='Sharan Poojari' organization='NumFOCUS' link="https://github.com/aiidateam/aiida-explorer/blob/gsoc/gsoc/README.md" />
-        <div></div>
+    <div className="relative bg-transparent min-h-screen w-full flex flex-col items-center">
+      <Toaster position="top-center" reverseOrder={false} />
+
+      {/* Header Section */}
+      <div className="w-full text-center py-16">
+        <h1 className="text-bounce text-6xl font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">
+          <Typewriter
+            options={{
+              strings: ['Achievements'],
+              autoStart: true,
+              loop: true,
+            }}
+          />
+        </h1>
       </div>
-        <div className="grid grid-cols-7 px-6 justify-center gap-12">
-<div></div>
-<div></div>
-          <CircularCard image='https://i.ibb.co/T4D9vMh/IMG-20240502-172654-photoaidcom-cropped.png' name='Warren Jacinto' organization='Open Astronomy' link="https://deadspheroid.github.io/my-blog/" />
-          <CircularCard image='https://i.ibb.co/t3vy9D9/IMG-20240502-WA0043-2-photoaidcom-cropped.png' name='Tvisha Vedant' organization='INCF' link="https://tvilight4.github.io/MyBlog/" />
-          <CircularCard image='https://i.ibb.co/9WSz3ss/photo-photoaidcom-cropped.png' name='Raya Chakravarthy' organization='INCF' link="https://raya679.github.io/gsoc/" />
-          <div></div>
-          <div></div>
+
+      {/* Add Button */}
+      <button
+        onClick={() => setShowForm(true)}
+        className="absolute top-16 right-10 bg-gradient-to-r from-blue-600 to-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-full shadow-xl transform hover:scale-105 transition-transform"
+      >
+        + Add Achievement
+      </button>
+
+      {/* Achievements Sections */}
+      <div className="w-full px-12 py-8 space-y-12">
+        {Object.keys(sections).length > 0 ? (
+          Object.entries(sections).map(([section, entries], index) => (
+            <div key={index}>
+              <div className="flex justify-center">
+                <h2 className="inline-block text-5xl font-mono py-3 font-bold mb-6 text-pink-300 border-b-4 border-blue-600">
+                  {section}
+                </h2>
+              </div>
+              <div className="grid grid-cols-3 gap-6">
+                {entries.map((entry, i) => (
+                  <AchievementCard
+                    key={i}
+                    title={entry.title}
+                    description={entry.description}
+                    participants={entry.participants}
+                    branch={entry.branch}
+                    image={entry.image}
+                  />
+                ))}
+              </div>
+            </div>
+          ))
+        ) : (
+          <p className="text-center text-gray-400 text-xl font-mono">
+            No entries yet. Add some achievements or competitions!
+          </p>
+        )}
+      </div>
+
+      {/* Form Modal */}
+      {showForm && (
+        <FormModal
+          sections={Object.keys(sections)}
+          onClose={() => setShowForm(false)}
+          onSubmit={handleAddEntry}
+        />
+      )}
+    </div>
+  );
+};
+
+const AchievementCard = ({ title, description, participants, branch, image }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleDescription = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div
+      className="ml-[15%] shadow-lg rounded-lg overflow-hidden transform transition-transform hover:scale-105 border border-gray-200 w-80"
+      style={{
+        background: 'linear-gradient(to bottom, #0f0e17, #232946)',
+        color: '#eebbc3',
+      }}
+    >
+      {image && (
+        <div className="relative">
+          <img src={image} alt={title} className="w-full h-40 object-cover" />
         </div>
+      )}
+      <div className="p-4 bg-transparent">
+        <h3 className="text-2xl text-center font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mb-1">
+          {title}
+        </h3>
+        <p className="text-md text-gray-350 font-semibold mb-2">
+          Participants: {participants}
+        </p>
+        <p className="text-md text-gray-350 font-semibold mb-2">
+          Branch: {branch}
+        </p>
+        <div className="text-md text-gray-350 font-semibold mb-2">
+          <span className="font-bold">Description:</span>
+          <p
+            className={`${
+              isExpanded ? 'whitespace-normal' : 'overflow-hidden text-ellipsis max-h-12'
+            } break-words`}
+          >
+            {description}
+          </p>
+          <div className="text-right mt-2">
+            <button
+              onClick={toggleDescription}
+              className="py-1 text-indigo-300 text-sm uppercase hover:underline"
+            >
+              {isExpanded ? 'Show Less' : 'Read More'} <span>&rarr;</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const FormModal = ({ sections, onClose, onSubmit }) => {
+  const [isNewSection, setIsNewSection] = useState(true);
+  const [sectionName, setSectionName] = useState('');
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [participants, setParticipants] = useState('');
+  const [branch, setBranch] = useState('');
+  const [image, setImage] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Validate the description length (less than 30 words)
+    const descriptionWordCount = description.trim().split(/\s+/).length;
+    if (descriptionWordCount > 30) {
+      alert('Description must be less than 30 words.');
+      return;
+    }
+
+    const newEntry = { title, description, participants, branch, image };
+    if (isNewSection) {
+      onSubmit(sectionName, newEntry); // Add to new section
+    } else {
+      onSubmit(sectionName, newEntry); // Add to selected section
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="relative bg-white rounded-lg shadow-lg p-6 w-1/3">
+        {/* Close button at the top-right */}
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 text-gray-500 hover:text-gray-700 text-lg font-bold"
+        >
+          &times;
+        </button>
+        <h2 className="text-xl font-bold text-center mb-4">
+          {isNewSection ? 'Add New Section' : 'Add Entry to Section'}
+        </h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {isNewSection ? (
+            <div>
+              <label className="block font-semibold">Section Name</label>
+              <input
+                type="text"
+                value={sectionName}
+                onChange={(e) => setSectionName(e.target.value)}
+                className="w-full p-2 border rounded"
+                required
+              />
+            </div>
+          ) : (
+            <div>
+              <label className="block font-semibold">Select Section</label>
+              <select
+                value={sectionName}
+                onChange={(e) => setSectionName(e.target.value)}
+                className="w-full p-2 border rounded"
+                required
+              >
+                <option value="">-- Select a Section --</option>
+                {sections.map((section, index) => (
+                  <option key={index} value={section}>
+                    {section}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          <div>
+            <label className="block font-semibold">Title</label>
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full p-2 border rounded"
+              required
+            />
+          </div>
+          <div>
+            <label className="block font-semibold">Description</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="w-full p-2 border rounded"
+              required
+            ></textarea>
+          </div>
+          <div>
+            <label className="block font-semibold">Participants</label>
+            <input
+              type="text"
+              value={participants}
+              onChange={(e) => setParticipants(e.target.value)}
+              className="w-full p-2 border rounded"
+              required
+            />
+          </div>
+          <div>
+            <label className="block font-semibold">Branch</label>
+            <input
+              type="text"
+              value={branch}
+              onChange={(e) => setBranch(e.target.value)}
+              className="w-full p-2 border rounded"
+              required
+            />
+          </div>
+          <div>
+            <label className="block font-semibold">Image URL</label>
+            <input
+              type="text"
+              value={image}
+              onChange={(e) => setImage(e.target.value)}
+              className="w-full p-2 border rounded"
+              placeholder="Enter image URL"
+            />
+          </div>
+          <div className="flex justify-between">
+            <button
+              type="button"
+              onClick={() => {
+                setIsNewSection(!isNewSection);
+                setSectionName('');
+              }}
+              className="bg-gray-300 hover:bg-gray-400 text-black font-bold py-2 px-4 rounded"
+            >
+              {isNewSection ? 'Add to Existing Section' : 'Create New Section'}
+            </button>
+            <button
+              type="submit"
+              className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
+            >
+              Add Entry
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   );
-}
+};
 
-export default Achievements;
+export default AchievementsPage;
diff --git a/src/Components/CircularCard.jsx b/src/Components/CircularCard.jsx
index fe20619b8..d9c787446 100644
--- a/src/Components/CircularCard.jsx
+++ b/src/Components/CircularCard.jsx
@@ -1,22 +1,31 @@
 import React from 'react';
 import { useSpring, animated } from 'react-spring';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
 const CircularCard = ({ image, name, organization, link }) => {
   const props = useSpring({ opacity: 1, from: { opacity: 0 } });
 
   return (
     <a href={link} target="_blank" rel="noopener noreferrer" className="no-underline">
-
-    <animated.div style={props} className="flex text-center font-mono flex-col items-center p-6 shadow-lg max-w-xs bg-transparent rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out">
-      <div className="w-32 h-32 rounded-full overflow-hidden shadow-lg">
-        <img src={image} alt={name} className="w-full h-full object-cover" />
-      </div>
-      <h3 className="mt-4 text-xl font-bold text-purple-200">{name}</h3>
-      <p className="mt-2 text-cyan-200">{organization}</p>
-    </animated.div>
-
+      <animated.div
+        style={props}
+        className="flex text-center font-mono flex-col items-center p-6 shadow-lg max-w-xs bg-transparent rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out"
+      >
+        <div className="w-32 h-32 rounded-full overflow-hidden shadow-lg">
+          <LazyLoadImage
+            src={image}
+            alt={name}
+            effect="blur"
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <h3 className="mt-4 text-xl font-bold text-purple-200">{name}</h3>
+        <p className="mt-2 text-cyan-200">{organization}</p>
+      </animated.div>
     </a>
   );
 };
 
 export default CircularCard;
+  
\ No newline at end of file
diff --git a/src/Components/Hero.jsx b/src/Components/Hero.jsx
index b5960745c..400472813 100644
--- a/src/Components/Hero.jsx
+++ b/src/Components/Hero.jsx
@@ -4,13 +4,13 @@ import React from 'react';
 
 const Hero = () => {
     return (
-        <div className="relative bg-transparent min-h-screen w-full flex">
-    <div className="flex-1 bg-transparent flex items-center justify-center">
-        <div className="gp-10 rounded-lg text-left">
-            <h1 className="text-bounce text-[10rem] leading-none font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">ProjectX</h1>
-            <p className="text-bounce text-5xl leading-relaxed font-mono tracking-wide text-transparent text-center bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mt-5">Innovating the future</p>
+            <div className="relative bg-transparent min-h-screen w-full flex">
+        <div className="flex-1 bg-transparent flex items-center justify-center">
+            <div className="gp-10 rounded-lg text-left">
+                <h1 className="text-bounce text-[10rem] leading-none font-mono tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600">ProjectX</h1>
+                <p className="text-bounce text-5xl leading-relaxed font-mono tracking-wide text-transparent text-center bg-clip-text bg-gradient-to-r from-blue-500 to-purple-600 mt-5">Innovating the future</p>
+            </div>
         </div>
-    </div>
     <svg
         className="absolute bottom-0 left-0 right-0 z-10 opacity-100"
         viewBox="0 0 1440 320"
diff --git a/src/Components/LeaderboardComponent.jsx b/src/Components/LeaderboardComponent.jsx
new file mode 100644
index 000000000..c08f91dc9
--- /dev/null
+++ b/src/Components/LeaderboardComponent.jsx
@@ -0,0 +1,210 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Trophy, Medal, Search, X } from 'lucide-react';
+import toast, { Toaster } from 'react-hot-toast';
+
+const LeaderboardComponent = () => {
+  const [participants, setParticipants] = useState([
+    { id: 1, name: 'Shivraj kolwankar', score: 1200, team: 'Code Crusaders' },
+    { id: 2, name: 'Dipesh chavan', score: 1150, team: 'Tech Titans' },
+    { id: 3, name: 'Nishank kalbande', score: 1100, team: 'Innovators Unite' },
+    { id: 4, name: 'Uday', score: 1075, team: 'Digital Dynamos' },
+    { id: 5, name: 'vedant shetye', score: 1050, team: 'Pixel Perfectors' },
+    { id: 6, name: 'parmod', score: 1025, team: 'Code Breakers' },
+    { id: 7, name: 'uday2.0', score: 1000, team: 'Tech Explorers' },
+    { id: 8, name: 'Aayush', score: 975, team: 'Data Dynamos' },
+    { id: 9, name: 'Aditya', score: 950, team: 'Innovate Inc' },
+    { id: 10, name: 'Ms_7', score: 925, team: 'Pixel Pioneers' },
+  ]);
+
+  const [archivedLeaderboards, setArchivedLeaderboards] = useState([]);
+  const [isLive, setIsLive] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  useEffect(() => {
+    const storedLeaderboards = localStorage.getItem('archivedLeaderboards');
+    setArchivedLeaderboards(storedLeaderboards ? JSON.parse(storedLeaderboards) : []);
+  }, []);
+
+  const archiveCurrentLeaderboard = () => {
+    const currentLeaderboard = {
+      timestamp: new Date().toISOString(),
+      participants: [...participants],
+      eventName: 'Project X Workshop Competition',
+    };
+
+    const updatedArchives = [currentLeaderboard, ...archivedLeaderboards];
+    setArchivedLeaderboards(updatedArchives);
+    localStorage.setItem('archivedLeaderboards', JSON.stringify(updatedArchives));
+    toast.success('Leaderboard archived successfully!');
+  };
+
+  const renderRankDisplay = (index) => {
+    switch (index) {
+      case 0:
+        return <Trophy color="gold" size={24} />;
+      case 1:
+        return <Medal color="silver" size={24} />;
+      default:
+        return <span className="text-gray-300 ml-1 font-bold">{index + 1}</span>;
+    }
+  };
+
+  const highlightText = (text, term) => {
+    if (!term) return text;
+
+    const regex = new RegExp(`(${term})`, 'gi');
+    return text.split(regex).map((part, index) =>
+      regex.test(part) ? (
+        <span key={index} className="bg-yellow-800 font-bold ">
+          {part}
+        </span>
+      ) : (
+        part
+      )
+    );
+  };
+
+  return (
+    <div
+      className="min-h-screen flex flex-col items-center justify-center p-6"
+      style={{
+        background: 'linear-gradient(to bottom, #0f0e17, #232946)',
+        color: '#eebbc3',
+      }}
+    >
+      <Toaster position="top-right" reverseOrder={false} />
+      <h1
+        className="text-4xl font-bold mb-6"
+        style={{
+          background: 'linear-gradient(90deg, #537fe7, #9a4ef9)',
+          WebkitBackgroundClip: 'text',
+          WebkitTextFillColor: 'transparent',
+        }}
+      >
+        Project X Leaderboard
+      </h1>
+      <div className="w-full max-w-4xl p-6 bg-[#232946] rounded-lg shadow-md">
+        <div className="flex justify-between items-center mb-4">
+          <div className="relative w-1/2">
+            <input
+              type="text"
+              placeholder="Search participants or teams..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full pl-10 pr-3 py-2 bg-[#0f0e17] text-white rounded border focus:outline-none focus:ring-2 focus:ring-[#537fe7]"
+            />
+            {searchTerm ? (
+              <X
+                onClick={() => setSearchTerm('')}
+                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer"
+                size={20}
+              />
+            ) : (
+              <Search
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                size={20}
+              />
+            )}
+          </div>
+          <div className="flex space-x-2">
+            <button
+              onClick={() => setIsLive(true)}
+              className={`px-4 py-2 rounded ${
+                isLive ? 'bg-[#537fe7] text-white' : 'bg-[#9a4ef9]'
+              }`}
+            >
+              Live Updates
+            </button>
+            <button
+              onClick={() => setIsLive(false)}
+              className={`px-4 py-2 rounded ${
+                !isLive ? 'bg-[#537fe7] text-white' : 'bg-[#9a4ef9]'
+              }`}
+            >
+              Archived Results
+            </button>
+            <button
+              onClick={archiveCurrentLeaderboard}
+              className="bg-[#eebbc3] text-[#0f0e17] px-4 py-2 rounded"
+            >
+              Archive
+            </button>
+          </div>
+        </div>
+        {isLive ? (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="overflow-auto max-h-96"
+          >
+            <div className="grid grid-cols-4 font-semibold bg-[#0f0e17] text-white p-2 rounded">
+              <div>Rank</div>
+              <div>Participant</div>
+              <div>Team</div>
+              <div>Score</div>
+            </div>
+            {participants.map((participant, index) => (
+              <motion.div
+                key={participant.id}
+                initial={{ x: -20, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                className="grid grid-cols-4 items-center p-2 border-b border-gray-700 hover:bg-[#1e1e28]"
+              >
+                <div>{renderRankDisplay(index)}</div>
+                <div>{highlightText(participant.name, searchTerm)}</div>
+                <div>{highlightText(participant.team, searchTerm)}</div>
+                <div>{highlightText(participant.score.toString(), searchTerm)}</div>
+              </motion.div>
+            ))}
+          </motion.div>
+        ) : (
+          <div
+            className="overflow-y-auto max-h-[500px] bg-[#1e1e28] p-4 rounded-lg"
+            style={{ border: '1px solid #2c2c38' }}
+          >
+            {archivedLeaderboards.length === 0 ? (
+              <div className="text-center text-gray-400">No archived leaderboards available</div>
+            ) : (
+              archivedLeaderboards.map((archive, index) => (
+                <motion.div
+                  key={index}
+                  className="bg-[#232946] text-white rounded p-4 mb-4 shadow-md"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                >
+                  <div className="flex justify-between items-center mb-2">
+                    <h3 className="font-bold">
+                      {archive.eventName} - {new Date(archive.timestamp).toLocaleString()}
+                    </h3>
+                  </div>
+                  <div className="overflow-auto max-h-60">
+                    <div className="grid grid-cols-4 font-semibold bg-[#0f0e17] p-2 rounded">
+                      <div>Rank</div>
+                      <div>Participant</div>
+                      <div>Team</div>
+                      <div>Score</div>
+                    </div>
+                    {archive.participants.map((participant, idx) => (
+                      <div
+                        key={participant.id}
+                        className="grid grid-cols-4 items-center p-2 border-b border-gray-700"
+                      >
+                        <div>{idx + 1}</div>
+                        <div>{highlightText(participant.name, searchTerm)}</div>
+                        <div>{highlightText(participant.team, searchTerm)}</div>
+                        <div>{highlightText(participant.score.toString(), searchTerm)}</div>
+                      </div>
+                    ))}
+                  </div>
+                </motion.div>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LeaderboardComponent;
diff --git a/src/Components/Projects.jsx b/src/Components/Projects.jsx
index 788a4b0ba..d4d5bfc86 100644
--- a/src/Components/Projects.jsx
+++ b/src/Components/Projects.jsx
@@ -1,43 +1,44 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Link } from 'react-router-dom';
 
 const CardRow = () => {
   return (
     <div className="relative h-[91.5vh] w-full bg-transparent">
-    <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]">
-
-    <div className="flex flex-row w-full h-[90vh] items-stretch">
-      <div className="w-1/2 m-6 flex justify-center items-center p-4">
-        <Card title="Upcoming Project 2k24" link="/upcoming-projects" />
-      </div>
-      <div className="w-1/2 m-6 flex justify-center items-center p-4">
-        <Card title="Past Projects" link="/past-projects" />
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]">
+        <div className="flex flex-row w-full h-[90vh] items-stretch">
+          <div className="w-1/2 m-6 flex justify-center items-center p-4">
+            <Card title="Upcoming Project 2k24" link="/upcoming-projects" />
+          </div>
+          <div className="w-1/2 m-6 flex justify-center items-center p-4">
+            <Card title="Past Projects" link="/past-projects" />
+          </div>
+        </div>
       </div>
     </div>
-    </div>
-    </div>
   );
 };
 
-const Card = ({ title, link }) => {
+const Card = memo(({ title, link }) => {
   return (
-    
-    <div className="rounded-lg  backdrop-blur-sm overflow-hidden w-full h-full flex flex-col justify-between transform hover:scale-105 transition duration-500 ease-in-out shadow-gradient border border-gray-700">
+    <div className="rounded-lg backdrop-blur-sm overflow-hidden w-full h-full flex flex-col justify-between transform hover:scale-105 transition-transform duration-500 ease-in-out shadow-lg border border-gray-700">
       <div className="bg-glass p-5">
         <div className="animate-bounce">
-          <h5 className=" text-center my-8 font-bold text-3xl font-mono tracking-tight mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-300 via-blue-400 to-purple-300">{title}</h5>
+          <h5 className="text-center my-8 font-bold text-3xl font-mono tracking-tight mb-2 bg-clip-text text-transparent bg-gradient-to-r from-purple-300 via-blue-400 to-purple-300">
+            {title}
+          </h5>
         </div>
         <p className="text-gray-300 pt-3 font-mono">
-
-          Press on The Read More Button to know more!!! 
-
+          Press on the Read More button to know more!
         </p>
       </div>
-      <Link to={link} className="block text-center text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-b-lg text-sm px-5 py-3">
+      <Link
+        to={link}
+        className="block text-center text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-b-lg text-sm px-5 py-3"
+      >
         Read more
       </Link>
     </div>
   );
-};
+});
 
 export default CardRow;
diff --git a/tailwind.config.js b/tailwind.config.js
index 04baf8260..10c9bbd96 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@ export default {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
+    
   ],
   theme: {
     extend: {
@@ -19,5 +20,6 @@ export default {
   },
   plugins: [
     // require('@tailwindcss/forms'),
+    
   ],
 }
\ No newline at end of file