diff --git a/package-lock.json b/package-lock.json
index b83498a..375e618 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5398,9 +5398,10 @@
       }
     },
     "node_modules/acorn": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz",
-      "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5417,6 +5418,18 @@
         "acorn-walk": "^7.1.1"
       }
     },
+    "node_modules/acorn-globals/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
@@ -5443,6 +5456,18 @@
         "xtend": "^4.0.2"
       }
     },
+    "node_modules/acorn-node/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmmirror.com/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/acorn-node/node_modules/acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -5491,14 +5516,15 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.3",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
-      "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "license": "MIT",
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
       },
       "funding": {
         "type": "github",
@@ -5521,33 +5547,11 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+    "node_modules/ajv/node_modules/json-schema-traverse": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
+      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
     },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
@@ -6042,6 +6046,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/babel-loader/node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -7297,21 +7310,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -7323,11 +7321,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -8712,6 +8705,22 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -8877,17 +8886,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/espree/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -9342,6 +9340,22 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
+    "node_modules/fast-uri": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmmirror.com/fast-uri/-/fast-uri-3.0.6.tgz",
+      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -9580,6 +9594,31 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -10012,6 +10051,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/har-validator/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/harmony-reflect": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
@@ -14157,17 +14212,6 @@
         }
       }
     },
-    "node_modules/jsdom/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/jsdom/node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -14732,21 +14776,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -14758,11 +14787,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -17919,6 +17943,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -19064,17 +19097,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/terser/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -19288,6 +19310,20 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -19622,21 +19658,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -19648,11 +19669,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-middleware/node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -19740,21 +19756,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -19766,11 +19767,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-server/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -19852,17 +19848,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/webpack/node_modules/acorn": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz",
-      "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -20039,21 +20024,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -20068,11 +20038,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/workbox-build/node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
diff --git a/src/components/App.js b/src/components/App.js
index 3bebd83..d40d9b8 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { LanguageProvider } from '../utils/i18n';
 
 import Editor from './Editor';
 import Home from './Home'
@@ -8,13 +9,15 @@ import Faq from './Faq';
 const App = () => {
 
     return (
-        <BrowserRouter>
-            <Routes>
-                <Route exact path="/" element={<Home />} />
-                <Route exact path="/editor" element={<Editor />} />
-                <Route exact path="/faq" element={<Faq />} />
-            </Routes>
-        </BrowserRouter>
+        <LanguageProvider>
+            <BrowserRouter>
+                <Routes>
+                    <Route exact path="/" element={<Home />} />
+                    <Route exact path="/editor" element={<Editor />} />
+                    <Route exact path="/faq" element={<Faq />} />
+                </Routes>
+            </BrowserRouter>
+        </LanguageProvider>
     );
 
 }
diff --git a/src/components/Editor.js b/src/components/Editor.js
index 5796605..dad6256 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -5,6 +5,7 @@ import Select from 'react-select';
 import RandomTheme from './RandomTheme';
 import { ImgProvider } from '../utils/ImgContext'
 import Header from "./Header";
+import { useLanguage } from '../utils/i18n';
 
 
 import { THEMES } from "../utils/constants";
