diff --git a/.gitignore b/.gitignore
index a547bf3..898a70f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+src/Components/Test.jsx
diff --git a/package-lock.json b/package-lock.json
index 9345bc4..5cf8506 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,20 +8,39 @@
       "name": "good-health",
       "version": "0.0.0",
       "dependencies": {
+        "framer-motion": "^11.3.21",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-icons": "^5.2.1",
+        "react-router-dom": "^6.26.0",
+        "react-transition-group": "^4.4.5"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
+        "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-react-refresh": "^0.4.7",
+        "postcss": "^8.4.40",
+        "tailwindcss": "^3.4.7",
         "vite": "^5.3.4"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -268,6 +287,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.0.tgz",
+      "integrity": "sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.25.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
@@ -788,6 +818,50 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -871,6 +945,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
+      "integrity": "sha512-zDICCLKEwbVYTS6TjYaWtHXxkdoUvD/QXvyVZjGCsWz5vyH7aFeONlPffPdW+Y/t6KT0MgXb2Mfjun9YpWN1dA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.19.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.1.tgz",
@@ -1234,6 +1326,31 @@
         "node": ">=4"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1370,6 +1487,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1391,6 +1545,18 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1401,6 +1567,18 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.23.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
@@ -1461,6 +1639,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001644",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001644.tgz",
@@ -1495,6 +1682,42 @@
         "node": ">=4"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1510,6 +1733,15 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1536,11 +1768,22 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
@@ -1650,6 +1893,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1662,12 +1917,33 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.3.tgz",
       "integrity": "sha512-QNdYSS5i8D9axWp/6XIezRObRHqaav/ur9z1VzCDUCH1XIFOr9WQk5xmgunhsTpjjgDy3oLxO/WMOVZlpUQrlA==",
       "dev": true
     },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -2192,6 +2468,34 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2225,6 +2529,18 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2270,6 +2586,59 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "11.3.21",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.21.tgz",
