diff --git a/package-lock.json b/package-lock.json
index b9d1eb4..022ffe9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1105,6 +1105,123 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@better-scroll/core": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/core/-/core-2.4.2.tgz",
+      "integrity": "sha512-IqVZLnh04YpaEAy9wJDxtFK/stxVQjB9A9Wcr3Uwkj7Av1TtFpin+t/TObl53diNDG5ZJ+vck/OAthphpuugLA==",
+      "requires": {
+        "@better-scroll/shared-utils": "^2.4.2"
+      }
+    },
+    "@better-scroll/indicators": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/indicators/-/indicators-2.4.2.tgz",
+      "integrity": "sha512-dScI0HIt06L1thLO+1W7w1enqRtegWF1izKYhswiyTXLgagLh2QbAi+oexNiPSOGBuNz8w1mO7hZvVJez/ZFkw==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/infinity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/infinity/-/infinity-2.4.2.tgz",
+      "integrity": "sha512-KGpCWLTyMzcGBT59c3N/JaVauLmi0jG2YZApdnqON+Oz4AJiHnzGkzWc4EJxcxR3Vy+m5Jp91y6xrpsvRmOdIg==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/mouse-wheel": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/mouse-wheel/-/mouse-wheel-2.4.2.tgz",
+      "integrity": "sha512-dLc8vlYkSYN9AQEo4NDPQloPhscCV17TY98JUBcio4I2STDlYYIQqofqm1GQPfByfK9f057DnrcgZ/bPVx7PTA==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/movable": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/movable/-/movable-2.4.2.tgz",
+      "integrity": "sha512-y4FbKx9FTUfAfM6wW+PCKA3CONc4nfjaE4N1ImGsIorzkSWV2eGO+LTD6FVv5+gVINI/o9Xj/gHmEJUaupUeSg==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/nested-scroll": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/nested-scroll/-/nested-scroll-2.4.2.tgz",
+      "integrity": "sha512-JnC2sqtDqVkj9F5J39u52b6qDsMqXbnURG67dHf97tYoYP2dluwjkvhhxjSFrghREoQzT/KWcDbkfcGy47lQwQ==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/observe-dom": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/observe-dom/-/observe-dom-2.4.2.tgz",
+      "integrity": "sha512-eeS77CZs+V72dkya10e5ptndBAbhQVcXoYGvfoIihOJgCPqO5MdYTpzRmlbshYCEE5juUMLe82Kx8FSbOejpAw==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/observe-image": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/observe-image/-/observe-image-2.4.2.tgz",
+      "integrity": "sha512-ToYVf5vn0cio5B9uaL5NyvFX3JNU6L0Po20Lw7uxa0+FE+kMvSAMJN+9POg6G+cfIqI8GVHhyyR+4Ev8v2Nl5Q==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/pull-down": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/pull-down/-/pull-down-2.4.2.tgz",
+      "integrity": "sha512-bqMLk33o4oesTXIIOteBKHQgfVKjIVvity39TM/MfzkbY1WDBxD+HFS7ySgoqw7Kl2Wiv/U76Wfqzmm6yDdg7Q==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/pull-up": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/pull-up/-/pull-up-2.4.2.tgz",
+      "integrity": "sha512-07Cke3oa96lN9/inxJZ0ixh0nBbbqxOi2IKcBGtD6dP+susiMcdhgd/c7zNRjXkwlw0vzTNfXTgExIOEWzLHYg==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/scroll-bar": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/scroll-bar/-/scroll-bar-2.4.2.tgz",
+      "integrity": "sha512-zZd0+sWfzTCXJeuA001o5bea7AvLYz7BCE7dolxFbPTIPnV5V5UEH8LLdXQ/HIwgxI0Pj9PoY9njSuhooh6lfg==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/shared-utils": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/shared-utils/-/shared-utils-2.4.2.tgz",
+      "integrity": "sha512-Gy/Jfbpu+hq0u+PcjkTqyXGqAf+0dexTzEZ5IDXEVwJVLmd3cx8A73oTcAZ8QZgk4wSHvlMjXecSaptkhnNPEw=="
+    },
+    "@better-scroll/slide": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/slide/-/slide-2.4.2.tgz",
+      "integrity": "sha512-VfdFHm/meo4nEyfx0JLn8rUHfQdQCnoBHs/BsV+vmjVivKg+cVgfS+QaytrIulWKqNAWNlfXbAaNtZMv8gNKZg==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/wheel": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/wheel/-/wheel-2.4.2.tgz",
+      "integrity": "sha512-oJw68glWbrYBbRK8RJnKo3Fw9bU7Cd4zDbBHbKZ062/YJAJUZW9wF/3Lout4PnolkjuJIp2TZiEgJNtuRd+Njg==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
+    "@better-scroll/zoom": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/zoom/-/zoom-2.4.2.tgz",
+      "integrity": "sha512-rN/BTE3lf2sNNvKowGL/tUKZ/BgdZcZa0pjE/rVW0tBL/7x68cBowWQD5HF2Z2Bge8OPXRjkwN/xN1aFYhEtWA==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2"
+      }
+    },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmmirror.com/@emotion/is-prop-valid/download/@emotion/is-prop-valid-0.8.8.tgz",
@@ -3768,6 +3885,27 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "better-scroll": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/better-scroll/-/better-scroll-2.4.2.tgz",
+      "integrity": "sha512-I/JzJNUay2vMAkczBa/4x52QBdUGA3Bs/QtrKrxVjSbBHUMG6yR14srQr4aCAWlIra1FBmuddwGRfI6zRagI9Q==",
+      "requires": {
+        "@better-scroll/core": "^2.4.2",
+        "@better-scroll/indicators": "^2.4.2",
+        "@better-scroll/infinity": "^2.4.2",
+        "@better-scroll/mouse-wheel": "^2.4.2",
+        "@better-scroll/movable": "^2.4.2",
+        "@better-scroll/nested-scroll": "^2.4.2",
+        "@better-scroll/observe-dom": "^2.4.2",
+        "@better-scroll/observe-image": "^2.4.2",
+        "@better-scroll/pull-down": "^2.4.2",
+        "@better-scroll/pull-up": "^2.4.2",
+        "@better-scroll/scroll-bar": "^2.4.2",
+        "@better-scroll/slide": "^2.4.2",
+        "@better-scroll/wheel": "^2.4.2",
+        "@better-scroll/zoom": "^2.4.2"
+      }
+    },
     "bfj": {
       "version": "6.1.2",
       "resolved": "https://registry.npm.taobao.org/bfj/download/bfj-6.1.2.tgz?cache=0&sync_timestamp=1577112259978&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbfj%2Fdownload%2Fbfj-6.1.2.tgz",
diff --git a/package.json b/package.json
index c95fda7..885596d 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@walletconnect/web3-provider": "^1.7.1",
     "axios": "^0.21.0",
+    "better-scroll": "^2.4.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
     "js-cookie": "^2.2.1",
diff --git a/src/assets/202202/applestore.png b/src/assets/202202/applestore.png
new file mode 100644
index 0000000..21ab354
Binary files /dev/null and b/src/assets/202202/applestore.png differ
diff --git a/src/assets/202202/applestore@2x.png b/src/assets/202202/applestore@2x.png
new file mode 100644
index 0000000..f35671b
Binary files /dev/null and b/src/assets/202202/applestore@2x.png differ
diff --git a/src/assets/202202/applestore@3x.png b/src/assets/202202/applestore@3x.png
new file mode 100644
index 0000000..210f760
Binary files /dev/null and b/src/assets/202202/applestore@3x.png differ
diff --git a/src/assets/202202/btn-download.png b/src/assets/202202/btn-download.png
new file mode 100644
index 0000000..a6ebe7e
Binary files /dev/null and b/src/assets/202202/btn-download.png differ
diff --git a/src/assets/202202/btn-download@2x.png b/src/assets/202202/btn-download@2x.png
new file mode 100644
index 0000000..a41f049
Binary files /dev/null and b/src/assets/202202/btn-download@2x.png differ
diff --git a/src/assets/202202/btn-download@3x.png b/src/assets/202202/btn-download@3x.png
new file mode 100644
index 0000000..d991556
Binary files /dev/null and b/src/assets/202202/btn-download@3x.png differ
diff --git a/src/assets/202202/btn-market.png b/src/assets/202202/btn-market.png
new file mode 100644
index 0000000..f933dfd
Binary files /dev/null and b/src/assets/202202/btn-market.png differ
diff --git a/src/assets/202202/btn-market@2x.png b/src/assets/202202/btn-market@2x.png
new file mode 100644
index 0000000..8edb66b
Binary files /dev/null and b/src/assets/202202/btn-market@2x.png differ
diff --git a/src/assets/202202/btn-market@3x.png b/src/assets/202202/btn-market@3x.png
new file mode 100644
index 0000000..a6b5b26
Binary files /dev/null and b/src/assets/202202/btn-market@3x.png differ
diff --git a/src/assets/202202/button.png b/src/assets/202202/button.png
new file mode 100644
index 0000000..d7fb057
Binary files /dev/null and b/src/assets/202202/button.png differ
diff --git a/src/assets/202202/button@2x.png b/src/assets/202202/button@2x.png
new file mode 100644
index 0000000..06a12a4
Binary files /dev/null and b/src/assets/202202/button@2x.png differ
diff --git a/src/assets/202202/button@3x.png b/src/assets/202202/button@3x.png
new file mode 100644
index 0000000..f99735a
Binary files /dev/null and b/src/assets/202202/button@3x.png differ
diff --git a/src/assets/202202/card_aoi.png b/src/assets/202202/card_aoi.png
new file mode 100644
index 0000000..47312f5
Binary files /dev/null and b/src/assets/202202/card_aoi.png differ
diff --git a/src/assets/202202/card_aoi@2x.png b/src/assets/202202/card_aoi@2x.png
new file mode 100644
index 0000000..75c1a4e
Binary files /dev/null and b/src/assets/202202/card_aoi@2x.png differ
diff --git a/src/assets/202202/card_aoi@3x.png b/src/assets/202202/card_aoi@3x.png
new file mode 100644
index 0000000..c1d80e9
Binary files /dev/null and b/src/assets/202202/card_aoi@3x.png differ
diff --git a/src/assets/202202/card_astral.png b/src/assets/202202/card_astral.png
new file mode 100644
index 0000000..83a6cd8
Binary files /dev/null and b/src/assets/202202/card_astral.png differ
diff --git a/src/assets/202202/card_astral@2x.png b/src/assets/202202/card_astral@2x.png
new file mode 100644
index 0000000..2d0c63e
Binary files /dev/null and b/src/assets/202202/card_astral@2x.png differ
diff --git a/src/assets/202202/card_astral@3x.png b/src/assets/202202/card_astral@3x.png
new file mode 100644
index 0000000..7789fe0
Binary files /dev/null and b/src/assets/202202/card_astral@3x.png differ
diff --git a/src/assets/202202/card_canoe.png b/src/assets/202202/card_canoe.png
new file mode 100644
index 0000000..23a60ea
Binary files /dev/null and b/src/assets/202202/card_canoe.png differ
diff --git a/src/assets/202202/card_canoe@2x.png b/src/assets/202202/card_canoe@2x.png
new file mode 100644
index 0000000..9fa92f9
Binary files /dev/null and b/src/assets/202202/card_canoe@2x.png differ
diff --git a/src/assets/202202/card_canoe@3x.png b/src/assets/202202/card_canoe@3x.png
new file mode 100644
index 0000000..69e0999
Binary files /dev/null and b/src/assets/202202/card_canoe@3x.png differ
diff --git a/src/assets/202202/card_dragonscale.png b/src/assets/202202/card_dragonscale.png
new file mode 100644
index 0000000..062ab58
Binary files /dev/null and b/src/assets/202202/card_dragonscale.png differ
diff --git a/src/assets/202202/card_dragonscale@2x.png b/src/assets/202202/card_dragonscale@2x.png
new file mode 100644
index 0000000..20393ca
Binary files /dev/null and b/src/assets/202202/card_dragonscale@2x.png differ
diff --git a/src/assets/202202/card_dragonscale@3x.png b/src/assets/202202/card_dragonscale@3x.png
new file mode 100644
index 0000000..17ecb0b
Binary files /dev/null and b/src/assets/202202/card_dragonscale@3x.png differ
diff --git a/src/assets/202202/card_hill.png b/src/assets/202202/card_hill.png
new file mode 100644
index 0000000..2202c45
Binary files /dev/null and b/src/assets/202202/card_hill.png differ
diff --git a/src/assets/202202/card_hill@2x.png b/src/assets/202202/card_hill@2x.png
new file mode 100644
index 0000000..b69148c
Binary files /dev/null and b/src/assets/202202/card_hill@2x.png differ
diff --git a/src/assets/202202/card_hill@3x.png b/src/assets/202202/card_hill@3x.png
new file mode 100644
index 0000000..9b8dc60
Binary files /dev/null and b/src/assets/202202/card_hill@3x.png differ
diff --git a/src/assets/202202/card_kurosawa.png b/src/assets/202202/card_kurosawa.png
new file mode 100644
index 0000000..feaf077
Binary files /dev/null and b/src/assets/202202/card_kurosawa.png differ
diff --git a/src/assets/202202/card_kurosawa@2x.png b/src/assets/202202/card_kurosawa@2x.png
new file mode 100644
index 0000000..12e0d58
Binary files /dev/null and b/src/assets/202202/card_kurosawa@2x.png differ
diff --git a/src/assets/202202/card_kurosawa@3x.png b/src/assets/202202/card_kurosawa@3x.png
new file mode 100644
index 0000000..d042f70
Binary files /dev/null and b/src/assets/202202/card_kurosawa@3x.png differ
diff --git a/src/assets/202202/card_lazar.png b/src/assets/202202/card_lazar.png
new file mode 100644
index 0000000..cbd4389
Binary files /dev/null and b/src/assets/202202/card_lazar.png differ
diff --git a/src/assets/202202/card_lazar@2x.png b/src/assets/202202/card_lazar@2x.png
new file mode 100644
index 0000000..1e15995
Binary files /dev/null and b/src/assets/202202/card_lazar@2x.png differ
diff --git a/src/assets/202202/card_lazar@3x.png b/src/assets/202202/card_lazar@3x.png
new file mode 100644
index 0000000..1d03a4b
Binary files /dev/null and b/src/assets/202202/card_lazar@3x.png differ
diff --git a/src/assets/202202/card_mariana.png b/src/assets/202202/card_mariana.png
new file mode 100644
index 0000000..daaab4b
Binary files /dev/null and b/src/assets/202202/card_mariana.png differ
diff --git a/src/assets/202202/card_mariana@2x.png b/src/assets/202202/card_mariana@2x.png
new file mode 100644
index 0000000..cdf582c
Binary files /dev/null and b/src/assets/202202/card_mariana@2x.png differ
diff --git a/src/assets/202202/card_mariana@3x.png b/src/assets/202202/card_mariana@3x.png
new file mode 100644
index 0000000..2b4cc8f
Binary files /dev/null and b/src/assets/202202/card_mariana@3x.png differ
diff --git a/src/assets/202202/card_miffy.png b/src/assets/202202/card_miffy.png
new file mode 100644
index 0000000..1322226
Binary files /dev/null and b/src/assets/202202/card_miffy.png differ
diff --git a/src/assets/202202/card_miffy@2x.png b/src/assets/202202/card_miffy@2x.png
new file mode 100644
index 0000000..e4233ef
Binary files /dev/null and b/src/assets/202202/card_miffy@2x.png differ
diff --git a/src/assets/202202/card_miffy@3x.png b/src/assets/202202/card_miffy@3x.png
new file mode 100644
index 0000000..609f738
Binary files /dev/null and b/src/assets/202202/card_miffy@3x.png differ
diff --git a/src/assets/202202/card_yamada.png b/src/assets/202202/card_yamada.png
new file mode 100644
index 0000000..584983f
Binary files /dev/null and b/src/assets/202202/card_yamada.png differ
diff --git a/src/assets/202202/card_yamada@2x.png b/src/assets/202202/card_yamada@2x.png
new file mode 100644
index 0000000..89c48ed
Binary files /dev/null and b/src/assets/202202/card_yamada@2x.png differ
diff --git a/src/assets/202202/card_yamada@3x.png b/src/assets/202202/card_yamada@3x.png
new file mode 100644
index 0000000..eae256b
Binary files /dev/null and b/src/assets/202202/card_yamada@3x.png differ
diff --git a/src/assets/202202/cebg_banner2.png b/src/assets/202202/cebg_banner2.png
new file mode 100644
index 0000000..16e8df0
Binary files /dev/null and b/src/assets/202202/cebg_banner2.png differ
diff --git a/src/assets/202202/cebg_banner2@2x.png b/src/assets/202202/cebg_banner2@2x.png
new file mode 100644
index 0000000..ab6c377
Binary files /dev/null and b/src/assets/202202/cebg_banner2@2x.png differ
diff --git a/src/assets/202202/cebg_banner2@3x.png b/src/assets/202202/cebg_banner2@3x.png
new file mode 100644
index 0000000..f7f2b79
Binary files /dev/null and b/src/assets/202202/cebg_banner2@3x.png differ
diff --git a/src/assets/202202/cell-0.png b/src/assets/202202/cell-0.png
new file mode 100644
index 0000000..bb72018
Binary files /dev/null and b/src/assets/202202/cell-0.png differ
diff --git a/src/assets/202202/cell-0@2x.png b/src/assets/202202/cell-0@2x.png
new file mode 100644
index 0000000..227e695
Binary files /dev/null and b/src/assets/202202/cell-0@2x.png differ
diff --git a/src/assets/202202/cell-0@3x.png b/src/assets/202202/cell-0@3x.png
new file mode 100644
index 0000000..4da135c
Binary files /dev/null and b/src/assets/202202/cell-0@3x.png differ
diff --git a/src/assets/202202/cell-1.png b/src/assets/202202/cell-1.png
new file mode 100644
index 0000000..a16e108
Binary files /dev/null and b/src/assets/202202/cell-1.png differ
diff --git a/src/assets/202202/cell-1@2x.png b/src/assets/202202/cell-1@2x.png
new file mode 100644
index 0000000..7abf284
Binary files /dev/null and b/src/assets/202202/cell-1@2x.png differ
diff --git a/src/assets/202202/cell-1@3x.png b/src/assets/202202/cell-1@3x.png
new file mode 100644
index 0000000..fe3c05a
Binary files /dev/null and b/src/assets/202202/cell-1@3x.png differ
diff --git a/src/assets/202202/cell-2.png b/src/assets/202202/cell-2.png
new file mode 100644
index 0000000..8a2b954
Binary files /dev/null and b/src/assets/202202/cell-2.png differ
diff --git a/src/assets/202202/cell-2@2x.png b/src/assets/202202/cell-2@2x.png
new file mode 100644
index 0000000..169245b
Binary files /dev/null and b/src/assets/202202/cell-2@2x.png differ
diff --git a/src/assets/202202/cell-2@3x.png b/src/assets/202202/cell-2@3x.png
new file mode 100644
index 0000000..5c6bdbe
Binary files /dev/null and b/src/assets/202202/cell-2@3x.png differ
diff --git a/src/assets/202202/cell-3.png b/src/assets/202202/cell-3.png
new file mode 100644
index 0000000..cc10726
Binary files /dev/null and b/src/assets/202202/cell-3.png differ
diff --git a/src/assets/202202/cell-3@2x.png b/src/assets/202202/cell-3@2x.png
new file mode 100644
index 0000000..d8d1135
Binary files /dev/null and b/src/assets/202202/cell-3@2x.png differ
diff --git a/src/assets/202202/cell-3@3x.png b/src/assets/202202/cell-3@3x.png
new file mode 100644
index 0000000..a334915
Binary files /dev/null and b/src/assets/202202/cell-3@3x.png differ
diff --git a/src/assets/202202/col-bg.png b/src/assets/202202/col-bg.png
new file mode 100644
index 0000000..77a319d
Binary files /dev/null and b/src/assets/202202/col-bg.png differ
diff --git a/src/assets/202202/col-bg3x.png b/src/assets/202202/col-bg3x.png
new file mode 100644
index 0000000..68b850c
Binary files /dev/null and b/src/assets/202202/col-bg3x.png differ
diff --git a/src/assets/202202/col-bg@2x.png b/src/assets/202202/col-bg@2x.png
new file mode 100644
index 0000000..657cfe8
Binary files /dev/null and b/src/assets/202202/col-bg@2x.png differ
diff --git a/src/assets/202202/coso.png b/src/assets/202202/coso.png
new file mode 100644
index 0000000..4bd91b5
Binary files /dev/null and b/src/assets/202202/coso.png differ
diff --git a/src/assets/202202/coso@2x.png b/src/assets/202202/coso@2x.png
new file mode 100644
index 0000000..d906cc9
Binary files /dev/null and b/src/assets/202202/coso@2x.png differ
diff --git a/src/assets/202202/coso@3x.png b/src/assets/202202/coso@3x.png
new file mode 100644
index 0000000..e0298cd
Binary files /dev/null and b/src/assets/202202/coso@3x.png differ
diff --git a/src/assets/202202/discord-logo-color.png b/src/assets/202202/discord-logo-color.png
new file mode 100644
index 0000000..b985be4
Binary files /dev/null and b/src/assets/202202/discord-logo-color.png differ
diff --git a/src/assets/202202/discord-logo-color@2x.png b/src/assets/202202/discord-logo-color@2x.png
new file mode 100644
index 0000000..41ed172
Binary files /dev/null and b/src/assets/202202/discord-logo-color@2x.png differ
diff --git a/src/assets/202202/discord-logo-color@3x.png b/src/assets/202202/discord-logo-color@3x.png
new file mode 100644
index 0000000..15770e4
Binary files /dev/null and b/src/assets/202202/discord-logo-color@3x.png differ
diff --git a/src/assets/202202/free-to-play.png b/src/assets/202202/free-to-play.png
new file mode 100644
index 0000000..ab46db1
Binary files /dev/null and b/src/assets/202202/free-to-play.png differ
diff --git a/src/assets/202202/free-to-play@2x.png b/src/assets/202202/free-to-play@2x.png
new file mode 100644
index 0000000..715ff40
Binary files /dev/null and b/src/assets/202202/free-to-play@2x.png differ
diff --git a/src/assets/202202/free-to-play@3x.png b/src/assets/202202/free-to-play@3x.png
new file mode 100644
index 0000000..8bcec1f
Binary files /dev/null and b/src/assets/202202/free-to-play@3x.png differ
diff --git a/src/assets/202202/googleplay.png b/src/assets/202202/googleplay.png
new file mode 100644
index 0000000..74acc1e
Binary files /dev/null and b/src/assets/202202/googleplay.png differ
diff --git a/src/assets/202202/googleplay@2x.png b/src/assets/202202/googleplay@2x.png
new file mode 100644
index 0000000..a2566dd
Binary files /dev/null and b/src/assets/202202/googleplay@2x.png differ
diff --git a/src/assets/202202/googleplay@3x.png b/src/assets/202202/googleplay@3x.png
new file mode 100644
index 0000000..775557a
Binary files /dev/null and b/src/assets/202202/googleplay@3x.png differ
diff --git a/src/assets/202202/group2.png b/src/assets/202202/group2.png
new file mode 100644
index 0000000..d4fa094
Binary files /dev/null and b/src/assets/202202/group2.png differ
diff --git a/src/assets/202202/group2@2x.png b/src/assets/202202/group2@2x.png
new file mode 100644
index 0000000..18a1afd
Binary files /dev/null and b/src/assets/202202/group2@2x.png differ
diff --git a/src/assets/202202/group2@3x.png b/src/assets/202202/group2@3x.png
new file mode 100644
index 0000000..ae9f7cb
Binary files /dev/null and b/src/assets/202202/group2@3x.png differ
diff --git a/src/assets/202202/group7.png b/src/assets/202202/group7.png
new file mode 100644
index 0000000..9b24408
Binary files /dev/null and b/src/assets/202202/group7.png differ
diff --git a/src/assets/202202/group7@2x.png b/src/assets/202202/group7@2x.png
new file mode 100644
index 0000000..94e3166
Binary files /dev/null and b/src/assets/202202/group7@2x.png differ
diff --git a/src/assets/202202/group7@3x.png b/src/assets/202202/group7@3x.png
new file mode 100644
index 0000000..a71a077
Binary files /dev/null and b/src/assets/202202/group7@3x.png differ
diff --git a/src/assets/202202/icon_investors.png b/src/assets/202202/icon_investors.png
new file mode 100644
index 0000000..bee35ca
Binary files /dev/null and b/src/assets/202202/icon_investors.png differ
diff --git a/src/assets/202202/icon_investors@2x.png b/src/assets/202202/icon_investors@2x.png
new file mode 100644
index 0000000..b2f080a
Binary files /dev/null and b/src/assets/202202/icon_investors@2x.png differ
diff --git a/src/assets/202202/icon_investors@3x.png b/src/assets/202202/icon_investors@3x.png
new file mode 100644
index 0000000..8be5cd6
Binary files /dev/null and b/src/assets/202202/icon_investors@3x.png differ
diff --git a/src/assets/202202/icon_pve.png b/src/assets/202202/icon_pve.png
new file mode 100644
index 0000000..3b73e39
Binary files /dev/null and b/src/assets/202202/icon_pve.png differ
diff --git a/src/assets/202202/icon_pve@2x.png b/src/assets/202202/icon_pve@2x.png
new file mode 100644
index 0000000..c50aab2
Binary files /dev/null and b/src/assets/202202/icon_pve@2x.png differ
diff --git a/src/assets/202202/icon_pve@3x.png b/src/assets/202202/icon_pve@3x.png
new file mode 100644
index 0000000..3012d8f
Binary files /dev/null and b/src/assets/202202/icon_pve@3x.png differ
diff --git a/src/assets/202202/icon_pvp.png b/src/assets/202202/icon_pvp.png
new file mode 100644
index 0000000..39f99f7
Binary files /dev/null and b/src/assets/202202/icon_pvp.png differ
diff --git a/src/assets/202202/icon_pvp@2x.png b/src/assets/202202/icon_pvp@2x.png
new file mode 100644
index 0000000..dc9d483
Binary files /dev/null and b/src/assets/202202/icon_pvp@2x.png differ
diff --git a/src/assets/202202/icon_pvp@3x.png b/src/assets/202202/icon_pvp@3x.png
new file mode 100644
index 0000000..9a97056
Binary files /dev/null and b/src/assets/202202/icon_pvp@3x.png differ
diff --git a/src/assets/202202/kucoin.png b/src/assets/202202/kucoin.png
new file mode 100644
index 0000000..f5e3ee6
Binary files /dev/null and b/src/assets/202202/kucoin.png differ
diff --git a/src/assets/202202/kucoin@2x.png b/src/assets/202202/kucoin@2x.png
new file mode 100644
index 0000000..233ec43
Binary files /dev/null and b/src/assets/202202/kucoin@2x.png differ
diff --git a/src/assets/202202/kucoin@3x.png b/src/assets/202202/kucoin@3x.png
new file mode 100644
index 0000000..f224642
Binary files /dev/null and b/src/assets/202202/kucoin@3x.png differ
diff --git a/src/assets/202202/left-shadow.png b/src/assets/202202/left-shadow.png
new file mode 100644
index 0000000..a289db0
Binary files /dev/null and b/src/assets/202202/left-shadow.png differ
diff --git a/src/assets/202202/left-shadow@2x.png b/src/assets/202202/left-shadow@2x.png
new file mode 100644
index 0000000..7854945
Binary files /dev/null and b/src/assets/202202/left-shadow@2x.png differ
diff --git a/src/assets/202202/left-shadow@3x.png b/src/assets/202202/left-shadow@3x.png
new file mode 100644
index 0000000..c0d5ab1
Binary files /dev/null and b/src/assets/202202/left-shadow@3x.png differ
diff --git a/src/assets/202202/line-b.png b/src/assets/202202/line-b.png
new file mode 100644
index 0000000..3b01cee
Binary files /dev/null and b/src/assets/202202/line-b.png differ
diff --git a/src/assets/202202/line-b@2x.png b/src/assets/202202/line-b@2x.png
new file mode 100644
index 0000000..7eed2b5
Binary files /dev/null and b/src/assets/202202/line-b@2x.png differ
diff --git a/src/assets/202202/line-b@3x.png b/src/assets/202202/line-b@3x.png
new file mode 100644
index 0000000..203d12d
Binary files /dev/null and b/src/assets/202202/line-b@3x.png differ
diff --git a/src/assets/202202/line-w.png b/src/assets/202202/line-w.png
new file mode 100644
index 0000000..826e7dc
Binary files /dev/null and b/src/assets/202202/line-w.png differ
diff --git a/src/assets/202202/line-w@2x.png b/src/assets/202202/line-w@2x.png
new file mode 100644
index 0000000..36f853c
Binary files /dev/null and b/src/assets/202202/line-w@2x.png differ
diff --git a/src/assets/202202/line-w@3x.png b/src/assets/202202/line-w@3x.png
new file mode 100644
index 0000000..bc3821c
Binary files /dev/null and b/src/assets/202202/line-w@3x.png differ
diff --git a/src/assets/202202/loginbutton.png b/src/assets/202202/loginbutton.png
new file mode 100644
index 0000000..bab6ce1
Binary files /dev/null and b/src/assets/202202/loginbutton.png differ
diff --git a/src/assets/202202/loginbutton@2x.png b/src/assets/202202/loginbutton@2x.png
new file mode 100644
index 0000000..ea1455c
Binary files /dev/null and b/src/assets/202202/loginbutton@2x.png differ
diff --git a/src/assets/202202/loginbutton@3x.png b/src/assets/202202/loginbutton@3x.png
new file mode 100644
index 0000000..75efefe
Binary files /dev/null and b/src/assets/202202/loginbutton@3x.png differ
diff --git a/src/assets/202202/logowhite.png b/src/assets/202202/logowhite.png
new file mode 100644
index 0000000..389d4cb
Binary files /dev/null and b/src/assets/202202/logowhite.png differ
diff --git a/src/assets/202202/logowhite@2x.png b/src/assets/202202/logowhite@2x.png
new file mode 100644
index 0000000..46a7fc5
Binary files /dev/null and b/src/assets/202202/logowhite@2x.png differ
diff --git a/src/assets/202202/logowhite@3x.png b/src/assets/202202/logowhite@3x.png
new file mode 100644
index 0000000..e3a5cb6
Binary files /dev/null and b/src/assets/202202/logowhite@3x.png differ
diff --git a/src/assets/202202/play-to-earn.png b/src/assets/202202/play-to-earn.png
new file mode 100644
index 0000000..aa59c9b
Binary files /dev/null and b/src/assets/202202/play-to-earn.png differ
diff --git a/src/assets/202202/play-to-earn@2x.png b/src/assets/202202/play-to-earn@2x.png
new file mode 100644
index 0000000..a7f744f
Binary files /dev/null and b/src/assets/202202/play-to-earn@2x.png differ
diff --git a/src/assets/202202/play-to-earn@3x.png b/src/assets/202202/play-to-earn@3x.png
new file mode 100644
index 0000000..9a5dc7b
Binary files /dev/null and b/src/assets/202202/play-to-earn@3x.png differ
diff --git a/src/assets/202202/rewardin-gameitems.png b/src/assets/202202/rewardin-gameitems.png
new file mode 100644
index 0000000..f346173
Binary files /dev/null and b/src/assets/202202/rewardin-gameitems.png differ
diff --git a/src/assets/202202/rewardin-gameitems@2x.png b/src/assets/202202/rewardin-gameitems@2x.png
new file mode 100644
index 0000000..d16f989
Binary files /dev/null and b/src/assets/202202/rewardin-gameitems@2x.png differ
diff --git a/src/assets/202202/rewardin-gameitems@3x.png b/src/assets/202202/rewardin-gameitems@3x.png
new file mode 100644
index 0000000..6632975
Binary files /dev/null and b/src/assets/202202/rewardin-gameitems@3x.png differ
diff --git a/src/assets/202202/right-shadow.png b/src/assets/202202/right-shadow.png
new file mode 100644
index 0000000..8f02a9d
Binary files /dev/null and b/src/assets/202202/right-shadow.png differ
diff --git a/src/assets/202202/right-shadow@2x.png b/src/assets/202202/right-shadow@2x.png
new file mode 100644
index 0000000..3ab35a7
Binary files /dev/null and b/src/assets/202202/right-shadow@2x.png differ
diff --git a/src/assets/202202/right-shadow@3x.png b/src/assets/202202/right-shadow@3x.png
new file mode 100644
index 0000000..747a9fb
Binary files /dev/null and b/src/assets/202202/right-shadow@3x.png differ
diff --git a/src/assets/202202/telegram-logo.wine.png b/src/assets/202202/telegram-logo.wine.png
new file mode 100644
index 0000000..11ddefa
Binary files /dev/null and b/src/assets/202202/telegram-logo.wine.png differ
diff --git a/src/assets/202202/telegram-logo@2x.png b/src/assets/202202/telegram-logo@2x.png
new file mode 100644
index 0000000..63cb382
Binary files /dev/null and b/src/assets/202202/telegram-logo@2x.png differ
diff --git a/src/assets/202202/telegram-logo@3x.png b/src/assets/202202/telegram-logo@3x.png
new file mode 100644
index 0000000..4b8b081
Binary files /dev/null and b/src/assets/202202/telegram-logo@3x.png differ
diff --git a/src/assets/202202/zurk509i_400x400.png b/src/assets/202202/zurk509i_400x400.png
new file mode 100644
index 0000000..f7b97ce
Binary files /dev/null and b/src/assets/202202/zurk509i_400x400.png differ
diff --git a/src/assets/202202/zurk509i_400x400@2x.png b/src/assets/202202/zurk509i_400x400@2x.png
new file mode 100644
index 0000000..85e3c6a
Binary files /dev/null and b/src/assets/202202/zurk509i_400x400@2x.png differ
diff --git a/src/assets/202202/zurk509i_400x400@3x.png b/src/assets/202202/zurk509i_400x400@3x.png
new file mode 100644
index 0000000..5db3fc3
Binary files /dev/null and b/src/assets/202202/zurk509i_400x400@3x.png differ
diff --git a/src/components/ResponsiveImage.vue b/src/components/ResponsiveImage.vue
new file mode 100644
index 0000000..7857478
--- /dev/null
+++ b/src/components/ResponsiveImage.vue
@@ -0,0 +1,47 @@
+<template>
+  <img
+    :src="normalImg"
+    :srcset= "normalImg + ' 1x,' + img2x + ' 2x,' + img3x + ' 3x'"
+    alt=""
+  />
+
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+declare module 'vue/types/vue' {
+  interface Vue {
+    imgName: string
+    subPath: string
+  }
+}
+
+@Component({
+  name: 'RImg',
+  components: {},
+  props: ['imgName', 'subPath']
+})
+export default class extends Vue {
+  get srcset() {
+    let result = ''
+    result += 're'
+    return result
+  }
+
+  get normalImg() {
+    return require(`@/assets/${this.subPath}/${this.imgName}.png`)
+  }
+
+  get img2x() {
+    return require(`@/assets/${this.subPath}/${this.imgName}@2x.png`)
+  }
+
+  get img3x() {
+    return require(`@/assets/${this.subPath}/${this.imgName}@3x.png`)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/index/DesktopFooter.vue b/src/components/index/DesktopFooter.vue
new file mode 100644
index 0000000..684c3c5
--- /dev/null
+++ b/src/components/index/DesktopFooter.vue
@@ -0,0 +1,115 @@
+<template>
+  <footer class="footer" >
+    <div class="community-bar">
+      <div class="title">JOIN OUR COMMUNITY</div>
+      <div class="icon-list">
+        <a href="https://discord.gg/8dWX6jpcME">
+          <img src="@/assets/202202/discord-logo-color@2x.png" alt="discord"/>
+        </a>
+        <a href="https://t.me/CEBG_official">
+          <img src="@/assets/202202/telegram-logo@2x.png" alt="telegram"/>
+        </a>
+        <a href="https://twitter.com/CebgGame">
+          <img src="@/assets/202202/logowhite@2x.png" alt="twitter"/>
+        </a>
+      </div>
+    </div>
+    <div class="link-list">
+      <div class="sub-list">
+        <div class="title">Product</div>
+        <a href="">Home</a>
+        <a href="">Gameplay</a>
+        <a href="">Tokennomic</a>
+        <a href="">NFT</a>
+        <a href="">Marketplace</a>
+      </div>
+      <div class="sub-list">
+        <div class="title">Resources</div>
+        <a href="">Whitepaper</a>
+      </div>
+      <div class="sub-list">
+        <div class="title">About</div>
+        <a href="">About</a>
+        <a href="">Roadmap</a>
+      </div>
+      <div class="sub-list">
+        <div class="title">Policies</div>
+        <a href="">Team of use</a>
+        <a href="">Privacy Policy</a>
+      </div>
+      <div class="sub-list">
+        <div class="title">Contact us</div>
+        <a href="mailto:support@cebg.games">support@cebg.games</a>
+      </div>
+    </div>
+    <div class="copy-right">
+      Copyright &copy; CEBG. All rights reserved.
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'DesktopFooter',
+  components: {
+
+  }
+})
+export default class extends Vue {
+}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  height: 410px;
+  flex-direction: column;
+  align-items: center;
+  .community-bar{
+    width: 100%;
+    height: 100px;
+    background-image: linear-gradient(to right, #FFDF2C , #FF8613);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .title{
+      color: #404040;
+      font-size: 26px;
+      margin-left: 395px;
+    }
+    .icon-list{
+      margin-right: 366px;
+      display: flex;
+      gap: 64px;
+    }
+  }
+  .link-list{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 55%;
+    margin-top: 34px;
+    .sub-list{
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      color: #B4B4B4;
+      gap: 20px;
+      a{
+        color: #B4B4B4;
+        text-decoration: none;
+      }
+      .title{
+        color: #F4F4F4;
+        font-size: 15px;
+        font-weight: bold;
+      }
+    }
+  }
+  .copy-right{
+    color: #B4B4B4;
+  }
+}
+</style>
diff --git a/src/components/index/DesktopHeader.vue b/src/components/index/DesktopHeader.vue
new file mode 100644
index 0000000..ad673d8
--- /dev/null
+++ b/src/components/index/DesktopHeader.vue
@@ -0,0 +1,136 @@
+<template>
+  <header class="header fixed">
+    <div class="logo">
+      <img src="@/assets/main/p1/icon_logo_t.png">
+    </div>
+    <ul class="menu-list">
+      <li class="active">GamePlay</li>
+      <li>NFT</li>
+      <li>Tokennomic</li>
+      <li>Team</li>
+      <li>Roadmap</li>
+    </ul>
+    <div class="right-part">
+      <div class="login-btn">
+        <img src="@/assets/202202/loginbutton@2x.png" alt="login"/>
+      </div>
+      <div class="market-btn">
+        <img src="@/assets/202202/btn-market@2x.png" alt="marketplace"/>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { Message } from 'element-ui'
+import { AppModule } from '@/store/modules/app'
+import { BlockChain } from '@/utils/blockchain'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    currentSection?: string
+  }
+}
+
+@Component({
+  name: 'DesktopHeader',
+  components: {
+  },
+  props: ['currentSection']
+})
+export default class extends Vue {
+  private dropShow = false
+  bc = new BlockChain();
+
+  changeSection(e: PointerEvent) {
+    this.dropShow = false
+    const target = e.currentTarget as HTMLElement
+    if (target) {
+      this.$emit('section-change', target.dataset.menuanchor)
+    }
+  }
+
+  async disconnectWallet() {
+    return this.bc.disconnect()
+  }
+
+  async collectToWallet() {
+    return this.bc.connect()
+  }
+
+  toggleDrop() {
+    this.dropShow = !this.dropShow
+  }
+
+  get accountId() {
+    return AppModule.accountId
+  }
+
+  comingSoon() {
+    Message({
+      message: 'coming soon',
+      type: 'info',
+      duration: 5 * 1000
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header{
+  display: flex;
+  justify-content: space-between;
+  height: 66px;
+  .logo{
+    width: 25%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img{
+      width: 55px;
+      height: 55px;
+    }
+  }
+  .menu-list{
+    list-style: none;
+    display: flex;
+    gap: 60px;
+    li{
+      color: #5B5B5B;
+      padding-top: 8px;
+      cursor: pointer;
+      font-size: 14px;
+      &.active{
+        color: #C5C5C5;
+        position: relative;
+      }
+      &.active::after{
+        content: "\2022";
+        color: #FFA32E;
+        font-weight: bold;
+        position: absolute;
+        width: 1em;
+        bottom: -1em;
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+  .right-part{
+    width: 20%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 44px;
+    .login-btn{
+      cursor: pointer;
+    }
+    .market-btn{
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/components/index/HeroScroller.vue b/src/components/index/HeroScroller.vue
new file mode 100644
index 0000000..6d4d5f7
--- /dev/null
+++ b/src/components/index/HeroScroller.vue
@@ -0,0 +1,244 @@
+<template>
+  <div class="nft-list">
+    <div class="list-container" id="list-container" ref="listContainer">
+      <div class="scroll-content">
+        <template v-for="(datas) in cardDatas"
+        >
+          <img v-for="c in datas" :key="c.name" :src="c.img" class="card" :alt="c.name"/>
+        </template>
+      </div>
+    </div>
+    <img draggable="false" class="left-shadow" src="@/assets/202202/left-shadow@2x.png"/>
+    <img draggable="false" class="right-shadow" src="@/assets/202202/right-shadow@2x.png"/>
+    <div class="action-bar">
+      <div class="page-ctrl">
+        <div class="page-icon"
+             v-for="(datas, index) in cardDatas"
+             @click="toPage(index)"
+             :key="index" :class="index===currentPage? 'selected': ''">
+          <div class="ctrl-line"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from 'vue-property-decorator'
+import BetterScroll from 'better-scroll'
+
+export interface IHeroData{
+  name: string
+  img: any
+}
+@Component({
+  name: 'HeroScroller',
+  components: {
+  }
+})
+export default class extends Vue {
+  $refs!: {
+    listContainer: HTMLFormElement
+  }
+
+  private cardDatas: IHeroData[][] = [];
+  private currentPage = 0;
+  private totalPage = 1;
+  private pageSize = 5;
+  private scrollWidth = 100;
+  private marginLeft = 130;
+  private scrolling = false;
+  private bs: any
+  private heroNames = [
+    'aoi',
+    'yamada',
+    'lazar',
+    'hill',
+    'kurosawa',
+    'canoe',
+    'miffy',
+    'dragonscale',
+    'astral',
+    'mariana'
+  ]
+
+  private onHeroChange() {
+    let count = 0
+    this.totalPage = Math.ceil(this.heroNames.length / this.pageSize)
+    let datas: IHeroData[] = []
+    for (let i = 0; i < this.heroNames.length; i++) {
+      if (count++ < this.pageSize) {
+        datas.push({
+          name: this.heroNames[i],
+          img: require(`@/assets/202202/card_${this.heroNames[i]}@2x.png`)
+        })
+      } else {
+        count = 1
+        this.cardDatas.push(datas)
+        datas = []
+        datas.push({
+          name: this.heroNames[i],
+          img: require(`@/assets/202202/card_${this.heroNames[i]}@2x.png`)
+        })
+      }
+    }
+
+    this.cardDatas.push(datas)
+  }
+
+  created() {
+    this.onHeroChange()
+  }
+
+  mounted() {
+    this.scrollWidth = this.$refs.listContainer?.offsetWidth
+    this.bs = new BetterScroll(this.$refs.listContainer, {
+      scrollX: true,
+      probeType: 3
+    })
+    this.bs.scrollTo(-this.marginLeft, 0)
+    this.bs.on('scroll', this.onScroll.bind(this))
+    this.bs.on('scrollEnd', this.onScrollEnd.bind(this))
+  }
+
+  onScroll(position: {x: number, y: number}) {
+    this.scrolling = true
+    this.currentPage = (Math.abs(position.x - this.marginLeft) / this.scrollWidth) | 0
+  }
+
+  onScrollEnd() {
+    this.scrolling = false
+  }
+
+  toLeft() {
+    if (!this.scrolling && this.currentPage > 0) {
+      this.currentPage--
+      const target = -(this.currentPage * this.scrollWidth)
+      this.changePos(target, function() {
+        // console.log('toLeft end:', self.scrollLeft)
+      })
+    }
+  }
+
+  toRight() {
+    if (!this.scrolling && this.currentPage < this.totalPage - 1) {
+      this.currentPage++
+      const target = -(this.currentPage * this.scrollWidth)
+      this.changePos(target, function() {
+        // console.log('toRight end:', self.scrollLeft)
+      })
+    }
+  }
+
+  toPage(index: number) {
+    if (index === this.currentPage || this.scrolling) {
+      return
+    }
+    const target = -(index * this.scrollWidth)
+    this.currentPage = index
+    this.changePos(target, function() {
+      // console.log('toPage end:', self.scrollLeft)
+    })
+  }
+
+  changePos(target: number, cb: () => void) {
+    console.log('changePos: ', target)
+    this.$nextTick(() => {
+      this.bs.scrollTo(target - this.marginLeft, 0, 1000)
+      cb()
+    })
+    // setTimeout(function() {
+    //   cb()
+    // }, this.scrollTime * 1000)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nft-list {
+  width: 100%;
+  display: flex;
+  margin-top: 65px;
+  flex-direction: column;
+}
+
+.list-container {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  left: 0;
+  right: 0;
+  height: 520px;
+  white-space: nowrap;
+}
+
+.scroll-content {
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 520px;
+}
+.left-shadow{
+  position: absolute;
+  left: 0;
+}
+.right-shadow{
+  position: absolute;
+  right: 0;
+}
+
+.card-container {
+  display: flex;
+  width: 100%;
+  height: 520px;
+  justify-content: space-between;
+}
+
+.card {
+  height: 520px;
+  width: 444px;
+  margin-left: -30px;
+  margin-right: -30px;
+}
+
+.scroll-content .card:first-child {
+  margin-left: 100px;
+}
+.scroll-content .card:last-child {
+  margin-right: 100px;
+}
+
+.action-bar {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.page-ctrl {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  justify-content: center;
+  padding: 0 50px;
+  margin-top: 54px;
+}
+
+.page-icon {
+  width: 60px;
+  margin: 10px 20px;
+  height: 40px;
+  .ctrl-line{
+    height: 2px;
+    width: 60px;
+    background-color: #53482C;
+  }
+  &.selected {
+    .ctrl-line{
+      background-color: #FFC52F;
+      height: 3px;
+    }
+  }
+}
+
+</style>
diff --git a/src/components/index/HeroSection.vue b/src/components/index/HeroSection.vue
new file mode 100644
index 0000000..90c2be5
--- /dev/null
+++ b/src/components/index/HeroSection.vue
@@ -0,0 +1,41 @@
+<template>
+  <section id="hero-section" data-anchor="hero">
+    <div class="icon">
+      <img src="@/assets/202202/group7@2x.png" alt="hero"/>
+    </div>
+    <div class="list">
+      <hero-scroller ></hero-scroller>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import RImg from '@/components/ResponsiveImage.vue'
+import HeroScroller from '@/components/index/HeroScroller.vue'
+
+@Component({
+  name: 'HeroSection',
+  components: {
+    HeroScroller,
+    RImg
+  }
+})
+export default class extends Vue {
+
+}
+</script>
+
+<style lang="scss" scoped>
+#hero-section{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .icon{
+    margin-top: 102px;
+  }
+  .list{
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/index/InvestorsSection.vue b/src/components/index/InvestorsSection.vue
new file mode 100644
index 0000000..4904561
--- /dev/null
+++ b/src/components/index/InvestorsSection.vue
@@ -0,0 +1,55 @@
+<template>
+  <section id="investors-section" data-anchor="investors">
+    <div class="icon">
+      <img src="@/assets/202202/icon_investors@2x.png" alt="investors"/>
+    </div>
+    <div class="list">
+      <a href="#">
+        <img class="coso" src="@/assets/202202/coso@2x.png" alt="coso"/>
+      </a>
+      <a href="#">
+        <img class="kucoin" src="@/assets/202202/kucoin@2x.png" alt="kucoin"/>
+      </a>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import RImg from '@/components/ResponsiveImage.vue'
+
+@Component({
+  name: 'InvestorsSection',
+  components: {
+    RImg
+  }
+})
+export default class extends Vue {
+
+}
+</script>
+
+<style lang="scss" scoped>
+#investors-section{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 350px;
+  justify-content: space-between;
+  .icon{
+    margin-top: 70px;
+  }
+  .list{
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 20px;
+    .coso{
+      width: 136px;
+    }
+    .kucoin{
+      width: 314px;
+    }
+  }
+}
+</style>
diff --git a/src/components/index/MainSection.vue b/src/components/index/MainSection.vue
new file mode 100644
index 0000000..a0b57e4
--- /dev/null
+++ b/src/components/index/MainSection.vue
@@ -0,0 +1,169 @@
+<template>
+  <section id="main-section" data-anchor="main">
+    <div class="reward-info">
+      <div class="reward-title">
+        <p>About Crypto Elite's:</p>
+        <p>BATTLEGROUNDS(CEBG)</p>
+      </div>
+      <div class="reward-desc">
+        <p>Crypto Elite's:BATTLEGROUNDS(CEBG) is a light online multiplayer Battle Royale game, </p>
+        <p>In the game, up to 40 players parachute onto an island and scavenge for weapons and equipment to</p>
+        <p>kill other while avoiding getting killed themselves. The last player or team standing wins the round.</p>
+      </div>
+    </div>
+    <div class="reward-list">
+      <one-col-cell v-for="d in cellList" :cell-data="d" :key="d.title"></one-col-cell>
+    </div>
+    <img src="@/assets/202202/btn-download@2x.png" class="download-btn" alt="text"/>
+    <div class="download-links">
+      <img src="@/assets/202202/applestore@2x.png" alt="appstore"/>
+      <img src="@/assets/202202/googleplay@2x.png" alt="google play"/>
+    </div>
+    <div class="img-text-cell">
+      <img class="title-img" src="@/assets/202202/play-to-earn@2x.png" alt="play to earn"/>
+      <div class="desc-text">
+        <div class="desc-title">Play TO Earn</div>
+        <div class="desc-list">
+          <p>Reward in-game items and tokens based on player</p>
+          <p>performanceAcquire <img src="@/assets/202202/zurk509i_400x400.png" class="ceg" alt="CEG"/>CEG in <img src="@/assets/202202/icon_pvp.png" alt="pvp"/> and <img src="@/assets/202202/icon_pvp.png" alt="pve"/> plays</p>
+          <p>Win <img src="@/assets/202202/zurk509i_400x400.png" class="ceg" alt="CEG"/>CEG at the end of each season according to player ranking</p>
+        </div>
+      </div>
+    </div>
+    <div class="img-text-cell">
+      <img class="title-img" src="@/assets/202202/free-to-play@2x.png" alt="free to play"/>
+      <div class="desc-text">
+        <div class="desc-title">Free To Play</div>
+        <div class="desc-list">
+          <p>Free play without NFT, all you need is a registration</p>
+          <p>Players can also get <img src="@/assets/202202/zurk509i_400x400.png" class="ceg" alt="CEG"/>CEG rewards in Free to Play mode; token</p>
+          <p>can only be claimed and withdrawn after purchase of NFT </p>
+          <p>hero</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import RImg from '@/components/ResponsiveImage.vue'
+import OneColCell from '@/components/index/OneColCell.vue'
+
+@Component({
+  name: 'MainSection',
+  components: {
+    OneColCell,
+    RImg
+  }
+})
+export default class extends Vue {
+  get cellList() {
+    return [
+      {
+        img: require('@/assets/202202/cell-0@2x.png'),
+        title: 'FUN',
+        desc: ['Battle Royale', '10 mins/battle, enjoy the thrill']
+      },
+      {
+        img: require('@/assets/202202/cell-1@2x.png'),
+        title: 'FREE',
+        desc: ['free enter', 'no need to buy NFT']
+      },
+      {
+        img: require('@/assets/202202/cell-2@2x.png'),
+        title: 'TEAM UP',
+        desc: ['Play with your friends', 'or making new friends in battle']
+      },
+      {
+        img: require('@/assets/202202/cell-3@2x.png'),
+        title: 'EARN',
+        desc: ['play to ean tokens', 'listed on multiple exchanges']
+      }
+    ]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#main-section{
+  background-image: url('../../assets/202202/group2@2x.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 1920px;
+  height: 1850px;
+  margin-top: -87px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .reward-info{
+    width: 1280px;
+    margin-top: 105px;
+    .reward-title{
+      margin-left: 96px;
+      width: 610px;
+      color: transparent;
+      font-size: 55px;
+      font-weight: bold;
+      background: linear-gradient(to right, #FFE930, #FF8914);
+      -webkit-background-clip: text;
+      p{
+        margin-block-start: 12px;
+        margin-block-end: 12px;
+      }
+    }
+    .reward-desc{
+      margin-left: 96px;
+      color: #EDEDED;
+      font-size: 25px;
+      p{
+        margin-block-start: 8px;
+        margin-block-end: 8px;
+      }
+    }
+  }
+  .reward-list{
+    display: flex;
+    width:1280px;
+    flex-direction: row;
+    justify-content: space-between;
+    .one-col-cell:first-child{
+      margin-left: 50px;
+    }
+    .one-col-cell:last-child{
+      margin-right: 50px;
+    }
+  }
+  .img-text-cell{
+    color: white;
+    display: flex;
+    width: 1280px;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 105px;
+    .title-img{
+      margin-left: 94px;
+    }
+    .desc-text{
+      margin-right: 30px;
+      width: 705px;
+      .desc-title{
+        font-size: 24px;
+        font-weight: bold;
+      }
+      p{
+        font-size: 18px;
+      }
+    }
+
+  }
+  .download-btn{
+    margin-top: 100px;
+    margin-bottom: 50px;
+  }
+  img.ceg {
+    margin-right: 2px;
+  }
+}
+</style>
diff --git a/src/components/index/OneColCell.vue b/src/components/index/OneColCell.vue
new file mode 100644
index 0000000..30302ec
--- /dev/null
+++ b/src/components/index/OneColCell.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="one-col-cell">
+    <img class="icon" :src="cellData.img" alt="icon"/>
+    <div class="title">{{cellData.title}}</div>
+    <div class="desc" v-for="s in cellData.desc" :key="s">{{s}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+export interface ICellData {
+  img: any
+  title: string
+  desc: [string]
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    cellData: ICellData
+  }
+}
+
+@Component({
+  name: 'OneColCell',
+  components: {
+  },
+  props: ['cellData']
+})
+export default class extends Vue {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.one-col-cell{
+  width: 270px;
+  height: 330px;
+  background-image: url('../../assets/202202/col-bg@2x.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+  .icon{
+    margin-top: 38px;
+  }
+  .title{
+    color: #FFE430;
+    font-size: 21px;
+    font-weight: bold;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  .desc{
+    color: #FDFDFD;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/components/index/TopSection.vue b/src/components/index/TopSection.vue
new file mode 100644
index 0000000..63bafc2
--- /dev/null
+++ b/src/components/index/TopSection.vue
@@ -0,0 +1,171 @@
+<template>
+  <section id="top-section" data-anchor="top">
+    <div class="slide-banner">
+      <div class="banner-wrapper">
+        <div class="slide-banner-wrapper" ref="slide">
+          <div class="slide-banner-content">
+            <img v-for="(img, index) in imgs" class="slide-page" :key="index" :src="img" alt=""/>
+          </div>
+        </div>
+        <div class="dots-wrapper" v-if="imgs.length>1">
+          <div class="page-icon"
+               v-for="(data, index) in imgs"
+               @click="toPage(index)"
+               :key="index" :class="index===currentPageIndex? 'selected': ''">
+            <div class="ctrl-line"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <img class="play-btn" @click="comingSoon" src="@/assets/202202/button@2x.png" alt="play">
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import RImg from '@/components/ResponsiveImage.vue'
+import BetterScroll from 'better-scroll'
+import { Message } from 'element-ui'
+
+@Component({
+  name: 'TopSection',
+  components: {
+    RImg
+  }
+})
+export default class extends Vue {
+  private nums = 2
+  private currentPageIndex = 0
+  private slide: any
+
+  $refs!: {
+    slide: HTMLFormElement
+  }
+
+  get imgs() {
+    return [
+      require('@/assets/202202/cebg_banner2@2x.png')
+      // require('@/assets/202202/cebg_banner2@2x.png')
+    ]
+  }
+
+  mounted() {
+    this.nums = this.imgs.length
+    this.initScroll()
+  }
+
+  toPage(index: number) {
+    console.log('toPage:', index)
+    this.slide.goToPage(index, 0)
+  }
+
+  initScroll() {
+    this.slide = new BetterScroll(this.$refs.slide, {
+      scrollX: true,
+      scrollY: false,
+      slide: true,
+      momentum: false,
+      bounce: false,
+      probeType: 3
+    })
+    this.slide.on('scrollEnd', this._onScrollEnd.bind(this))
+
+    this.slide.on('slideWillChange', (page: any) => {
+      this.currentPageIndex = page.pageX
+    })
+
+    // v2.1.0
+    this.slide.on('slidePageChanged', (page: any) => {
+      console.log('CurrentPage changed to => ', page)
+    })
+  }
+
+  _onScrollEnd() {
+    console.log('CurrentPage => ', this.slide.getCurrentPage())
+  }
+
+  comingSoon() {
+    Message({
+      message: 'coming soon',
+      type: 'info',
+      duration: 5 * 1000
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#top-section{
+  width: 1920px;
+  height: 1004px;
+  position: relative;
+  background-image: url('../../assets/202202/cebg_banner2@2x.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  .play-btn{
+    width: 280px;
+    height: 68px;
+    bottom: 188px;
+    left: 0;
+    right: 0;
+    margin-right: auto;
+    margin-left: auto;
+    position: absolute;
+    cursor: pointer;
+  }
+  .slide-banner {
+    .banner-wrapper{
+      position: relative;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1004px;
+    }
+    .slide-banner-wrapper {
+      min-height: 1px;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    .slide-banner-content{
+      height:  100%;
+      white-space: nowrap;
+      font-size: 0;
+      .slide-page{
+        display: inline-block;
+        height: 1004px;
+        width: 1920px;
+      }
+    }
+    .dots-wrapper{
+      position: absolute;
+      bottom: 100px;
+      width: 100%;
+      left: 0;
+      display: flex;
+      justify-content: center;
+      .page-icon {
+        width: 60px;
+        margin: 10px 20px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .ctrl-line {
+          height: 1px;
+          width: 60px;
+          background-color: black;
+        }
+
+        &.selected {
+          .ctrl-line {
+            background-color: white;
+            height: 2px;
+          }
+        }
+      }
+    }
+  }
+
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index c921e89..a121084 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,11 +5,11 @@ import 'element-ui/lib/theme-chalk/index.css'
 import router from './router'
 import store from './store'
 import VueClipboard from 'vue-clipboard2'
-import 'video.js/dist/video-js.css'
-import VueYouTubeEmbed from 'vue-youtube-embed'
+// import 'video.js/dist/video-js.css'
+// import VueYouTubeEmbed from 'vue-youtube-embed'
 
 Vue.use(ElementUI)
-Vue.use(VueYouTubeEmbed)
+// Vue.use(VueYouTubeEmbed)
 Vue.use(VueClipboard)
 Vue.config.productionTip = false
 
diff --git a/src/router/index.ts b/src/router/index.ts
index e2f0215..97ba2c2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,6 +5,7 @@ import Market from '../views/Market.vue'
 import Official from '@/views/Official.vue'
 import Item from '../views/Item.vue'
 import MyNft from '@/views/MyNft.vue'
+import Index from '@/views/Index.vue'
 
 Vue.use(VueRouter)
 
@@ -47,6 +48,11 @@ const routes: Array<RouteConfig> = [
     // which is lazy-loaded when the route is visited.
     component: () =>
       import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+  {
+    path: '/index',
+    name: 'Index',
+    component: Index
   }
 ]
 
diff --git a/src/views/Index.vue b/src/views/Index.vue
new file mode 100644
index 0000000..9d50728
--- /dev/null
+++ b/src/views/Index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="container" :style="cstyle">
+    <desktop-header></desktop-header>
+    <top-section></top-section>
+    <main-section></main-section>
+    <hero-section></hero-section>
+    <investors-section></investors-section>
+    <desktop-footer></desktop-footer>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import DesktopHeader from '@/components/index/DesktopHeader.vue'
+import DesktopFooter from '@/components/index/DesktopFooter.vue'
+import InvestorsSection from '@/components/index/InvestorsSection.vue'
+import TopSection from '@/components/index/TopSection.vue'
+import MainSection from '@/components/index/MainSection.vue'
+import HeroSection from '@/components/index/HeroSection.vue'
+
+@Component({
+  name: 'Index',
+  components: {
+    HeroSection,
+    MainSection,
+    TopSection,
+    InvestorsSection,
+    DesktopFooter,
+    DesktopHeader
+  }
+})
+export default class extends Vue {
+  private scale = 1
+  get cstyle() {
+    return {
+      transform: `scale(${this.scale})`
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  max-width: 1920px;
+  margin: 0 auto;
+  background-color: #171717;
+  transform-origin: top;
+}
+</style>
diff --git a/src/views/Main.vue b/src/views/Main.vue
index 695b0e6..79095d1 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -23,7 +23,7 @@ import GamePlaySection from '@/components/main/GamePlaySection.vue'
 import NftSection from '@/components/main/NftSection.vue'
 import MainFooter from '@/components/main/MainFooter.vue'
 @Component({
-  name: 'Index',
+  name: 'Main',
   components: {
     MainFooter,
     NftSection,