@@ -28,9 +29,8 @@ const defaultSettings = {
 const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json"
 
 class Editor extends React.Component {
-
-
 	state = defaultSettings;
+	
 	componentDidMount() {
 		// console.log("Mount")
 		fetch(devIconsUrl).then(r => r.json()).then(data => {
@@ -38,6 +38,7 @@ class Editor extends React.Component {
 			this.setState({ devIconOptions: data.map(item => ({ 'value': item.name, 'label': item.name })) })
 		})
 	}
+	
 	handleReset = () => {
 		this.setState({
 			...defaultSettings,
@@ -58,226 +59,166 @@ class Editor extends React.Component {
 		</div>
 	);
 
-
-
 	render() {
+		// 由于类组件无法直接使用钩子，我们在render方法中使用内联组件
 		return (
-			<div className="max-w-[1400px]  mx-auto">
-				<Header />
-
-				<ImgProvider>
-					<div className="flex md:flex-row flex-col  ">
-
-						<div className="bg-white flex flex-col h-100 md:w-3/12">
-
-							<div>
-								<div className="flex md:flex-row flex-col">
-
-
-
-									<div className="bg-white font-Inter  border-dashed border-r-2 border-gray-100 w-full p-4 ">
-										<div>
-
-											<div className="m-2 flex flex-col">
-												<span className="font-medium text-sm pb-1">Blog Title</span>
-												<textarea
-													type="text"
-													value={this.state.title}
-													placeholder="Enter title here"
-													className="focus:outline-none border text-gray-700 text-lg  rounded p-2 h-24"
-													onChange={(e) => this.setState({ title: e.target.value })}
-												/>
-											</div>
-
-											<div className="flex flex-col m-2 ">
-												<span className="font-medium text-sm pb-1">Author</span>
-												<input
-													type="text"
-													value={this.state.author}
-													placeholder="Author"
-													className="focus:outline-none border text-gray-700 text-lg rounded bg-white p-2"
-													onChange={(e) => this.setState({ author: e.target.value })}
-												></input>
-											</div>
-
-											<div className="flex flex-col m-2 ">
-												<span className="font-medium text-sm pb-1">Icon</span>
-												<Select value={this.state.icon}
-													onChange={(selectedOption) => this.setState({ icon: selectedOption })}
-													options={this.state.devIconOptions}
-													formatOptionLabel={this.formatOptionLabel}
-													className="outline-none focus:outline-none items-center text-lg text-gray-700"
-												/>
-											</div>
-											<div className="w-full">
-
-												{this.state.icon.label === 'upload your own' ?
-													<div className="flex items-center justify-center w-64 mx-auto">
-														<input type="file"
-															className="focus:outline-none w-full text-sm cursor-pointer bg-white rounded border"
-															onChange={(e) => this.setState({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
-														/>
-													</div>
-													:
-													<div></div>
-												}
-
-											</div>
-
-											<div className="flex items-center">
+			<EditorWithLanguage 
+				state={this.state}
+				handleReset={this.handleReset}
+				formatOptionLabel={this.formatOptionLabel}
+				getRandomTheme={this.getRandomTheme}
+				onStateChange={(newState) => this.setState(newState)}
+			/>
+		);
+	}
+}
 
-												<div className="flex flex-col m-2 w-1/2">
-													<span className="font-medium text-sm pb-1">Font</span>
+// 包装函数组件来使用语言钩子
+const EditorWithLanguage = (props) => {
+	const { t } = useLanguage();
+	const { state, handleReset, formatOptionLabel, getRandomTheme, onStateChange } = props;
+
+	return (
+		<div className="max-w-[1400px]  mx-auto">
+			<Header />
+
+			<ImgProvider>
+				<div className="flex md:flex-row flex-col  ">
+					<div className="bg-white flex flex-col h-100 md:w-3/12">
+						<div>
+							<div className="flex md:flex-row flex-col">
+								<div className="bg-white font-Inter  border-dashed border-r-2 border-gray-100 w-full p-4 ">
+									<div>
+										<div className="m-2 flex flex-col">
+											<span className="font-medium text-sm pb-1">{t('blogTitle')}</span>
+											<textarea
+												type="text"
+												value={state.title}
+												placeholder={t('enterTitle')}
+												className="focus:outline-none border text-gray-700 text-lg  rounded p-2 h-24"
+												onChange={(e) => onStateChange({ title: e.target.value })}
+											/>
+										</div>
 
-													<select
-														value={this.state.font}
-														onChange={(e) => this.setState({ font: e.target.value })}
-														className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
-														<option>font-serif</option>
-														<option>font-sans</option>
-														<option>font-mono</option>
-														<option>font-Inter</option>
-														<option>font-Poppins</option>
-														<option>font-Anek</option>
-													</select>
-												</div>
-												<div className="flex flex-col m-2 w-1/2">
-													<span className="font-medium text-sm pb-1">Color</span>
-													<div className="border rounded flex items-center p-1">
+										<div className="flex flex-col m-2 ">
+											<span className="font-medium text-sm pb-1">{t('author')}</span>
+											<input
+												type="text"
+												value={state.author}
+												placeholder={t('author')}
+												className="focus:outline-none border text-gray-700 text-lg rounded bg-white p-2"
+												onChange={(e) => onStateChange({ author: e.target.value })}
+											></input>
+										</div>
 
-														{/* <span className="text-base text-gray-700  mx-2">{this.state.bgColor}</span> */}
-														<input type="color" value={this.state.bgColor}
-															onChange={(e) => this.setState({ bgColor: e.target.value })}
-															className="h-8 w-full  rounded"
-														/>
-													</div>
+										<div className="flex flex-col m-2 ">
+											<span className="font-medium text-sm pb-1">{t('icon')}</span>
+											<Select value={state.icon}
+												onChange={(selectedOption) => onStateChange({ icon: selectedOption })}
+												options={state.devIconOptions}
+												formatOptionLabel={formatOptionLabel}
+												className="outline-none focus:outline-none items-center text-lg text-gray-700"
+											/>
+										</div>
+										<div className="w-full">
+											{state.icon.label === 'upload your own' ?
+												<div className="flex items-center justify-center w-64 mx-auto">
+													<input type="file"
+														className="focus:outline-none w-full text-sm cursor-pointer bg-white rounded border"
+														onChange={(e) => onStateChange({ 'customIcon': URL.createObjectURL(e.target.files[0]) })}
+													/>
 												</div>
+												:
+												<div></div>
+											}
+										</div>
 
+										<div className="flex items-center">
+											<div className="flex flex-col m-2 w-1/2">
+												<span className="font-medium text-sm pb-1">{t('font')}</span>
+												<select
+													value={state.font}
+													onChange={(e) => onStateChange({ font: e.target.value })}
+													className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
+													<option>font-serif</option>
+													<option>font-sans</option>
+													<option>font-mono</option>
+													<option>font-Inter</option>
+													<option>font-Poppins</option>
+													<option>font-Anek</option>
+												</select>
 											</div>
-
-
-											<div className="flex items-center">
-												{/* <div className="flex flex-col m-2 w-1/2">
-													<span className="font-medium text-sm pb-1">Pattern</span>
-													<select
-														onChange={(e) => this.setState({ pattern: e.target.value })}
-														className="focus:outline-none border text-lg p-2 rounded"
-														value={this.state.pattern}>
-
-														<option>none</option>
-														<option>graph-paper</option>
-														<option>jigsaw</option>
-														<option>hideout</option>
-														<option>dots</option>
-														<option>falling-triangles</option>
-														<option>circuit-board</option>
-														<option>temple</option>
-														<option>anchors</option>
-														<option>brickwall</option>
-														<option>overlapping-circles</option>
-														<option>wiggle</option>
-														<option>tic-tac-toe</option>
-														<option>leaf</option>
-														<option>bubbles</option>
-														<option>squares</option>
-														<option>explorer</option>
-														<option>jupiter</option>
-														<option>sun</option>
-													</select>
-												</div> */}
-
-												<div className="flex flex-col m-2 w-full">
-													<span className="font-medium text-sm pb-1">Platform</span>
-
-													<select
-														onChange={(e) => this.setState({ platform: e.target.value })}
-														value={this.state.platform}
-														className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
-														<option>hashnode</option>
-														<option>dev</option>
-													</select>
+											<div className="flex flex-col m-2 w-1/2">
+												<span className="font-medium text-sm pb-1">{t('color')}</span>
+												<div className="border rounded flex items-center p-1">
+													<input type="color" value={state.bgColor}
+														onChange={(e) => onStateChange({ bgColor: e.target.value })}
+														className="h-8 w-full  rounded"
+													/>
 												</div>
-
 											</div>
-
-											<button
-												className="flex items-center bg-gray-700 hover:bg-gray-800 text-white rounded-lg mt-6 text-base  p-1 px-4 mx-auto border"
-												onClick={this.handleReset}>
-												<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-white mr-2 " fill="currentColor" viewBox="0 0 24 24" ><path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path><path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path></svg>
-												<span className="font-Inter">Reset All</span>
-											</button>
-
 										</div>
 
+										<div className="flex items-center">
+											<div className="flex flex-col m-2 w-full">
+												<span className="font-medium text-sm pb-1">{t('platform')}</span>
+												<select
+													onChange={(e) => onStateChange({ platform: e.target.value })}
+													value={state.platform}
+													className="focus:outline-none text-gray-700 text-lg p-2 rounded border">
+													<option>hashnode</option>
+													<option>dev</option>
+												</select>
+											</div>
+										</div>
 
-
+										<button
+											className="flex items-center bg-gray-700 hover:bg-gray-800 text-white rounded-lg mt-6 text-base  p-1 px-4 mx-auto border"
+											onClick={handleReset}>
+											<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-white mr-2 " fill="currentColor" viewBox="0 0 24 24" ><path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path><path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path></svg>
+											<span className="font-Inter">{t('resetAll')}</span>
+										</button>
 									</div>
-
 								</div>
 							</div>
-
-
-							{/* <div className="mx-4 my-1">
-						<h6>Download As</h6>
-						<select onChange={(e) => this.setState({ download: e.target.value })}
-							className="form-control input"
-							value={this.state.download}>
-							<option>PNG</option>
-							<option>JPEG</option>
-						</select>
-					</div> */}
-
-						</div>
-
-						{/* cover image preview */}
-
-						<div className=" flex m-2 flex-col items-center justify-center ">
-
-							<ComponentToImg downloadAs={this.state.download}>
-								<CoverImage {...this.state} />
-							</ComponentToImg>
 						</div>
+					</div>
 
-						{/* themes section */}
-
-						<div className="md:w-60 px-4 border-dashed border-l-2 border-gray-100 bg-white">
-							<div className="h-99 w-full flex flex-col justify-center">
-
-								<div className="flex items-center">
-									<h2 className="text-lg pl-2 font-inter font-semibold">Themes</h2>
-									<div className="ml-auto mr-1 p-2">
-										<RandomTheme onThemeChange={this.getRandomTheme} />
-
-									</div>
-								</div>
-
-								<div className="  flex gap-2 flex-wrap justify-center overflow-y-scroll ">
-
-									{
-										THEMES.map(themePlaceholder => (
-											<div className={`${themePlaceholder.label === this.state.theme ? 'border-blue-400 border-2' : ''}`} key={themePlaceholder.label}>
-
-
-												<img src={themePlaceholder.preview} alt={themePlaceholder.label}
-													onClick={(e) => this.setState({ theme: themePlaceholder.label })}
-													className=" cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 "
-												/>
-											</div>
-										))
-									}
+					{/* cover image preview */}
+					<div className=" flex m-2 flex-col items-center justify-center ">
+						<ComponentToImg downloadAs={state.download}>
+							<CoverImage {...state} />
+						</ComponentToImg>
+					</div>
 
+					{/* themes section */}
+					<div className="md:w-60 px-4 border-dashed border-l-2 border-gray-100 bg-white">
+						<div className="h-99 w-full flex flex-col justify-center">
+							<div className="flex items-center">
+								<h2 className="text-lg pl-2 font-inter font-semibold">{t('themes')}</h2>
+								<div className="ml-auto mr-1 p-2">
+									<RandomTheme onThemeChange={getRandomTheme} />
 								</div>
-
-
+							</div>
+							
+							<div className="flex gap-2 flex-wrap justify-center overflow-y-scroll">
+								{
+									THEMES.map(themePlaceholder => (
+										<div className={`${themePlaceholder.label === state.theme ? 'border-blue-400 border-2' : ''}`} key={themePlaceholder.label}>
+											<img src={themePlaceholder.preview} alt={themePlaceholder.label}
+												onClick={(e) => onStateChange({ theme: themePlaceholder.label })}
+												className="cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300"
+											/>
+										</div>
+									))
+								}
 							</div>
 						</div>
-
 					</div>
-				</ImgProvider>
-			</div>
-
-		);
-	}
-}
+				</div>
+			</ImgProvider>
+		</div>
+	);
+};
 
 export default Editor;
diff --git a/src/components/Faq.js b/src/components/Faq.js
index 6853d68..7d0fa83 100644
--- a/src/components/Faq.js
+++ b/src/components/Faq.js
@@ -1,68 +1,70 @@
 import React, { useState } from 'react';
 import Header from './Header';
+import { useLanguage } from '../utils/i18n';
+
 const Faq = () => {
+    const [showMsg, setShowMsg] = useState(false);
+    const { t } = useLanguage();
 
-    const [showMsg, setShowMsg] = useState(false)
+    // 用于处理包含HTML标签的翻译文本
+    const createMarkup = (html) => {
+        return { __html: html };
+    };
 
     return (
         <div>
             <Header />
 
             <div className=" md:w-10/12 mx-auto md:p-20 p-4">
-                <h1 className="font-bold md:text-4xl  text-2xl font-Anek text-center">Frequently asked questions</h1>
-
+                <h1 className="font-bold md:text-4xl  text-2xl font-Anek text-center">{t('faqTitle')}</h1>
 
                 <div className="flex flex-wrap justify-center mt-20 font-Inter">
-
                     <div className="md:w-5/12 m-4 ">
-                        <p className="text-xl font-bold py-2">What is Coverview?</p>
-                        <p className="text-lg text-gray-700">Coverview is a tool to create cover images for your blogs quickly and easily.</p>
+                        <p className="text-xl font-bold py-2">{t('whatIsCoverview')}</p>
+                        <p className="text-lg text-gray-700">{t('whatIsOverviewAnswer')}</p>
                     </div>
 
                     <div className="md:w-5/12 m-4">
-                        <p className="text-xl font-bold py-2">Is Coverview free?</p>
-                        <p className="text-lg text-gray-700">Yes! Coverview is absolutely free to use.</p>
+                        <p className="text-xl font-bold py-2">{t('isItFree')}</p>
+                        <p className="text-lg text-gray-700">{t('isItFreeAnswer')}</p>
                     </div>
 
                     <div className="md:w-5/12 m-4">
-                        <p className="text-xl  font-bold py-2">Can I upload my custom brand logo?</p>
-                        <p className="text-lg text-gray-700">Yes.Just search and select <span className="font-semibold">custom</span> in icon section and you can upload your own logo to personalize your cover images.</p>
-                        <p className="italic mt-2">See <a href="https://twitter.com/WankhadeRutik/status/1518270774335111168?s=20&t=XMjbJpGAC7anadJ690_DUg" className="text-blue-400" target="_blank" rel="noreferrer">example</a></p>
+                        <p className="text-xl  font-bold py-2">{t('customLogo')}</p>
+                        <p className="text-lg text-gray-700" dangerouslySetInnerHTML={createMarkup(t('customLogoAnswer'))}></p>
+                        <p className="italic mt-2">{t('example')} <a href="https://twitter.com/WankhadeRutik/status/1518270774335111168?s=20&t=XMjbJpGAC7anadJ690_DUg" className="text-blue-400" target="_blank" rel="noreferrer">{t('example')}</a></p>
                     </div>
 
                     <div className="md:w-5/12 m-4">
-                        <p className="text-xl font-bold my-2">Can I use coverview for non-technical/personal blogs?</p>
-                        <p className="text-lg text-gray-700">Yes! Why not? Even though coverview was built with technical blogs in mind, you can still use it for your personal blogs. Check out the stylish theme for more.</p>
+                        <p className="text-xl font-bold my-2">{t('nonTechnical')}</p>
+                        <p className="text-lg text-gray-700">{t('nonTechnicalAnswer')}</p>
                     </div>
 
                     <div className="md:w-5/12 m-4">
-                        <p className="text-xl font-bold my-2">Why use Coverview?</p>
-                        <p className="text-lg text-gray-700">Because it's simple, quick and easy to use. Why spend hours designing when you can create cover images in seconds?</p>
+                        <p className="text-xl font-bold my-2">{t('whyUse')}</p>
+                        <p className="text-lg text-gray-700">{t('whyUseAnswer')}</p>
                     </div>
 
                     <div className="md:w-5/12 m-4">
-                        <p className="text-xl font-bold my-2">Want to support/sponsor the project?</p>
-                        <p className="text-lg text-gray-700">If coverview adds value in your life and you wish to support this project, you can <a href="https://github.com/sponsors/rutikwankhade" target="_blank" rel="noreferrer" className="font-semibold hover:underline">sponsor me on Github</a> or <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="hover:underline text-pink-400 font-semibold">buy me a coffee</a>.</p>
+                        <p className="text-xl font-bold my-2">{t('sponsor')}</p>
+                        <p className="text-lg text-gray-700" dangerouslySetInnerHTML={createMarkup(t('sponsorAnswer').replace('<a>', '<a href="https://github.com/sponsors/rutikwankhade" target="_blank" rel="noreferrer" class="font-semibold hover:underline">').replace('</a> or <a>', '</a> or <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" class="hover:underline text-pink-400 font-semibold">'))}></p>
                     </div>
-
                 </div>
 
                 <div className="md:w-1/2 mx-auto text-center mt-20">
                     <button
                         onClick={() => setShowMsg(!showMsg)}
                         className="text-6xl text-center m-2">💡</button>
-                    <p className="text-xl font-Anek font-semibold text-gray-800">Want to know a secret? Click me</p>
-
+                    <p className="text-xl font-Anek font-semibold text-gray-800">{t('clickMe')}</p>
                 </div>
 
                 {
                     showMsg ?
                         <div>
-                            <h2 className="md:w-7/12 text-4xl border text-center mx-auto my-10 p-10 rounded-xl shadow-sm font-Nunito">Blog titles with a minimum of 8 words have 21% better click-through</h2>
+                            <h2 className="md:w-7/12 text-4xl border text-center mx-auto my-10 p-10 rounded-xl shadow-sm font-Nunito">{t('blogTip')}</h2>
                         </div> :
                         <div></div>
                 }
-
             </div>
         </div>
     );
diff --git a/src/components/Header.js b/src/components/Header.js
index f042eae..0ce424a 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,27 +1,31 @@
 import React from 'react';
 import { Link } from 'react-router-dom'
 import logo from '../assets/icons/logo.png'
-const Header = () => {
+import { useLanguage } from '../utils/i18n';
 
+const Header = () => {
+	const { language, toggleLanguage, t } = useLanguage();
 	const tweetText = encodeURIComponent(`type your thoughts here, Try https://coverview.vercel.app by @rutikdotdev`)
 
 	return (
-
-		<div className="bg-white text-xl md:px-2 flex  border-dashed border-b-2 border-gray-100 p-2">
+		<div className="bg-white text-xl md:px-2 flex border-dashed border-b-2 border-gray-100 p-2">
 			<Link to="/" className="flex items-center">
 				<img src={logo} alt="logo" className="w-8 h-8 mx-4" />
 				<h1 className="font-semibold">Coverview</h1>
-
 			</Link>
 
-			<div className="ml-auto md:mr-4 flex items-center ">
+			<div className="ml-auto md:mr-4 flex items-center">
 				{/* <Link to="/faq" className="text-gray-700 hover:text-gray-800 text-base font-Nunito mx-4"><span className="hidden md:inline-block">How to use</span></Link> */}
-				<a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="bg-gray-700 hover:bg-gray-800 px-4 rounded-full p-1 text-white md:text-sm md:flex hidden items-center text-xs mx-2 font-Nunito">⭐ Star on Github</a>
-				<a href={`https://x.com/intent/tweet?text=${tweetText}`} className="mx-2 bg-blue-400 hover:bg-blue-500 md:text-sm text-xs rounded-full px-4 font-semibold text-white p-1">Share on Twitter</a>
+				<a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="bg-gray-700 hover:bg-gray-800 px-4 rounded-full p-1 text-white md:text-sm md:flex hidden items-center text-xs mx-2 font-Nunito">{t('starOnGithub')}</a>
+				<a href={`https://x.com/intent/tweet?text=${tweetText}`} className="mx-2 bg-blue-400 hover:bg-blue-500 md:text-sm text-xs rounded-full px-4 font-semibold text-white p-1">{t('shareOnTwitter')}</a>
+				<button 
+					onClick={toggleLanguage} 
+					className="bg-indigo-500 hover:bg-indigo-600 px-4 rounded-full p-1 text-white md:text-sm text-xs mx-2 font-Nunito"
+				>
+					{language === 'en' ? '中文' : 'English'}
+				</button>
 			</div>
-
 		</div>
-
 	);
 }
 
diff --git a/src/components/Home.js b/src/components/Home.js
index c937037..3823f50 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -5,7 +5,7 @@ import cover1 from '../assets/images/cover1.webp'
 import cover2 from '../assets/images/cover2.webp'
 import cover3 from '../assets/images/cover3.webp'
 import cover4 from '../assets/images/cover4.webp'
-
+import { useLanguage } from '../utils/i18n';
 
 
 import step1 from '../assets/images/step1.png'
@@ -15,166 +15,117 @@ import hashnodeLogo from '../assets/images/hashnode-logo.png'
 import devLogo from '../assets/images/dev-logo.png'
 
 import WallOfLove from './walloflove';
+import Header from './Header';
+
 const Home = () => {
+    const { t } = useLanguage();
 
+    // 用于处理包含HTML标签的翻译文本
+    const createMarkup = (html) => {
+        return { __html: html };
+    };
 
     return (
         <div className="">
-
+            <Header />
 
             <div className="">
-
-                <div className="text-xl  flex   p-2 md:w-10/12 mx-auto">
-                    <div className="flex items-center">
-                        <img src={logo} alt="logo" className="w-8 h-8 mx-2" />
-                        <h1 className="font-semibold md:text-xl text-lg font-Inter">Coverview</h1>
-                    </div>
-
-                    <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="hover:translate-x-2 flex items-center justify-center duration-300 bg-gray-700 group rounded-xl   text-white  ml-auto mr-4 font-Inter font-semibold ">
-                        <span className="md:text-sm text-xs px-2 md:px-4 py-1 md:py-2">⭐ Star on Github</span>
-                    </a>
-                </div>
-
                 <div className="  mx-auto md:px-20 py-6   flex flex-col items-center">
                     <h1 className="md:w-7/12 md:mx-10 mx-6 my-10 text-center md:text-5xl text-4xl font-extrabold text-gray-700 font-Anek">
-                        Creating cover images for your blogs is now super easy
+                        {t('heroTitle')}
                     </h1>
                     <Link to="/editor" className="hover:translate-x-2 duration-300 bg-gray-700 hover:bg-gray-800 group rounded-full border-4 border-gray-100 px-6 md:px-8 text-white md:text-2xl text-base mx-auto font-Poppins font-semibold md:p-4 p-2">
-                        <span className="md:text-2xl font-semibold text-lg">Create Now</span>
+                        <span className="md:text-2xl font-semibold text-lg">{t('createNow')}</span>
                     </Link>
-
                 </div>
 
-
-
-
                 <div className="  flex flex-row items-center justify-center mx-auto md:w-10/12">
-
                     <div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:-rotate-3  rotate-6 duration-100 bg-white p-2 shadow-lg shadow-gray-50 w-1/5 rounded-lg flex flex-col ">
                         <img src={cover2} className="border border-gray-100 rounded mb-2" alt="cover1" />
                         <p className="animate animate-pulse bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
                         <p className="animate animate-pulse w-8/12 bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
-
                     </div>
 
                     <div className="m-4 transform hover:scale-105 hover:rotate-3 -rotate-2  duration-300 bg-white p-4 shadow-lg shadow-gray-50 w-1/3 rounded-lg flex flex-col ">
                         <img src={cover1} className="rounded border border-gray-100 mb-2" alt="cover-2" />
                         <p className="animate animate-pulse bg-gray-50 md:h-6 h-3 rounded mb-2"></p>
                         <p className="animate animate-pulse w-8/12 bg-gray-50 md:h-6 h-3 rounded mb-2"></p>
-
                     </div>
 
                     <div className="m-4 transform -translate-y-20 border animate hover:scale-105 hover:rotate-3 -rotate-6 duration-100 bg-white p-2 sshadow-lg shadow-gray-50 w-1/5 rounded-lg flex flex-col ">
                         <img src={cover3} className="rounded border border-gray-100 mb-2" alt="cover3" />
                         <p className="animate animate-pulse bg-gray-50 md:h-5 h-2 rounded mb-2"></p>
                         <p className="animate animate-pulse w-8/12 bg-gray-50 md:odd:h-5 h-2 rounded mb-2"></p>
-
                     </div>
-
                 </div>
-
-
             </div>
 
-
-
-
             <div className="md:mt-32  my-t0 mx-auto">
-
                 <div className=" mx-auto flex flex-col md:w-10/12">
                     <div className="w-full text-center mx-auto p-10 md:p-4 ">
-                        <h2 className="md:text-5xl md:w-9/12 mx-auto text-3xl px-4 font-bold font-Anek text-gray-700">Why cover images are more important than you think?</h2>
-
+                        <h2 className="md:text-5xl md:w-9/12 mx-auto text-3xl px-4 font-bold font-Anek text-gray-700">{t('whyCoverImagesTitle')}</h2>
                     </div>
 
                     <div className="flex md:flex-row flex-col justify-center md:gap-6 gap-2 mx-auto">
-
                         <div className=" p-10  rounded-xl  shadow-gray-100 flex flex-col gap-4 md:w-4/12 ">
                             <div className=" my-2 md:mx-0 mx-auto bg-purple-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
                                 <svg className="text-white w-20 h-20" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path></svg>
                             </div>
-                            <p className="md:text-2xl text-xl md:text-left text-center font-Nunito ">Around <span className="font-bold">7 million</span> blog posts are published daily. And with the rise of new-age blogging tools, it will only go up.</p>
+                            <p className="md:text-2xl text-xl md:text-left text-center font-Nunito " dangerouslySetInnerHTML={createMarkup(t('blogPostsCount'))}></p>
                         </div>
 
                         <div className="p-10  rounded-xl  shadow-gray-100 flex  flex-col gap-4  md:w-4/12 ">
                             <div className="md:mx-0 mx-auto my-2 bg-green-300 h-24 w-24 p-4 flex justify-center items-center rounded-full">
                                 <svg className="text-white w-20 h-20" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
                             </div>
-                            <p className="md:text-2xl text-xl md:text-left text-center font-Nunito ">A good cover image can lead to <span className="font-bold">higher conversion rate</span> than a random stock image.</p>
+                            <p className="md:text-2xl text-xl md:text-left text-center font-Nunito " dangerouslySetInnerHTML={createMarkup(t('conversionRate'))}></p>
                         </div>
-
                     </div>
-
-
-
                 </div>
 
-
-                <h2 className="md:text-5xl text-3xl md:w-7/12 md:mx-auto mt-12 md:mt-32 mx-10 font-bold font-Anek text-center text-gray-700">With coverview, you can create cover images in <span className="text-indigo-400">seconds</span></h2>
-
+                <h2 className="md:text-5xl text-3xl md:w-7/12 md:mx-auto mt-12 md:mt-32 mx-10 font-bold font-Anek text-center text-gray-700" dangerouslySetInnerHTML={createMarkup(t('secondsTitle'))}></h2>
 
                 <div className="md:w-8/12 md:my-16 p-4 flex md:flex-row flex-col gap-4 mx-auto">
-
                     <div className="md:w-1/2 md:border border-gray-50 md:shadow-sm md:shadow-gray-50 rounded-xl px-4 pt-6 flex flex-col md:mx-10">
-
                         <div className="text-center">
-                            <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">Step 1</div>
-
-                            <p className="md:text-3xl text-2xl p-4 text-center mx-auto my-2 font-semibold font-Inter text-gray-700">Add your blog title and author name</p>
+                            <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">{t('step1Title')}</div>
+                            <p className="md:text-3xl text-2xl p-4 text-center mx-auto my-2 font-semibold font-Inter text-gray-700">{t('step1Desc')}</p>
                         </div>
                         <img src={step1} alt="preview" className="mt-2 w-10/12 mx-auto rounded-t-xl shadow-sm" />
-
                     </div>
 
                     <div className="md:w-1/2 md:border  md:border-gray-50 md:shadow-sm md:shadow-gray-50 rounded-xl px-4 pt-6 flex flex-col md:mx-10">
-
                         <div className="text-center">
-                            <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">Step 2</div>
-
-                            <p className="md:text-3xl text-2xl p-4  text-center mx-auto my-2 font-semibold font-Inter text-gray-700">Customize with colors, fonts and icons</p>
+                            <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">{t('step2Title')}</div>
+                            <p className="md:text-3xl text-2xl p-4  text-center mx-auto my-2 font-semibold font-Inter text-gray-700">{t('step2Desc')}</p>
                         </div>
                         <img src={step2} alt="preview" className="mt-auto mb-0 w-10/12 mx-auto rounded-t-xl shadow-sm" />
-
                     </div>
-
-
                 </div>
 
-
-
                 <div className="md:w-7/12 p-6 mx-auto   rounded-xl md:border  md:border-gray-50 md:shadow-sm md:shadow-gray-50  flex md:flex-row flex-col justify-center items-center ">
-
                     <div className="text-center md:w-1/2 m-4">
-                        <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">Step 3</div>
-                        <p className="md:text-3xl mt-4 text-2xl pb-2  text-center mx-auto my-2 font-semibold font-Inter text-gray-700">Choose your style from different themes</p>
-
-                        <p className="md:text-xl text-gray-500 text-lg">Unsplash integration, custom icon for personal branding and more.</p>
+                        <div className="text-xl w-max mx-auto text-white py-1 px-4 font-Anek font-semibold bg-indigo-400  rounded-full ">{t('step3Title')}</div>
+                        <p className="md:text-3xl mt-4 text-2xl pb-2  text-center mx-auto my-2 font-semibold font-Inter text-gray-700">{t('step3Desc')}</p>
+                        <p className="md:text-xl text-gray-500 text-lg">{t('step3Features')}</p>
                     </div>
 
                     <div className="flex md:w-1/2 hideout p-6">
                         <div className="flex flex-col w-1/2 ">
                             <img src={cover1} alt="preview" className=" hover:scale-105 duration-300 m-2 rounded-lg shadow-sm" />
                             <img src={cover2} alt="preview" className="hover:scale-105 duration-300  m-2 rounded-lg shadow-sm" />
-
                         </div>
 
-
                         <div className="flex flex-col mt-4 w-1/2">
                             <img src={cover3} alt="preview" className="hover:scale-105 duration-300   m-2 rounded-lg shadow-sm" />
                             <img src={cover4} alt="preview" className="hover:scale-105 duration-300  m-2 rounded-lg shadow-sm" />
-
                         </div>
-
                     </div>
-
                 </div>
 
-
                 <div className="md:w-6/12 md:my-20 mb-6 mx-auto">
-
                     <div className="text-center m-6 px-6">
-
-                        <p className="md:text-2xl text-xl my-2 font-semibold font-Inter text-gray-700">Supports platforms like Hashnode or Dev.to</p>
+                        <p className="md:text-2xl text-xl my-2 font-semibold font-Inter text-gray-700">{t('platformSupport')}</p>
                     </div>
                     <div className="flex mx-auto justify-center gap-4">
                         <img src={hashnodeLogo} className="md:w-20 w-10" alt="hashnode" />
@@ -182,44 +133,30 @@ const Home = () => {
                     </div>
                 </div>
 
-
                 <WallOfLove />
 
                 <div className="bg-gray-800  text-white p-2">
                     <div className="md:w-8/12 mx-auto pt-32 p-6">
-                        <h2 className="md:text-6xl text-4xl text-center font-Anek font-bold  mx-auto">Simple, quick, and easy to use</h2>
-                        <p className="md:text-2xl text-lg font-Inter text-gray-300 text-center py-4 md:w-8/12 mx-auto">So you can focus on writing your blog and never worry about those cover images.</p>
+                        <h2 className="md:text-6xl text-4xl text-center font-Anek font-bold  mx-auto">{t('simpleTitle')}</h2>
+                        <p className="md:text-2xl text-lg font-Inter text-gray-300 text-center py-4 md:w-8/12 mx-auto">{t('simpleDesc')}</p>
                         <Link to="/editor" >
-                            <button className="flex mx-auto my-4 hover:translate-x-2 duration-300 bg-indigo-500 hover:bg-indigo-600  rounded-full  text-white md:text-xl text-base font-Nunito font-semibold p-4 px-8">It's Free! Try Now &rarr;</button>
+                            <button className="flex mx-auto my-4 hover:translate-x-2 duration-300 bg-indigo-500 hover:bg-indigo-600  rounded-full  text-white md:text-xl text-base font-Nunito font-semibold p-4 px-8">{t('tryNow')}</button>
                         </Link>
                     </div>
 
                     <footer className=" p-10 gap-2 flex md:flex-row flex-col-reverse font-Inter md:px-20 md:justify-between justify-center mx-auto md:w-10/12 w-full items-center">
-
                         <div className=" flex flex-col">
-                            <span className="md:text-lg text-sm">Made with 💛 by <a href="https://rutik.dev" className="font-semibold underline decoration-wavy underline-offset-4" target="_blank" rel="noreferrer">Rutik Wankhade</a></span>
+                            <span className="md:text-lg text-sm">{t('madeWith')} <a href="https://rutik.dev" className="font-semibold underline decoration-wavy underline-offset-4" target="_blank" rel="noreferrer">Rutik Wankhade</a></span>
                         </div>
 
                         <div className="md:text-lg text-sm flex flex-wrap gap-4 ">
-                            <Link to="/faq" className="hover:underline">How to use</Link>
-                            <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="hover:underline">Github</a>
-                            <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="hover:underline">Buy me a coffee</a>
+                            <Link to="/faq" className="hover:underline">{t('howToUse')}</Link>
+                            <a href="https://github.com/rutikwankhade/CoverView" target="_blank" rel="noreferrer" className="hover:underline">{t('github')}</a>
+                            <a href="https://www.buymeacoffee.com/rutikwankhade" target="_blank" rel="noreferrer" className="hover:underline">{t('buyMeACoffee')}</a>
                         </div>
-
-
                     </footer>
-
                 </div>
-
-
-
             </div>
-
-
-
-
-
-
         </div>
     );
 }
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
new file mode 100644
index 0000000..684f937
--- /dev/null
+++ b/src/utils/i18n.js
@@ -0,0 +1,164 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+// 语言文本配置
+const translations = {
+  en: {
+    // 首页
+    heroTitle: "Creating cover images for your blogs is now super easy",
+    createNow: "Create Now",
+    whyCoverImagesTitle: "Why cover images are more important than you think?",
+    blogPostsCount: "Around <span>7 million</span> blog posts are published daily. And with the rise of new-age blogging tools, it will only go up.",
+    conversionRate: "A good cover image can lead to <span>higher conversion rate</span> than a random stock image.",
+    secondsTitle: "With coverview, you can create cover images in <span>seconds</span>",
+    step1Title: "Step 1",
+    step1Desc: "Add your blog title and author name",
+    step2Title: "Step 2",
+    step2Desc: "Customize with colors, fonts and icons",
+    step3Title: "Step 3",
+    step3Desc: "Choose your style from different themes",
+    step3Features: "Unsplash integration, custom icon for personal branding and more.",
+    platformSupport: "Supports platforms like Hashnode or Dev.to",
+    simpleTitle: "Simple, quick, and easy to use",
+    simpleDesc: "So you can focus on writing your blog and never worry about those cover images.",
+    tryNow: "It's Free! Try Now →",
+    madeWith: "Made with 💛 by",
+    howToUse: "How to use",
+    github: "Github",
+    buyMeACoffee: "Buy me a coffee",
+    
+    // 顶部导航
+    starOnGithub: "⭐ Star on Github",
+    shareOnTwitter: "Share on Twitter",
+    
+    // 编辑器
+    blogTitle: "Blog Title",
+    enterTitle: "Enter title here",
+    author: "Author",
+    icon: "Icon",
+    font: "Font",
+    color: "Color",
+    platform: "Platform",
+    resetAll: "Reset All",
+    themes: "Themes",
+    
+    // FAQ页面
+    faqTitle: "Frequently asked questions",
+    whatIsCoverview: "What is Coverview?",
+    whatIsOverviewAnswer: "Coverview is a tool to create cover images for your blogs quickly and easily.",
+    isItFree: "Is Coverview free?",
+    isItFreeAnswer: "Yes! Coverview is absolutely free to use.",
+    customLogo: "Can I upload my custom brand logo?",
+    customLogoAnswer: "Yes.Just search and select <span>custom</span> in icon section and you can upload your own logo to personalize your cover images.",
+    example: "example",
+    nonTechnical: "Can I use coverview for non-technical/personal blogs?",
+    nonTechnicalAnswer: "Yes! Why not? Even though coverview was built with technical blogs in mind, you can still use it for your personal blogs. Check out the stylish theme for more.",
+    whyUse: "Why use Coverview?",
+    whyUseAnswer: "Because it's simple, quick and easy to use. Why spend hours designing when you can create cover images in seconds?",
+    sponsor: "Want to support/sponsor the project?",
+    sponsorAnswer: "If coverview adds value in your life and you wish to support this project, you can <a>sponsor me on Github</a> or <a>buy me a coffee</a>.",
+    clickMe: "Want to know a secret? Click me",
+    blogTip: "Blog titles with a minimum of 8 words have 21% better click-through"
+  },
+  zh: {
+    // 首页
+    heroTitle: "为你的博客创建封面图片现在超级简单",
+    createNow: "立即创建",
+    whyCoverImagesTitle: "为什么封面图片比你想象的更重要？",
+    blogPostsCount: "每天大约有<span>700万</span>篇博客文章发布。随着新时代博客工具的兴起，这个数字只会增加。",
+    conversionRate: "一个好的封面图片可以带来比随机库存图片<span>更高的转化率</span>。",
+    secondsTitle: "使用coverview，你可以在<span>几秒钟</span>内创建封面图片",
+    step1Title: "步骤 1",
+    step1Desc: "添加你的博客标题和作者名称",
+    step2Title: "步骤 2",
+    step2Desc: "用颜色、字体和图标进行自定义",
+    step3Title: "步骤 3",
+    step3Desc: "从不同的主题中选择你的风格",
+    step3Features: "Unsplash集成，个人品牌的自定义图标等等。",
+    platformSupport: "支持Hashnode或Dev.to等平台",
+    simpleTitle: "简单、快速且易于使用",
+    simpleDesc: "这样你就可以专注于写博客，不用担心那些封面图片。",
+    tryNow: "它是免费的！立即尝试 →",
+    madeWith: "由 💛 制作",
+    howToUse: "如何使用",
+    github: "Github",
+    buyMeACoffee: "给我买杯咖啡",
+    
+    // 顶部导航
+    starOnGithub: "⭐ 在Github上收藏",
+    shareOnTwitter: "在Twitter上分享",
+    
+    // 编辑器
+    blogTitle: "博客标题",
+    enterTitle: "在此输入标题",
+    author: "作者",
+    icon: "图标",
+    font: "字体",
+    color: "颜色",
+    platform: "平台",
+    resetAll: "重置所有",
+    themes: "主题",
+    
+    // FAQ页面
+    faqTitle: "常见问题",
+    whatIsCoverview: "什么是Coverview？",
+    whatIsOverviewAnswer: "Coverview是一个快速轻松创建博客封面图片的工具。",
+    isItFree: "Coverview是免费的吗？",
+    isItFreeAnswer: "是的！Coverview完全免费使用。",
+    customLogo: "我可以上传自定义品牌标志吗？",
+    customLogoAnswer: "是的。只需在图标部分搜索并选择<span>custom</span>，你就可以上传自己的标志来个性化你的封面图片。",
+    example: "示例",
+    nonTechnical: "我可以将coverview用于非技术/个人博客吗？",
+    nonTechnicalAnswer: "是的！为什么不呢？尽管coverview最初是为技术博客设计的，但你仍然可以将它用于个人博客。查看stylish主题了解更多。",
+    whyUse: "为什么使用Coverview？",
+    whyUseAnswer: "因为它简单、快速且易于使用。当你可以在几秒钟内创建封面图片时，为什么还要花费数小时进行设计呢？",
+    sponsor: "想要支持/赞助这个项目？",
+    sponsorAnswer: "如果coverview在你的生活中增添了价值，你希望支持这个项目，你可以<a>在Github上赞助我</a>或<a>给我买杯咖啡</a>。",
+    clickMe: "想知道一个秘密吗？点击我",
+    blogTip: "至少包含8个字的博客标题点击率高21%"
+  }
+};
+
+// 创建语言上下文
+const LanguageContext = createContext();
+
+// 语言提供者组件
+export const LanguageProvider = ({ children }) => {
+  // 从localStorage获取语言设置，默认为英文
+  const [language, setLanguage] = useState(() => {
+    const savedLanguage = localStorage.getItem('language');
+    return savedLanguage || 'en';
+  });
+
+  // 切换语言的函数
+  const toggleLanguage = () => {
+    const newLanguage = language === 'en' ? 'zh' : 'en';
+    setLanguage(newLanguage);
+    localStorage.setItem('language', newLanguage);
+  };
+
+  // 获取当前语言的翻译文本
+  const t = (key) => {
+    const text = translations[language][key] || key;
+    return text;
+  };
+
+  // 当语言变化时保存到localStorage
+  useEffect(() => {
+    localStorage.setItem('language', language);
+  }, [language]);
+
+  return (
+    <LanguageContext.Provider value={{ language, toggleLanguage, t }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+// 使用语言的自定义钩子
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+}; 
\ No newline at end of file