+      "integrity": "sha512-D+hfIsvzV8eL/iycld4K+tKlg2Q2LdwnrcBEohtGw3cG1AIuNYATbT5RUqIM1ndsAk+EfGhoSGf0UaiFodc5Tw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2636,6 +3005,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -2730,6 +3111,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -2781,6 +3171,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-number-object": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
@@ -2958,6 +3357,30 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3054,6 +3477,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3095,6 +3533,28 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3107,12 +3567,32 @@
         "node": "*"
       }
     },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3143,15 +3623,41 @@
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "dev": true
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@@ -3296,6 +3802,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
+      "dev": true
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3341,12 +3853,64 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
       "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
       "dev": true
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -3384,6 +3948,150 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
+      "integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3397,7 +4105,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3456,11 +4163,18 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.14.2",
@@ -3471,6 +4185,72 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
+      "dependencies": {
+        "@remix-run/router": "1.19.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
+      "dependencies": {
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -3492,6 +4272,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
@@ -3743,6 +4528,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -3752,6 +4549,71 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
@@ -3849,6 +4711,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -3861,6 +4736,72 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sucrase/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -3885,12 +4826,87 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz",
+      "integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -3900,6 +4916,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
+      "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4051,6 +5090,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
     "node_modules/vite": {
       "version": "5.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
@@ -4209,6 +5254,133 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -4221,6 +5393,18 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
+      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
+      "dev": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index d203375..8e3bcca 100644
--- a/package.json
+++ b/package.json
@@ -10,17 +10,24 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^11.3.21",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.26.0",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.40",
+    "tailwindcss": "^3.4.7",
     "vite": "^5.3.4"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.jsx b/src/App.jsx
index 8aed766..eb51d78 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,30 @@
+// import Navbar from "./Components/Navbar"
+import LandingPage from "./Components/LandingPage"
+import {BrowserRouter as Router, Route, Routes,} from "react-router-dom";
+import Post from "./Components/Post";
+import About from './Components/About';
+import Team from './Components/Team'
+import Login from './Components/Login'
+import Footer from "./Components/Footer";
 
 function App() {
 
   return (
     <>
-      <h1>hi</h1>
+     <Router>
+        <Routes>
+          <Route path="/" element={ <LandingPage/>} />
+          <Route path="/post/:title" element={< Post/>} />
+          <Route path="/about" element={< About/>} />
+          <Route path="/team" element={< Team/>} />
+          <Route path="/login" element={< Login/>} />
+        </Routes>
+
+     </Router>
+     <Footer/>
+
+     
+
     </>
   )
 }
diff --git a/src/Assets/atul.jpeg b/src/Assets/atul.jpeg
new file mode 100644
index 0000000..ac38711
Binary files /dev/null and b/src/Assets/atul.jpeg differ
diff --git a/src/Assets/bg.jpg b/src/Assets/bg.jpg
new file mode 100644
index 0000000..2adecc6
Binary files /dev/null and b/src/Assets/bg.jpg differ
diff --git a/src/Assets/bg1.jpg b/src/Assets/bg1.jpg
new file mode 100644
index 0000000..1dcd95a
Binary files /dev/null and b/src/Assets/bg1.jpg differ
diff --git a/src/Assets/bg2.jpg b/src/Assets/bg2.jpg
new file mode 100644
index 0000000..b65cfac
Binary files /dev/null and b/src/Assets/bg2.jpg differ
diff --git a/src/Assets/body.svg b/src/Assets/body.svg
new file mode 100644
index 0000000..92cd8d4
--- /dev/null
+++ b/src/Assets/body.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 49.495 49.495"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M1.434,28.084c1.527,0.188,3.644,0.847,3.644,1.587c0,0.207,0.128,0.393,0.321,0.467c0.189,0.073,0.412,0.021,0.551-0.133
+			c0.026-0.027,2.688-2.917,7.878-2.917c5.405,0,8.5,2.556,8.5,3.25c0,0.241,0.172,0.447,0.408,0.491
+			c0.24,0.044,0.471-0.087,0.559-0.312c0.019-0.051,1.904-4.85,4.922-4.85c0.01,0,0.021,0,0.027,0
+			c1.557,0.018,4.362,0.042,6.073,2.143c0.193,0.269,0.318,0.438,0.354,0.486c0.16,0.223,0.467,0.271,0.688,0.116
+			s0.281-0.456,0.136-0.686c-0.118-0.184-0.243-0.354-0.372-0.518c-1.658-2.314-8.548-12.151-8.548-15.794
+			c0-0.194-0.112-0.371-0.288-0.453c-0.175-0.083-0.382-0.056-0.531,0.068c-0.058,0.047-5.736,4.688-10.149,1.041
+			c-0.052-0.056-1.274-1.379-0.466-2.437c0.094-0.123,0.124-0.282,0.085-0.432s-0.146-0.272-0.289-0.333
+			c-0.008-0.003-0.812-0.354-1.062-1.093c-0.164-0.483-0.062-1.055,0.304-1.7c1.356-2.392,3.701-4.431,3.779-4.506
+			c0.012-0.014,1.186-1.341,3.882,0.116c0.351,0.189,0.768,0.409,1.236,0.656c3.612,1.901,10.334,5.439,12.925,9.109
+			c0.548,0.773,1.248,1.658,2.062,2.682c3.635,4.578,9.113,11.486,9.43,19.683c-0.25,0.541-1.715,3.412-5.574,5.773
+			c-3.948,2.418-11.291,4.786-23.824,2.332c-0.13-0.025-0.272,0.002-0.385,0.082c-0.113,0.079-0.187,0.2-0.206,0.338
+			c-0.006,0.039-0.591,3.967-2.71,6.318c-0.185,0.205-0.168,0.521,0.037,0.706c0.096,0.086,0.216,0.128,0.335,0.128
+			c0.137,0,0.272-0.056,0.372-0.166c1.867-2.074,2.626-5.123,2.865-6.331c3.566,0.67,6.729,0.956,9.533,0.956
+			c16.356-0.001,20.479-9.74,20.523-9.854c0.026-0.064,0.038-0.135,0.036-0.203c-0.276-8.578-5.917-15.683-9.646-20.385
+			c-0.806-1.012-1.496-1.887-2.025-2.638c-2.729-3.866-9.592-7.477-13.278-9.417c-0.465-0.245-0.879-0.463-1.228-0.651
+			c-3.397-1.837-5.051,0.036-5.063,0.062c-0.102,0.087-2.499,2.169-3.941,4.715c-0.515,0.908-0.643,1.758-0.378,2.525
+			c0.237,0.689,0.741,1.144,1.126,1.405c-0.558,1.27,0.255,2.644,0.868,3.285c4.082,3.376,8.941,0.736,10.749-0.476
+			c0.651,3.412,4.48,9.436,6.937,13.036c-1.628-0.668-3.354-0.686-4.443-0.695c-2.725-0.035-4.565,2.925-5.363,4.513
+			c-1.268-1.495-4.704-3.096-8.974-3.096c-4.277,0-6.947,1.781-8.048,2.708c-0.904-1.229-3.599-1.627-4.225-1.704
+			c-0.268-0.035-0.522,0.161-0.557,0.437C0.965,27.799,1.16,28.05,1.434,28.084z"/>
+		<path d="M30.738,39.531c1.036,0,2.114-0.15,3.146-0.551c1.934-0.75,3.356-2.25,4.239-4.457c0.104-0.256-0.021-0.547-0.276-0.65
+			c-0.256-0.103-0.547,0.021-0.647,0.279c-0.771,1.938-2.013,3.248-3.671,3.895c-3.604,1.402-8.104-0.721-8.146-0.743
+			c-0.25-0.119-0.549-0.015-0.668,0.233c-0.12,0.249-0.016,0.547,0.233,0.667C25.093,38.275,27.739,39.531,30.738,39.531z"/>
+	</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/Assets/brain.svg b/src/Assets/brain.svg
new file mode 100644
index 0000000..8db669a
--- /dev/null
+++ b/src/Assets/brain.svg
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512"  xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000000;}
+</style>
+<g>
+	<path class="st0" d="M410.34,153.043c-1.278-1.293-2.712-2.477-4.288-3.527l-1.615-0.337c-0.846-0.368-1.52-0.972-1.96-1.702
+		c-2.524-1.191-5.166-1.959-7.854-2.343c-2.321-0.322-3.951-2.477-3.614-4.814c0.313-2.336,2.484-3.966,4.805-3.645
+		c2.658,0.392,5.322,1.067,7.878,2.07c0.415-1.866,0.65-3.771,0.65-5.691c-0.008-4.202-0.995-8.443-3.096-12.433
+		c-2.399-4.562-5.918-8.121-10.034-10.55c-3.606-2.132-7.682-3.402-11.868-3.7c-0.305,3.817-1.214,7.619-2.798,11.303
+		c-0.941,2.163-3.441,3.159-5.612,2.226c-2.164-0.925-3.167-3.433-2.234-5.597c1.52-3.55,2.234-7.203,2.25-10.825l-0.055-1.544
+		c-0.29-5.017-1.952-9.861-4.782-13.992c-2.83-4.124-6.796-7.502-11.734-9.642c-3.543-1.513-7.212-2.226-10.826-2.226
+		c-6.922,0-13.624,2.666-18.687,7.368c0.948,3.222,1.489,6.616,1.489,10.144c0,2.352-1.928,4.264-4.28,4.264
+		s-4.272-1.912-4.272-4.264c0-3.457-0.635-6.734-1.795-9.783h0.008c-1.968-5.134-5.448-9.555-9.908-12.675
+		c-4.445-3.119-9.83-4.946-15.693-4.946c-5.087,0-9.83,1.388-13.906,3.786c-3.261,1.928-6.075,4.531-8.285,7.588
+		c4.319,5.918,6.874,13.232,6.874,21.118c0,2.351-1.92,4.256-4.28,4.256c-2.352,0-4.272-1.905-4.272-4.256
+		c0-6.929-2.548-13.232-6.788-18.053c-5.032-5.746-12.377-9.343-20.608-9.343c-5.714,0-10.974,1.732-15.372,4.711
+		c-4.382,2.979-7.87,7.196-9.932,12.15c-1.332,3.237-2.093,6.804-2.093,10.535c0,2.351-1.905,4.256-4.264,4.256
+		c-2.36,0-4.264-1.905-4.264-4.256c0-3.465,0.502-6.804,1.411-9.987c-3.214-1.301-6.694-2.022-10.268-2.022
+		c-2.03,0-4.068,0.235-6.138,0.698c-6.083,1.403-11.17,4.68-14.894,9.116c-2.681,3.199-4.594,7-5.589,11.084
+		c8.819,0.156,17.629,3.566,24.434,10.229c1.678,1.654,1.709,4.351,0.063,6.028c-1.654,1.693-4.351,1.709-6.036,0.07
+		c-5.346-5.212-12.236-7.823-19.166-7.831c-1.238,0-2.477,0.086-3.716,0.243h-0.015h-0.008c-5.808,0.807-11.405,3.456-15.85,7.988
+		c-5.221,5.33-7.808,12.213-7.815,19.158c0,3.959,0.862,7.948,2.586,11.617c1.34,2.892,3.222,5.589,5.652,7.956v0.007
+		c2.744,2.697,5.911,4.688,9.29,5.989c2.186,0.855,3.292,3.324,2.43,5.518c-0.854,2.211-3.316,3.309-5.518,2.446
+		c-4.413-1.709-8.583-4.326-12.19-7.862c-1.575-1.552-2.979-3.206-4.224-4.961c-3.222,4.617-4.97,10.142-4.97,15.771
+		c0,4.359,1.043,8.756,3.245,12.887c2.477,4.625,6.06,8.231,10.277,10.692c3.331,1.952,7.055,3.183,10.896,3.614l-0.008-0.259
+		c0-2.258,0.212-4.468,0.596-6.616c0.439-2.32,2.673-3.834,4.978-3.418c2.32,0.431,3.849,2.657,3.433,4.977
+		c-0.306,1.638-0.47,3.339-0.47,5.056l0.07,1.984l0.227,1.999v0.023l0.008,0.039c1.96,13.389,13.53,23.398,27.075,23.398
+		l1.968-0.078h0.008c6.004-0.431,11.397-2.752,15.677-6.365c3.002-2.532,5.463-5.706,7.149-9.282
+		c0.995-2.14,3.558-3.048,5.683-2.038c2.132,1.004,3.042,3.543,2.038,5.676c-1.826,3.849-4.319,7.321-7.313,10.276
+		c1.677,5.158,4.828,9.587,8.944,12.879c4.704,3.771,10.637,5.997,17.049,5.997l1.976-0.078h0.008
+		c4.06-0.29,7.815-1.458,11.147-3.277c-0.518-2.453-0.815-4.961-0.815-7.501c0-5.237,1.168-10.575,3.582-15.592
+		c1.027-2.124,3.574-3.01,5.691-1.983c2.124,1.011,3.026,3.567,1.999,5.691c-1.858,3.849-2.728,7.894-2.728,11.884
+		c0,2.79,0.431,5.573,1.262,8.214h0.008c2.187,6.969,7.126,13.06,14.235,16.477c3.841,1.858,7.886,2.728,11.868,2.728
+		c6.326,0,12.511-2.211,17.418-6.216l0.016-0.008c2.979-2.454,5.472-5.558,7.266-9.266l0.008-0.016
+		c1.67-3.464,2.548-7.093,2.696-10.715c0.11-2.352,2.093-4.186,4.46-4.076c2.352,0.102,4.17,2.092,4.068,4.444
+		c-0.204,4.75-1.356,9.547-3.543,14.07v-0.008c-1.756,3.661-4.068,6.883-6.78,9.634c5.032,7.227,13.404,11.782,22.458,11.774
+		c1.677,0,3.386-0.156,5.103-0.486c6.592-1.238,12.15-4.727,16.101-9.524c3.943-4.806,6.24-10.912,6.24-17.356l-0.008-0.579v-0.032
+		c-0.031-1.45-0.18-2.97-0.462-4.5c-0.682-3.629-2.07-6.922-3.974-9.83c-2.759-2.43-5.824-5.604-8.716-9.132
+		c-3.081-3.762-5.918-7.878-7.823-12.024c-1.254-2.775-2.148-5.581-2.164-8.536c0-1.309,0.18-2.665,0.674-3.966
+		c0.478-1.325,1.262-2.579,2.312-3.614c1.662-1.654,4.358-1.654,6.028,0c1.662,1.677,1.662,4.389,0,6.044l-0.322,0.51l-0.164,1.027
+		c-0.016,1.074,0.431,2.893,1.395,4.985c0.956,2.086,2.375,4.429,4.045,6.741c3.308,4.633,7.596,9.18,10.825,11.954l0.439,0.377
+		l0.322,0.478c2.642,3.935,4.578,8.466,5.51,13.412v0.008l0.306,2.116l1.278,0.055c5.409-0.008,10.856-1.607,15.646-4.97
+		c3.81-2.681,6.71-6.122,8.67-9.987c1.967-3.872,2.994-8.152,2.994-12.463c0-4.037-0.91-8.09-2.728-11.86
+		c-1.686,0.541-3.395,0.972-5.127,1.27c-2.32,0.415-4.523-1.161-4.938-3.48c-0.393-2.328,1.176-4.523,3.496-4.931
+		c7.556-1.301,14.478-5.706,18.758-12.777c2.712-4.444,3.99-9.336,3.99-14.172c0-7.126-2.752-14.094-7.878-19.26L410.34,153.043z
+		 M214.788,120.481c4.076-4.821,9.485-8.247,15.301-10.489c5.84-2.242,12.095-3.316,18.1-3.316
+		c5.84,0.008,11.452,0.996,16.218,3.207c2.132,0.971,3.065,3.519,2.077,5.659c-0.98,2.133-3.512,3.073-5.667,2.086
+		c-3.292-1.544-7.8-2.43-12.628-2.43c-4.97,0-10.268,0.916-15.027,2.767c-4.758,1.826-8.936,4.554-11.876,8.019
+		c-1.505,1.803-4.209,2.038-6.012,0.502C213.479,124.965,213.252,122.276,214.788,120.481z M311.925,221.396
+		c-4.962,0-9.462-0.564-13.569-1.512c0.11,1.175,0.188,2.484,0.188,3.872c0,2.783-0.306,5.964-1.176,9.304
+		c-0.878,3.331-2.359,6.835-4.695,10.198c-1.34,1.944-3.998,2.422-5.934,1.081c-1.944-1.341-2.414-3.99-1.09-5.942
+		c1.724-2.485,2.798-5.025,3.457-7.525c0.659-2.5,0.902-4.931,0.902-7.117c0.008-3.018-0.455-5.503-0.784-6.922
+		c-2.085-0.941-4.006-1.999-5.8-3.183c-7.149-4.625-11.93-10.731-14.933-16.54c-2.014-3.896-3.238-7.658-3.896-10.927
+		c-0.376-1.866-0.564-3.558-0.564-5.096c0-2.367,1.913-4.28,4.272-4.28c2.359,0,4.272,1.913,4.272,4.28
+		c-0.008,1.238,0.259,3.316,0.933,5.676c0.674,2.367,1.748,5.056,3.3,7.76c3.112,5.44,8.058,10.888,15.693,14.424
+		c5.103,2.367,11.452,3.903,19.424,3.903c2.359,0,4.272,1.913,4.272,4.272C316.197,219.484,314.285,221.396,311.925,221.396z
+		 M341.979,190.229c-0.878,2.18-3.363,3.246-5.558,2.375c-2.187-0.878-3.237-3.347-2.375-5.534v-0.008l0.024-0.063l0.126-0.376
+		l0.439-1.536c0.322-1.348,0.651-3.253,0.651-5.346l-0.008-0.298c-5.863,1.991-11.303,2.884-16.312,2.884
+		c-7.572,0.016-14.125-2.061-19.456-5.212c-5.338-3.15-9.492-7.321-12.597-11.562c-3.527-4.805-8.152-9.116-13.451-12.165
+		c-5.314-3.058-11.256-4.876-17.566-4.892c-5.526,0.016-11.405,1.395-17.543,4.766c-5.824,3.198-9.571,7.454-11.993,12.126
+		c-2.406,4.68-3.425,9.79-3.418,14.447c-0.016,4.311,0.894,8.214,2.077,10.676c1.011,2.132,0.094,4.672-2.03,5.683
+		c-2.124,1.012-4.672,0.094-5.683-2.03c-1.858-3.936-2.892-8.89-2.908-14.329c0.008-5.409,1.082-11.32,3.724-16.971
+		c-5.298,1.2-10.221,1.733-14.705,1.733c-2.422,0-4.704-0.157-6.875-0.439l-0.792,1.599l-0.008,0.015l-0.063,0.064l-0.227,0.29
+		l-0.91,1.238c-0.776,1.114-1.85,2.736-3.018,4.805c-2.328,4.1-4.993,9.885-6.287,16.382c-0.462,2.313-2.704,3.826-5.017,3.355
+		c-2.312-0.462-3.818-2.704-3.339-5.032c1.536-7.706,4.571-14.259,7.212-18.923c1.379-2.414,2.642-4.326,3.566-5.628
+		c-3.48-1.042-6.49-2.32-8.951-3.622c-5.62-2.987-8.545-5.981-8.795-6.224c-1.631-1.701-1.584-4.398,0.109-6.036
+		c1.701-1.63,4.39-1.583,6.028,0.094l0.048,0.047l0.25,0.243l1.223,1.026c1.112,0.878,2.83,2.086,5.126,3.308
+		c4.609,2.43,11.492,4.892,20.718,4.908c6.482,0,14.125-1.238,23.006-4.656c2.25-2.093,4.844-4.005,7.823-5.636
+		c7.306-4.005,14.666-5.808,21.65-5.808c7.98,0,15.403,2.321,21.831,6.02c6.428,3.716,11.876,8.803,16.069,14.525
+		c2.548,3.456,5.895,6.804,10.042,9.241c4.17,2.446,9.1,4.038,15.128,4.045c4.131,0,8.787-0.768,14.055-2.618
+		c-1.285-2.062-3.198-4.053-6.349-5.856c-2.054-1.168-2.783-3.77-1.623-5.816c1.168-2.062,3.763-2.768,5.816-1.623
+		c5.048,2.846,8.427,6.616,10.386,10.559c1.983,3.927,2.571,7.909,2.571,11.296C343.797,185.652,342.096,189.924,341.979,190.229z
+		 M340.38,137.938c-9.971,0-18.695-2.689-25.75-6.757c-0.995,1.38-2.328,3.112-4.045,4.993c-3.864,4.241-9.54,9.219-17.135,11.946
+		c-2.234,0.784-4.664-0.36-5.456-2.586c-0.792-2.227,0.376-4.664,2.579-5.448c5.605-1.999,10.292-5.926,13.538-9.477
+		c1.505-1.623,2.673-3.159,3.52-4.335c-4.21-3.558-7.533-7.611-9.814-11.781c-2.163-3.998-3.418-8.121-3.433-12.127
+		c0-2.351,1.913-4.264,4.272-4.264c2.352,0,4.264,1.913,4.264,4.264c-0.016,2.156,0.737,5.033,2.398,8.051
+		c1.638,3.025,4.131,6.176,7.392,8.999c6.522,5.652,15.936,9.978,27.671,9.978c2.359,0,4.264,1.921,4.264,4.28
+		C344.644,136.025,342.739,137.938,340.38,137.938z M374.023,198.037c-1.497,1.803-4.194,2.069-6.012,0.556
+		c-1.818-1.497-2.069-4.193-0.58-6.004c4.656-5.652,6.373-11.343,6.388-16.79c0.016-4.962-1.505-9.752-3.888-13.788
+		c-2.352-4.03-5.604-7.259-8.732-9.054c-2.101-1.207-4.076-1.748-5.644-1.748c-2.36,0-4.264-1.904-4.264-4.264
+		c0-2.359,1.905-4.272,4.264-4.272c2.594,0,5.134,0.635,7.549,1.701c2.406,1.051,4.68,2.548,6.796,4.375
+		c4.225,3.652,7.815,8.622,10.073,14.447c1.489,3.887,2.398,8.152,2.398,12.604C382.379,183.12,379.879,190.958,374.023,198.037z"/>
+	<path class="st0" d="M172.459,411.86l0.291,0.259c-0.008-0.008-0.008-0.008-0.016-0.016L172.459,411.86z"/>
+	<path class="st0" d="M428.699,66.574C396.943,29.442,349.183,4.155,287.986,0.462C283.008,0.156,278.054,0,273.147,0
+		c-51.469,0-98.815,16.712-133.524,47.393c-34.733,30.602-56.36,75.408-56.282,129.072c0,1.215,0.008,2.43,0.031,3.653l-0.054,6.474
+		l-44.179,78.018c-2.375,4.209-3.575,8.905-3.575,13.601c0,3.918,0.832,7.854,2.516,11.522c3.567,7.784,10.582,13.381,18.891,15.309
+		l-0.016,0.07l20.318,5.597l8.027,77.423l0.063-0.008c0.565,11.28,5.597,21.87,14.142,29.301
+		c7.596,6.616,17.292,10.206,27.263,10.206c1.01,0,2.006-0.094,3.01-0.164l23.022,1.826l1.153-0.125l0.368-0.016
+		c0.885,0,1.709,0.314,2.344,0.886l0.038,0.04c0.73,0.658,1.161,1.622,1.161,2.61V512h214.96v-12.04c0,0,0-32.616,0-45.628
+		c-0.024-5.237,1.019-15.591,3.073-25.578c1.019-5.008,2.28-10.002,3.708-14.32c1.411-4.311,3.042-7.98,4.405-10.12
+		c14.298-23.046,34.514-41.952,53.028-68.69c18.492-26.714,34.255-61.369,38.574-113.951c0.549-6.592,0.824-13.185,0.824-19.745
+		C476.436,152.079,460.508,103.674,428.699,66.574z M451.611,219.664c-4.178,48.875-17.849,78.12-34.405,102.303
+		c-16.531,24.159-36.974,43.152-53.616,69.577c-2.9,4.672-5.025,9.846-6.851,15.348c-2.712,8.239-4.648,17.222-5.973,25.586
+		c-1.317,8.387-2.014,15.991-2.022,21.854c0,8.356,0,20.992,0,33.588H181.944v-55.231c0-7.847-3.339-15.317-9.188-20.56
+		c-5.103-4.586-11.687-7.063-18.436-7.063c-0.494,0-0.972,0.054-1.458,0.086l-22.998-1.834l-1.129,0.125l-1.967,0.11
+		c-4.186,0-8.262-1.513-11.453-4.288c-3.684-3.206-5.864-7.815-6.005-12.714l-0.007-0.454l-9.767-94.221l-36.607-10.096
+		l-0.439-0.086c-1.113-0.22-2.045-0.957-2.524-1.992l-0.322-1.489l0.455-1.74l47.251-83.443l0.102-13.036v-0.173
+		c-0.023-1.128-0.031-2.242-0.031-3.354c0.079-47.251,18.444-84.658,48.153-111.035c29.74-26.315,71.27-41.35,117.573-41.35
+		c4.413,0,8.866,0.141,13.35,0.416l0.744-12.017l-0.737,12.017c55.443,3.488,96.252,25.609,123.914,57.755
+		c27.616,32.17,41.938,74.898,41.938,119.674C452.356,207.812,452.113,213.73,451.611,219.664z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/Assets/human.svg b/src/Assets/human.svg
new file mode 100644
index 0000000..65cdc43
--- /dev/null
+++ b/src/Assets/human.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 -64 640 640" xmlns="http://www.w3.org/2000/svg"><path d="M496 256c8.8 0 16-7.2 16-16s-7.2-16-16-16-16 7.2-16 16 7.2 16 16 16zm-176-80c48.5 0 88-39.5 88-88S368.5 0 320 0s-88 39.5-88 88 39.5 88 88 88zM59.8 364c10.2 15.3 29.3 17.8 42.9 9.8 16.2-9.6 56.2-31.7 105.3-48.6V416h224v-90.7c49.1 16.8 89.1 39 105.3 48.6 13.6 8 32.7 5.3 42.9-9.8l17.8-26.7c8.8-13.2 7.6-34.6-10-45.1-11.9-7.1-29.7-17-51.1-27.4-28.1 46.1-99.4 17.8-87.7-35.1C409.3 217.2 365.1 208 320 208c-57 0-112.9 14.5-160 32.2-.2 40.2-47.6 63.3-79.2 36-11.2 6-21.3 11.6-28.7 16-17.6 10.5-18.8 31.8-10 45.1L59.8 364zM368 344c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm-96-96c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm-160 8c8.8 0 16-7.2 16-16s-7.2-16-16-16-16 7.2-16 16 7.2 16 16 16zm512 192H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h608c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
\ No newline at end of file
diff --git a/src/Assets/login.jpeg b/src/Assets/login.jpeg
new file mode 100644
index 0000000..070d447
Binary files /dev/null and b/src/Assets/login.jpeg differ
diff --git a/src/Assets/people.svg b/src/Assets/people.svg
new file mode 100644
index 0000000..9520bdd
--- /dev/null
+++ b/src/Assets/people.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 18C3 15.3945 4.66081 13.1768 6.98156 12.348C7.61232 12.1227 8.29183 12 9 12C9.70817 12 10.3877 12.1227 11.0184 12.348C11.3611 12.4703 11.6893 12.623 12 12.8027C12.3107 12.623 12.6389 12.4703 12.9816 12.348C13.6123 12.1227 14.2918 12 15 12C15.7082 12 16.3877 12.1227 17.0184 12.348C19.3392 13.1768 21 15.3945 21 18V21H15.75V19.5H19.5V18C19.5 15.5147 17.4853 13.5 15 13.5C14.4029 13.5 13.833 13.6163 13.3116 13.8275C14.3568 14.9073 15 16.3785 15 18V21H3V18ZM9 11.25C8.31104 11.25 7.66548 11.0642 7.11068 10.74C5.9977 10.0896 5.25 8.88211 5.25 7.5C5.25 5.42893 6.92893 3.75 9 3.75C10.2267 3.75 11.3158 4.33901 12 5.24963C12.6842 4.33901 13.7733 3.75 15 3.75C17.0711 3.75 18.75 5.42893 18.75 7.5C18.75 8.88211 18.0023 10.0896 16.8893 10.74C16.3345 11.0642 15.689 11.25 15 11.25C14.311 11.25 13.6655 11.0642 13.1107 10.74C12.6776 10.4869 12.2999 10.1495 12 9.75036C11.7001 10.1496 11.3224 10.4869 10.8893 10.74C10.3345 11.0642 9.68896 11.25 9 11.25ZM13.5 18V19.5H4.5V18C4.5 15.5147 6.51472 13.5 9 13.5C11.4853 13.5 13.5 15.5147 13.5 18ZM11.25 7.5C11.25 8.74264 10.2426 9.75 9 9.75C7.75736 9.75 6.75 8.74264 6.75 7.5C6.75 6.25736 7.75736 5.25 9 5.25C10.2426 5.25 11.25 6.25736 11.25 7.5ZM15 5.25C13.7574 5.25 12.75 6.25736 12.75 7.5C12.75 8.74264 13.7574 9.75 15 9.75C16.2426 9.75 17.25 8.74264 17.25 7.5C17.25 6.25736 16.2426 5.25 15 5.25Z" fill="#080341"/>
+</svg>
\ No newline at end of file
diff --git a/src/Assets/rishav.jpeg b/src/Assets/rishav.jpeg
new file mode 100644
index 0000000..4401cb7
Binary files /dev/null and b/src/Assets/rishav.jpeg differ
diff --git a/src/Assets/rittik.jpeg b/src/Assets/rittik.jpeg
new file mode 100644
index 0000000..6f463ec
Binary files /dev/null and b/src/Assets/rittik.jpeg differ
diff --git a/src/Assets/vikas.jpeg b/src/Assets/vikas.jpeg
new file mode 100644
index 0000000..ccb5241
Binary files /dev/null and b/src/Assets/vikas.jpeg differ
diff --git a/src/Components/About.jsx b/src/Components/About.jsx
new file mode 100644
index 0000000..6cdf13e
--- /dev/null
+++ b/src/Components/About.jsx
@@ -0,0 +1,93 @@
+import React from "react";
+import Navbar from './Navbar'
+import human from '../Assets/human.svg'
+import people from '../Assets/people.svg'
+import brain from '../Assets/brain.svg'
+import body from '../Assets/body.svg'
+
+const Faq = () => {
+
+  return (
+    <div className="bg-gradient-to-b from-[#F8F4E1] to-[#ecd79f] text-[#543310] min-h-screen">
+      <Navbar/>
+      <section class="">
+    <div class="py-12 bg-">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+
+            <div class="lg:text-center">
+                <h2
+                    class="font-heading mb-4 bg-[#af8f6f]  px-4 py-2 rounded-lg md:w-64 md:mx-auto text-xs font-semibold tracking-widest text-black uppercase title-font">
+                    Why choose us?
+                </h2>
+                <p class="font-heading mt-2 text-3xl leading-8 font-semibold tracking-tight text-gray-900 sm:text-4xl">
+                Sustainable Development: A Holistic Approach to Health
+                </p>
+                <p class="mt-4 max-w-2xl text-lg text-gray-700 lg:mx-auto">
+                Sustainable development is a comprehensive framework that seeks to balance economic growth, environmental stewardship, and social well-being. Within this framework, health plays a crucial role, as it directly impacts and is influenced by sustainable development practices. Our project focuses on four key aspects of health: physical health, mental health, social health, and psychological health.
+                </p>
+            </div>
+
+            <div class="mt-10">
+                <dl class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
+                    <div class="relative">
+                        <dt>
+                            <div
+                                class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
+                                <img src={body} />
+                            </div>
+                            <p class="font-heading ml-16 text-lg leading-6 font-bold text-gray-700">Physical Health</p>
+                        </dt>
+                        <dd class="mt-2 ml-16 text-base text-gray-500">
+                        Physical health is fundamental to overall well-being and quality of life. It encompasses the proper functioning of the body, the prevention and management of diseases, and the promotion of healthy lifestyles.
+                        </dd>
+                    </div>
+                    <div class="relative">
+                        <dt>
+                            <div
+                                class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
+                                <img src={brain} />
+                            </div>
+                            <p class="font-heading ml-16 text-lg leading-6 font-bold text-gray-700">Mental Health
+
+                            </p>
+                        </dt>
+                        <dd class="mt-2 ml-16 text-base text-gray-500"> Mental health is integral to a person's ability to lead a fulfilling life. It includes emotional, psychological, and social well-being, affecting how individuals think, feel, and act.
+                        </dd>
+                    </div>
+                    <div class="relative">
+                        <dt>
+                            <div
+                                class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
+                                <img src={people} />
+
+                            </div>
+                            <p class="font-heading ml-16 text-lg leading-6 font-bold text-gray-700">Social Health
+                            </p>
+                        </dt>
+                        <dd class="mt-2 ml-16 text-base text-gray-500"> Social health refers to the ability to form satisfying interpersonal relationships and adapt to social situations. It is essential for personal and community well-being.
+                        </dd>
+                    </div>
+                    <div class="relative">
+                        <dt>
+                            <div
+                                class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-primary-500 text-white">
+                                <img src={human} />
+
+                            </div>
+                            <p class="font-heading ml-16 text-lg leading-6 font-bold text-gray-700">Psychological Health
+                            </p>
+                        </dt>
+                        <dd class="mt-2 ml-16 text-base text-gray-500"> Psychological health is closely linked to mental health but focuses more on the cognitive and emotional aspects of well-being. It includes self-esteem, self-acceptance, and the ability to manage emotions effectively.
+                        </dd>
+                    </div>
+                </dl>
+            </div>
+
+        </div>
+    </div>
+</section>
+    </div>
+  );
+};
+
+export default Faq;
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
new file mode 100644
index 0000000..9f24904
--- /dev/null
+++ b/src/Components/Footer.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { FaDribbble, FaTwitter, FaInstagram, FaLinkedin, FaFacebook } from 'react-icons/fa';
+
+const Footer = () => {
+  return (
+    <footer className="bg-black text-white py-8 px-4">
+      <div className="container mx-auto max-w-6xl">
+        <div className="flex flex-col md:flex-row justify-between items-center mb-8">
+          <nav className="mb-6 md:mb-0">
+            <ul className="flex space-x-6">
+              {['Work', 'About', 'Careers', 'Contact'].map((item) => (
+                <li key={item}>
+                  <a
+                    href="#"
+                    className="text-lg hover:text-yellow-400 transition-colors duration-300"
+                  >
+                    {item}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+          <div className="flex space-x-6">
+            {[
+              { Icon: FaDribbble, label: 'Dribbble' },
+              { Icon: FaTwitter, label: 'Twitter' },
+              { Icon: FaInstagram, label: 'Instagram' },
+              { Icon: FaLinkedin, label: 'LinkedIn' },
+              { Icon: FaFacebook, label: 'Facebook' },
+            ].map(({ Icon, label }) => (
+              <a
+                key={label}
+                href="#"
+                className="text-2xl hover:text-yellow-400 transition-colors duration-300 transform hover:scale-110"
+                aria-label={label}
+              >
+                <Icon />
+              </a>
+            ))}
+          </div>
+        </div>
+        <div className="text-center text-sm">
+          <p className="mb-2">&copy; Copyright 2024 Good Health</p>
+          <a
+            href="#"
+            className="hover:text-yellow-400 transition-colors duration-300"
+          >
+            Privacy Policy
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/Components/InteractiveRoadmap.css b/src/Components/InteractiveRoadmap.css
new file mode 100644
index 0000000..e7a4e35
--- /dev/null
+++ b/src/Components/InteractiveRoadmap.css
@@ -0,0 +1,19 @@
+.subpoint-enter {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  .subpoint-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 300ms, transform 300ms;
+  }
+  .subpoint-exit {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .subpoint-exit-active {
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 300ms, transform 300ms;
+  }
+  
\ No newline at end of file
diff --git a/src/Components/InteractiveRoadmap.jsx b/src/Components/InteractiveRoadmap.jsx
new file mode 100644
index 0000000..bd711be
--- /dev/null
+++ b/src/Components/InteractiveRoadmap.jsx
@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { FaArrowRight, FaArrowDown } from "react-icons/fa";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+import './InteractiveRoadmap.css'; 
+
+const InteractiveRoadmap = ({ onClose }) => {
+  const [activeStep, setActiveStep] = useState(null);
+
+  const steps = [
+    {
+      title: "Start with Self-Assessment",
+      description: "Understand your current health status by assessing your mental, physical, psychological, and social health.",
+    },
+    {
+      title: "Set Realistic Goals",
+      description: "Define clear and achievable health goals that you want to accomplish over time.",
+    },
+    {
+      title: "Develop Healthy Habits",
+      description: "Incorporate daily habits such as regular exercise, balanced diet, and mindfulness practices.",
+    },
+    {
+      title: "Monitor Progress",
+      description: "Regularly check your progress and make adjustments to your goals and habits as needed.",
+    },
+    {
+      title: "Seek Support",
+      description: "Engage with health professionals, join support groups, and leverage resources for guidance.",
+    },
+    {
+      title: "Celebrate Achievements",
+      description: "Acknowledge and celebrate your progress and milestones to stay motivated.",
+    },
+  ];
+
+  const handleStepClick = (index) => {
+    setActiveStep(activeStep === index ? null : index);
+  };
+
+  return (
+    <div className="bg-white p-6 rounded-2xl shadow-lg mb-12 interactive-roadmap-enter">
+      <h2 className="text-2xl font-bold mb-6 text-center">Interactive Roadmap for Better Health</h2>
+      <div className="flex flex-col">
+        {steps.map((step, index) => (
+          <div key={index} className="mb-4">
+            <div
+              className={`p-4 rounded-lg cursor-pointer ${index === activeStep ? 'bg-yellow-400 text-black' : 'bg-gray-100 text-gray-700'} flex justify-between items-center`}
+              onClick={() => handleStepClick(index)}
+            >
+              <h3 className="font-bold text-lg">{step.title}</h3>
+              {index === activeStep ? <FaArrowDown /> : <FaArrowRight />}
+            </div>
+            <CSSTransition
+              in={index === activeStep}
+              timeout={300}
+              classNames="subpoint"
+              unmountOnExit
+            >
+              <p className="mt-2 p-4 bg-yellow-100 rounded-lg">{step.description}</p>
+            </CSSTransition>
+          </div>
+        ))}
+      </div>
+      <button
+        className="bg-red-500 text-white px-4 py-2 rounded-full mt-4"
+        onClick={onClose}
+      >
+        Close
+      </button>
+    </div>
+  );
+};
+
+export default InteractiveRoadmap;
diff --git a/src/Components/LandingPage.css b/src/Components/LandingPage.css
new file mode 100644
index 0000000..0df1fee
--- /dev/null
+++ b/src/Components/LandingPage.css
@@ -0,0 +1,19 @@
+.roadmap-enter {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  .roadmap-enter-active {
+    opacity: 1;
+    transform: scale(1);
+    transition: opacity 300ms, transform 300ms;
+  }
+  .roadmap-exit {
+    opacity: 1;
+    transform: scale(1);
+  }
+  .roadmap-exit-active {
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 300ms, transform 300ms;
+  }
+  
\ No newline at end of file
diff --git a/src/Components/LandingPage.jsx b/src/Components/LandingPage.jsx
new file mode 100644
index 0000000..aaa604c
--- /dev/null
+++ b/src/Components/LandingPage.jsx
@@ -0,0 +1,109 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import Navbar from "./Navbar";
+import { FaArrowRight } from "react-icons/fa";
+import InteractiveRoadmap from "./InteractiveRoadmap";
+import { CSSTransition } from "react-transition-group";
+import bgImg from "../Assets/bg2.jpg";
+import './LandingPage.css'; 
+
+const LandingPage = () => {
+  const navigate = useNavigate();
+  const [showRoadmap, setShowRoadmap] = useState(false);
+  const [animatedCards, setAnimatedCards] = useState([]);
+
+  const handleBreakTheCycleClick = () => {
+    setShowRoadmap(!showRoadmap);
+  };
+
+  const handleRoadmapClose = () => {
+    setShowRoadmap(false);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimatedCards(["Mental Health", "Physical Health", "Psychological Health", "Social Health"]);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className="bg-gradient-to-b from-[#F8F4E1] to-[#E8DFC7] text-[#543310] min-h-screen">
+      <Navbar />
+      <div className="p-6">
+        <main className="max-w-6xl mx-auto">
+          <div className="bg-gray-800 rounded-3xl p-12 mb-12 relative overflow-hidden shadow-2xl ">
+            <img
+              src={bgImg}
+              className=" md:block hidden absolute inset-0 w-full h-full object-cover opacity-50"
+              alt="Background"
+            />
+            <div className=" p-4 relative z-10 w-1/2 pr-4 text-white slide-in-left">
+              <p className="text-sm mb-2 text-yellow-400">IBM CBR'S</p>
+              <h1 className="text-5xl font-bold mb-6">Sustainable Development</h1>
+              <p className="text-lg mb-8 leading-relaxed">
+                Embark on a journey towards better mental health and sustainable
+                well-being. Our expert-guided approach helps you build resilience,
+                foster personal growth, and create lasting positive change in your
+                life.
+              </p>
+              <button
+                className="bg-yellow-400 text-black px-8 py-3 rounded-full text-lg font-semibold 
+                  hover:bg-yellow-300 transition-all duration-300 flex items-center"
+                onClick={handleBreakTheCycleClick}
+              >
+                Break The Cycle
+                <FaArrowRight className="ml-2" />
+              </button>
+            </div>
+          </div>
+
+          <CSSTransition
+            in={showRoadmap}
+            timeout={300}
+            classNames="roadmap"
+            unmountOnExit
+          >
+            <InteractiveRoadmap onClose={handleRoadmapClose} />
+          </CSSTransition>
+
+          <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${showRoadmap ? 'mt-12' : 'mt-0'}`}>
+            {["Mental Health", "Physical Health", "Psychological Health", "Social Health"].map(
+              (title, index) => (
+                <div
+                  key={index}
+                  className={`bg-white p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 opacity-0 ${
+                    animatedCards.includes(title) ? 'animate-slide-in' : ''
+                  }`}
+                  style={{ animationDelay: `${index * 100}ms` }}
+                >
+                  <div
+                    onClick={() => navigate(`/post/${title}`)}
+                    className="flex justify-between items-center mb-4 cursor-pointer"
+                  >
+                    <h3 className="font-bold text-lg text-[#543310]">{title}</h3>
+                    <span className="text-sm bg-yellow-400 text-black px-3 py-1 rounded-full">
+                      {index + 1}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-600">
+                    Discover strategies and insights to improve your {title.toLowerCase()}...
+                  </p>
+                  <button
+                    onClick={() => navigate(`/post/${title}`)}
+                    className="mt-4 text-orange-500 hover:text-orange-600 transition-colors duration-300 flex items-center"
+                  >
+                    Learn more
+                    <FaArrowRight className="ml-2" />
+                  </button>
+                </div>
+              )
+            )}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;
\ No newline at end of file
diff --git a/src/Components/Login.jsx b/src/Components/Login.jsx
new file mode 100644
index 0000000..a70c03c
--- /dev/null
+++ b/src/Components/Login.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { FaEnvelope, FaLock } from 'react-icons/fa';
+import { FcGoogle } from "react-icons/fc";
+import Navbar from './Navbar';
+import img from '../Assets/login.jpeg';
+
+const Login = () => {
+  const [isSignup, setIsSignup] = useState(false);
+  const [formData, setFormData] = useState({ email: '', password: '' });
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(formData);
+  };
+
+  return (
+    <div className="bg-gradient-to-b from-[#F8F4E1] to-[#E8DFC7] min-h-screen">
+      <Navbar />
+      <div className='flex items-center justify-center min-h-[calc(100vh-64px)]'>
+        <div className='bg-white rounded-2xl shadow-2xl overflow-hidden max-w-4xl w-full'>
+          <div className='flex flex-col md:flex-row'>
+            <div className='w-full md:w-1/2 p-10'>
+              <h2 className='text-4xl font-bold text-[#543310] mb-8'>
+                {isSignup ? "Create Account" : "Welcome Back"}
+              </h2>
+              <form onSubmit={handleSubmit} className='space-y-6'>
+                <div className="relative">
+                  <FaEnvelope className="absolute top-3 left-3 text-gray-400" />
+                  <input
+                    type='email'
+                    name='email'
+                    placeholder='Email'
+                    onChange={handleChange}
+                    value={formData.email}
+                    className='w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#a78059] transition duration-300'
+                  />
+                </div>
+                <div className="relative">
+                  <FaLock className="absolute top-3 left-3 text-gray-400" />
+                  <input
+                    type='password'
+                    name='password'
+                    placeholder='Password'
+                    onChange={handleChange}
+                    value={formData.password}
+                    className='w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#a78059] transition duration-300'
+                  />
+                </div>
+                <button 
+                  type='submit'
+                  className='w-full bg-[#74512D] text-white rounded-lg py-3 font-semibold hover:bg-[#543310] transition duration-300 transform hover:scale-105'
+                >
+                  {isSignup ? "Sign Up" : "Log In"}
+                </button>
+              </form>
+              <div className='mt-8 text-center'>
+                <p className='text-sm text-gray-600'>
+                  {isSignup ? "Already have an account?" : "Don't have an account?"}
+                  <button 
+                    onClick={() => setIsSignup(!isSignup)}
+                    className='ml-2 text-[#a78059] hover:underline focus:outline-none font-semibold'
+                  >
+                    {isSignup ? "Log In" : "Sign Up"}
+                  </button>
+                </p>
+              </div>
+              <div className='mt-8'>
+                <div className='relative'>
+                  <div className='absolute inset-0 flex items-center'>
+                    <div className='w-full border-t border-gray-300'></div>
+                  </div>
+                  <div className='relative flex justify-center text-sm'>
+                    <span className='px-2 bg-white text-gray-500'>Or continue with</span>
+                  </div>
+                </div>
+                <div className='mt-6'>
+                  <button className='w-full flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition duration-300 transform hover:scale-105'>
+                    <FcGoogle className='h-5 w-5  mr-2' />
+                    Google
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className='hidden md:block w-1/2'>
+              <img src={img} alt='login' className='object-cover w-full h-full' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
\ No newline at end of file
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
new file mode 100644
index 0000000..44bbedd
--- /dev/null
+++ b/src/Components/Navbar.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { FaHome, FaUsers, FaQuestionCircle, FaSignInAlt} from 'react-icons/fa';
+
+
+const Navbar = () => {
+  const navigate = useNavigate();
+  return (
+      <nav className="flex justify-between items-center py-6 px-8 bg-[#F8F4E1] shadow-md">
+        <div className="text-[#543310] text-3xl font-bold">Good Health</div>
+        <ul className="flex space-x-6 text-sm">
+          {[
+            { name: 'Home', icon: FaHome, path: '/' },
+            { name: 'Team', icon: FaUsers, path: '/team' },
+            { name: 'About', icon: FaQuestionCircle, path: '/about' },
+            { name: 'Login', icon: FaSignInAlt, path: '/login' },
+          ].map((item, index) => (
+            <li
+              key={index}
+              onClick={() => navigate(item.path)}
+              className="cursor-pointer flex items-center hover:text-orange-500 transition-colors duration-300"
+            >
+              <item.icon className="mr-2" />
+              {item.name}
+            </li>
+          ))}
+        </ul>
+      </nav>
+  );
+};
+
+export default Navbar;
diff --git a/src/Components/Post.jsx b/src/Components/Post.jsx
new file mode 100644
index 0000000..d6a8263
--- /dev/null
+++ b/src/Components/Post.jsx
@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import Navbar from "./Navbar";
+import { FaArrowLeft } from "react-icons/fa";
+import healthData from '../JSON/notes.json';
+
+const Post = () => {
+  const navigate = useNavigate();
+  const { title } = useParams();
+  const [item, setItem] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const filteredItem = healthData.find((d) => d.title === title);
+    setItem(filteredItem);
+    setLoading(false);
+  }, [title]);
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-screen bg-[#F8F4E1] text-[#543310]">
+        <div className="animate-spin rounded-full h-32 w-32 border-t-4 border-b-4 border-[#AF8F6F]"></div>
+      </div>
+    );
+  }
+
+  if (!item) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen bg-[#F8F4E1] text-[#543310]">
+        <p className="text-xl mb-4">Post not found.</p>
+        <button
+          onClick={() => navigate("/")}
+          className="flex items-center text-[#543310] hover:text-orange-500 transition-colors duration-300 bg-white py-2 px-4 rounded-full shadow-md hover:shadow-lg"
+        >
+          <FaArrowLeft className="mr-2" />
+          Back to Home
+        </button>
+      </div>
+    );
+  }
+
+  const fallbackImage = "https://via.placeholder.com/400x300?text=Image+Not+Available";
+
+  return (
+    <div className="bg-gradient-to-b from-[#F8F4E1] to-[#E8DFC7] text-[#543310] min-h-screen">
+      <Navbar />
+      <header className="text-center py-6  bg-gradient-to-r from-[#cf955a] to-[#bd6212] text-white shadow-lg">
+        <div className="container mx-auto">
+          <h1 className="text-3xl md:text-5xl font-bold mb-4 tracking-tight">{item.title}</h1>
+          <p className="text-lg md:text-xl max-w-2xl mx-auto font-light">{item.description}</p>
+        </div>
+      </header>
+      <main className="container mx-auto py-12 px-4 animate-fadeIn">
+        <button
+          onClick={() => navigate("/")}
+          className="mb-8 flex items-center text-[#543310] hover:text-orange-500 transition-colors duration-300 bg-white py-2 px-4 rounded-full shadow-md hover:shadow-lg"
+        >
+          <FaArrowLeft className="mr-2" />
+          Back to Home
+        </button>
+
+        <section className="space-y-12">
+          {item.topics.map((card, index) => (
+            <div
+              key={index}
+              className="bg-white rounded-lg shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1"
+            >
+              <div className="md:flex">
+                <div className="md:flex-shrink-0">
+                  <img
+                    src={card.pointPhoto || fallbackImage}
+                    alt={card.pointTitle}
+                    className="h-48 w-full object-cover md:w-48 md:h-full"
+                    onError={(e) => {
+                      e.target.onerror = null;
+                      e.target.src = fallbackImage;
+                    }}
+                  />
+                </div>
+                <div className="p-8 flex flex-col justify-center">
+                  <h2 className="text-xl md:text-2xl font-semibold text-[#543310] mb-4 border-b-2 border-[#AF8F6F] pb-2">
+                    {card.pointTitle}
+                  </h2>
+                  <p className="text-gray-600 leading-relaxed">
+                    {card.pointDescription}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default Post;
\ No newline at end of file
diff --git a/src/Components/Team.jsx b/src/Components/Team.jsx
new file mode 100644
index 0000000..1578815
--- /dev/null
+++ b/src/Components/Team.jsx
@@ -0,0 +1,220 @@
+import React from "react";
+import Navbar from "./Navbar";
+import rishav from '../Assets/rishav.jpeg'
+import Atul from '../Assets/atul.jpeg'
+import Rittik from '../Assets/rittik.jpeg'
+import vikas from '../Assets/vikas.jpeg'
+
+const Team = () => {
+  return (
+    <div className="bg-gradient-to-b from-[#F8F4E1] to-[#E8DFC7] text-[#543310] min-h-screen">
+      <Navbar />
+      <div className="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-8">
+        <div className="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+          <div>
+            <p className="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
+              Core Team
+            </p>
+          </div>
+          <h2 className="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
+            Meet our team
+          </h2>
+          <p className="text-sm text-gray-700 md:text-base">
+            We are a dynamic team of four enthusiastic members currently working
+            at IBM. Each of us brings a unique set of skills and perspectives,
+            united by our passion for technology and innovation. Our internship
+            program at IBM offers us an incredible opportunity to learn, grow,
+            and contribute to cutting-edge projects that make a difference in
+            the world.
+          </p>
+        </div>
+        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="relative overflow-hidden transition duration-300 transform rounded shadow-lg lg:hover:-translate-y-2 hover:shadow-2xl">
+            
+             <img
+                className="object-cover  w-full h-56 md:h-64 xl:h-80 "
+                src={rishav}
+               />
+            <div className="absolute inset-0 flex flex-col justify-center px-5 py-4 text-center transition-opacity duration-300 bg-black bg-opacity-75 opacity-0 hover:opacity-100">
+              <p className="mb-1 text-lg font-bold text-gray-100">
+                Rishav Chakraborty
+              </p>
+              <p className="mb-4 text-xs text-gray-100">Team Leader</p>
+              <p className="mb-4 text-xs tracking-wide text-gray-400">
+                JavaScript || React.JS || Tailwind || Firebase || Node.js || Oracle DB || Java || Problem Solving
+              </p>
+              <div className="flex items-center justify-center space-x-3">
+                <a
+                  href="https://www.linkedin.com/in/rishav-chakraborty-56a76612a"
+                  className="text-white transition-colors duration-300 hover:text-teal-accent-400"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    className="h-5"
+                    viewBox="0 0 16 16"
+                  >
+                    <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+                  </svg>
+                </a>
+                <a
+                  href="https://github.com/Dev-Rishav"
+                  className="text-white transition-colors duration-300 hover:text-teal-accent-400"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    class="h-5"
+                    viewBox="0 0 16 16"
+                  >
+                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="relative overflow-hidden transition duration-300 transform rounded shadow-lg lg:hover:-translate-y-2 hover:shadow-2xl">
+               <img
+                className="object-cover w-full h-56 md:h-64 xl:h-80"
+                src={Atul}
+                alt="Person"
+              /> 
+              <div className="absolute inset-0 flex flex-col justify-center px-5 py-4 text-center transition-opacity duration-300 bg-black bg-opacity-75 opacity-0 hover:opacity-100">
+                <p className="mb-1 text-lg font-bold text-gray-100">
+                  Atul Tandan
+                </p>
+                <p className="mb-4 text-xs text-gray-100">Team Member </p>
+                <p className="mb-4 text-xs tracking-wide text-gray-400">
+                  Javascript || React.js || Firebase || Tailwind || Java || Problem Solving
+                </p>
+                <div className="flex items-center justify-center space-x-3">
+                  <a
+                    href="https://www.linkedin.com/in/atul-tandan-6583b7287"
+                    className="text-white transition-colors duration-300 hover:text-teal-accent-400"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      className="h-5"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://github.com/atul074"
+                    className="text-white transition-colors duration-300 hover:text-teal-accent-400"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      class="h-5"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="relative overflow-hidden transition duration-300 transform rounded shadow-lg lg:hover:-translate-y-2 hover:shadow-2xl">
+               <img
+                className="object-cover w-full h-56 md:h-64 xl:h-80"
+                src={Rittik}
+                alt="Person"
+              />
+              <div className="absolute inset-0 flex flex-col justify-center px-5 py-4 text-center transition-opacity duration-300 bg-black bg-opacity-75 opacity-0 hover:opacity-100">
+                <p className="mb-1 text-lg font-bold text-gray-100">
+                  Ritik Parmar
+                </p>
+                <p className="mb-4 text-xs text-gray-100">Team Member</p>
+                <p className="mb-4 text-xs tracking-wide text-gray-400">
+                Javascript || CSS || C++ || Problem Solving
+                </p>
+                <div className="flex items-center justify-center space-x-3">
+                  <a
+                    href="https://www.linkedin.com/in/ritik-parmar-b79403287/"
+                    className="text-white transition-colors duration-300 hover:text-teal-accent-400"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      className="h-5"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://github.com/ritikparmar45"
+                    className="text-white transition-colors duration-300 hover:text-teal-accent-400"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      class="h-5"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div className="relative overflow-hidden transition duration-300 transform rounded shadow-lg lg:hover:-translate-y-2 hover:shadow-2xl">
+               <img
+                className="object-cover w-full h-56 md:h-64 xl:h-80"
+                src={vikas}
+                alt="Person"
+              /> 
+              <div className="absolute inset-0 flex flex-col justify-center px-5 py-4 text-center transition-opacity duration-300 bg-black bg-opacity-75 opacity-0 hover:opacity-100">
+                <p className="mb-1 text-lg font-bold text-gray-100">
+                  Vikas Nayma
+                </p>
+                <p className="mb-4 text-xs text-gray-100">Team Member</p>
+                <p className="mb-4 text-xs tracking-wide text-gray-400">
+                Javascript || React.js || Firebase ||  Tailwind || C++ || Problem Solving
+                </p>
+                <div className="flex items-center justify-center space-x-3">
+                  <a
+                    href="https://www.linkedin.com/in/vikas-nayma-305054286/"
+                    className="text-white transition-colors duration-300 hover:text-teal-accent-400"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      className="h-5"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://github.com/vikasnayma"
+                    className="text-white transition-colors duration-300 hover:text-teal-accent-400"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="currentColor"
+                      class="h-5"
+                      viewBox="0 0 16 16"
+                    >
+                      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Team;
diff --git a/src/JSON/notes.json b/src/JSON/notes.json
new file mode 100644
index 0000000..98f8676
--- /dev/null
+++ b/src/JSON/notes.json
@@ -0,0 +1,106 @@
+[
+  {
+    "title": "Physical Health",
+    "description": "Physical health refers to the well-being of the body and its ability to function optimally in daily activities.",
+    "topics": [
+      {
+        "pointTitle": "Healthy Eating",
+        "pointPhoto": "https://www.bhf.org.uk/-/media/images/information-support/support/healthy-living/healthy-eating/fruits-and-vegetables-620x400.jpg?h=400&w=620&rev=23d0aed687fc4a508e027bf7ffae5957&hash=0C97A88A71A0C2730A3C82ACDC1489AB",
+        "pointDescription": "Focus on a balanced diet with plenty of fruits, vegetables, whole grains, lean proteins, and healthy fats. Stay hydrated by drinking plenty of water throughout the day. Limit processed foods, sugar, and unhealthy fats."
+      },
+      {
+        "pointTitle": "Regular Exercise",
+        "pointPhoto": "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Regular exercise refers to the consistent practice of physical activities aimed at improving or maintaining overall health and fitness. It involves a variety of movements that work different parts of the body, providing numerous benefits to physical and mental well-being."
+      },
+      {
+        "pointTitle": "Adequate Sleep",
+        "pointPhoto": "https://images.unsplash.com/photo-1564501049412-53362aa9bb7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Ensure you get 7-9 hours of quality sleep each night to allow your body to rest, recover, and function optimally during the day."
+      },
+      {
+        "pointTitle": "Routine Check-ups",
+        "pointPhoto": "https://images.unsplash.com/photo-1511174511562-5f7f18b874f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Visit healthcare professionals regularly for check-ups and screenings to detect and address any health issues early."
+      }
+    ]
+  },
+  {
+    "title": "Mental Health",
+    "description": "Mental health encompasses emotional, psychological, and social well-being.",
+    "topics": [
+      {
+        "pointTitle": "Stress Management",
+        "pointPhoto": "https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1099&q=80",
+        "pointDescription": "Learn techniques to manage stress, such as deep breathing, meditation, and time management."
+      },
+      {
+        "pointTitle": "Seeking Professional Help",
+        "pointPhoto": "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Don't hesitate to seek help from mental health professionals when needed. Therapy and counseling can be beneficial for many mental health concerns."
+      },
+      {
+        "pointTitle": "Mindfulness and Meditation",
+        "pointPhoto": "https://images.unsplash.com/photo-1518183214770-9cffbec72538?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Incorporate mindfulness and meditation practices into your daily routine to enhance emotional balance and reduce anxiety."
+      },
+      {
+        "pointTitle": "Connecting with Nature",
+        "pointPhoto": "https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Spend time outdoors and connect with nature to improve your mental well-being and reduce stress."
+      }
+    ]
+  },
+  {
+    "title": "Psychological Health",
+    "description": "Psychological health focuses on cognitive and emotional well-being.",
+    "topics": [
+      {
+        "pointTitle": "Positive Thinking",
+        "pointPhoto": "https://images.unsplash.com/photo-1495727034151-8fdc73e332a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1465&q=80",
+        "pointDescription": "Practice positive thinking and reframing negative thoughts to improve overall psychological well-being."
+      },
+      {
+        "pointTitle": "Mindfulness",
+        "pointPhoto": "https://images.unsplash.com/photo-1508672019048-805c876b67e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80",
+        "pointDescription": "Practice mindfulness techniques to stay present and reduce anxiety about the future or regrets about the past."
+      },
+      {
+        "pointTitle": "Emotional Regulation",
+        "pointPhoto": "https://images.unsplash.com/photo-1519362909361-3a43f2074b5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Develop skills to regulate your emotions effectively, ensuring a balanced and healthy emotional state."
+      },
+      {
+        "pointTitle": "Lifelong Learning",
+        "pointPhoto": "https://images.unsplash.com/photo-1506784926709-22f42f4e39bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Engage in lifelong learning to keep your mind active and improve cognitive function. This can include reading, taking up new hobbies, or pursuing educational opportunities."
+      }
+    ]
+  },
+  {
+    "title": "Social Health",
+    "description": "Social health involves building and maintaining healthy relationships with others.",
+    "topics": [
+      {
+        "pointTitle": "Building Strong Relationships",
+        "pointPhoto": "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80",
+        "pointDescription": "Foster strong, supportive relationships with family, friends, and your community."
+      },
+      {
+        "pointTitle": "Effective Communication",
+        "pointPhoto": "https://images.unsplash.com/photo-1573497019236-17f8177b81e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Develop effective communication skills to improve your interactions with others and build stronger connections."
+      },
+      {
+        "pointTitle": "Community Involvement",
+        "pointPhoto": "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Participate in community activities and volunteer work to build a sense of belonging and contribute to the well-being of others."
+      },
+      {
+        "pointTitle": "Conflict Resolution",
+        "pointPhoto": "https://images.unsplash.com/photo-1607748854736-3b15f7c9e168?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+        "pointDescription": "Learn and apply conflict resolution skills to handle disagreements constructively and maintain healthy relationships."
+      }
+    ]
+  }
+]
diff --git a/src/index.css b/src/index.css
index e69de29..24f181b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html {
+      scroll-behavior: smooth;
+    }
+  }
+
+  @keyframes slideInLeft {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  
+  .slide-in-left {
+    animation: slideInLeft 1s ease-in-out forwards;
+  }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..4271965
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      animation: {
+        'fadeIn': 'fadeIn 1s ease-in',
+        'slide-in': 'slideIn 1s ease-out forwards',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateY(100%)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        }
+      },
+    },
+  },
+  variants: {
+    extend: {
+      transform: ['hover', 'focus'],
+    }
+  },
+  plugins: [],
+}
+