fix: change style

.eslintrc.json

@@ -1,6 +1,10 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"],
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ],
   "rules": {
-    "@next/next/no-img-element": "off" // 或者 "error"，取决于你希望是警告还是错误
+    "@next/next/no-img-element": "off", // 或者 "error"，取决于你希望是警告还是错误
+    "react-hooks/rules-of-hooks": "off"
   }
 }

example.json

@@ -0,0 +1,42 @@
+[
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "https://preview.soyootech.com/temp/B.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "exampleName": "测试",
+        "icon": "https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/exampleIcon/20241023-13_02_05.jpg",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    }
+]

package-lock.json

@@ -10,13 +10,14 @@
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
+        "@formatjs/intl-localematcher": "^0.5.5",
         "@mui/material": "^6.1.3",
-        "i18next": "^23.15.2",
+        "negotiator": "^0.6.3",
         "next": "14.2.15",
-        "next-i18next": "^15.3.1",
+        "next-intl": "^3.21.1",
+        "postcss-pxtorem": "^6.1.0",
         "react": "^18",
-        "react-dom": "^18",
+        "react-dom": "^18"
-        "react-i18next": "^15.0.3"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -475,6 +476,56 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.0.tgz",
+      "integrity": "sha512-IpM+ev1E4QLtstniOE29W1rqH9eTdx5hQdNL8pzrflMj/gogfaoONZqL83LUeQScHAvyMbpqP5C9MzNf+fFwhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "2.2.1",
+        "@formatjs/intl-localematcher": "0.5.5",
+        "tslib": "^2.7.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/@formatjs/fast-memoize/-/fast-memoize-2.2.1.tgz",
+      "integrity": "sha512-XS2RcOSyWxmUB7BUjj3mlPH0exsUzlf6QfhhijgI941WaJhVxXQ6mEWkdUFIdnKi3TuTYxRdelsgv3mjieIGIA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.7.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmmirror.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.10.tgz",
+      "integrity": "sha512-wlQfqCZ7PURkUNL2+8VTEFavPovtADU/isSKLFvDbdFmV7QPZIYqFMkhklaDYgMyLSBJa/h2MVQ2aFvoEJhxgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.2.0",
+        "@formatjs/icu-skeleton-parser": "1.8.4",
+        "tslib": "^2.7.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmmirror.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.4.tgz",
+      "integrity": "sha512-LMQ1+Wk1QSzU4zpd5aSu7+w5oeYhupRwZnMQckLPRYhSjf2/8JWQ882BauY9NyHxs5igpuQIXZDgfkaH3PoATg==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.2.0",
+        "tslib": "^2.7.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.5.tgz",
+      "integrity": "sha512-t5tOGMgZ/i5+ALl2/offNqAQq/lfUnKLEw0mXQI4N4bqpedhrSE+fyKLpwnd22sK0dif6AV+ufQcTsKShB9J1g==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.7.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1083,16 +1134,6 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.5",
-      "resolved": "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
-      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmmirror.com/@types/json5/-/json5-0.0.29.tgz",
@@ -1928,17 +1969,6 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
-    "node_modules/core-js": {
-      "version": "3.38.1",
-      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.38.1.tgz",
-      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -3362,44 +3392,6 @@
         "react-is": "^16.7.0"
       }
     },
-    "node_modules/html-parse-stringify": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
-      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
-      "license": "MIT",
-      "dependencies": {
-        "void-elements": "3.1.0"
-      }
-    },
-    "node_modules/i18next": {
-      "version": "23.15.2",
-      "resolved": "https://registry.npmmirror.com/i18next/-/i18next-23.15.2.tgz",
-      "integrity": "sha512-zcPSWzCvw6uKnuYHIqs4W7hTuB9e3AFcSdZgvCWoPXIZsBjBd4djN2/2uOHIB+1DFFkQnMBXvhNg7J3WyCuywQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://locize.com"
-        },
-        {
-          "type": "individual",
-          "url": "https://locize.com/i18next.html"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.23.2"
-      }
-    },
-    "node_modules/i18next-fs-backend": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmmirror.com/i18next-fs-backend/-/i18next-fs-backend-2.3.2.tgz",
-      "integrity": "sha512-LIwUlkqDZnUI8lnUxBnEj8K/FrHQTT/Sc+1rvDm9E8YvvY5YxzoEAASNx+W5M9DfD5s77lI5vSAFWeTp26B/3Q==",
-      "license": "MIT"
-    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.3.2.tgz",
@@ -3470,6 +3462,18 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "10.7.0",
+      "resolved": "https://registry.npmmirror.com/intl-messageformat/-/intl-messageformat-10.7.0.tgz",
+      "integrity": "sha512-2P06M9jFTqJnEQzE072VGPjbAx6ZG1YysgopAwc8ui0ajSjtwX1MeQ6bXFXIzKcNENJTizKkcJIcZ0zlpl1zSg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.2.0",
+        "@formatjs/fast-memoize": "2.2.1",
+        "@formatjs/icu-messageformat-parser": "2.7.10",
+        "tslib": "^2.7.0"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -4249,6 +4253,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "14.2.15",
       "resolved": "https://registry.npmmirror.com/next/-/next-14.2.15.tgz",
@@ -4299,40 +4312,25 @@
         }
       }
     },
-    "node_modules/next-i18next": {
+    "node_modules/next-intl": {
-      "version": "15.3.1",
+      "version": "3.21.1",
-      "resolved": "https://registry.npmmirror.com/next-i18next/-/next-i18next-15.3.1.tgz",
+      "resolved": "https://registry.npmmirror.com/next-intl/-/next-intl-3.21.1.tgz",
-      "integrity": "sha512-+pa2pZJb7B6k5PKW3TLVMmAodqkNaOBWVYlpWX56mgcEJz0UMW+MKSdKM9Z72CHp6Bp48g7OWwDnLqxXNp/84w==",
+      "integrity": "sha512-hQm4Wgq5i1lfOHAWmXBVl5d2/XAeddcjsrUmjotXEESzPSvW5j2t0Pr8AV8WorTILgqU748aXuenBhz5P78tdw==",
       "funding": [
         {
           "type": "individual",
-          "url": "https://locize.com/i18next.html"
+          "url": "https://github.com/sponsors/amannn"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
-        },
-        {
-          "type": "individual",
-          "url": "https://locize.com"
         }
       ],
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.23.2",
+        "@formatjs/intl-localematcher": "^0.5.4",
-        "@types/hoist-non-react-statics": "^3.3.4",
+        "negotiator": "^0.6.3",
-        "core-js": "^3",
+        "use-intl": "^3.21.1"
-        "hoist-non-react-statics": "^3.3.2",
-        "i18next-fs-backend": "^2.3.2"
-      },
-      "engines": {
-        "node": ">=14"
       },
       "peerDependencies": {
-        "i18next": ">= 23.7.13",
+        "next": "^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
-        "next": ">= 12.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-        "react": ">= 17.0.2",
-        "react-i18next": ">= 13.5.0"
       }
     },
     "node_modules/next/node_modules/postcss": {
@@ -4723,7 +4721,6 @@
       "version": "8.4.47",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.47.tgz",
       "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4861,6 +4858,15 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-pxtorem": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
+      "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -4959,28 +4965,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-i18next": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-15.0.3.tgz",
-      "integrity": "sha512-BlO1P+oLKjjIxDBQ0GkAIMacgjfMbnvops+3Y5nZXF7UJ99v4KCWr0Na1azJXC8AMiNWp4kgUcFCJM7U9ZsUDg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.25.0",
-        "html-parse-stringify": "^3.0.1"
-      },
-      "peerDependencies": {
-        "i18next": ">= 23.2.3",
-        "react": ">= 16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
@@ -5957,6 +5941,19 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-intl": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmmirror.com/use-intl/-/use-intl-3.21.1.tgz",
+      "integrity": "sha512-52kYgcydYkG9SX0ZZGt7W6WD2Va01hwe15bDgkXuaTdSxrF9fDu6hHTV5DxIuSmSSf/FEcBo/nodpw3ZhY31Lw==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/fast-memoize": "^2.2.0",
+        "intl-messageformat": "^10.5.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -5964,15 +5961,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/void-elements": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",

package.json

@@ -19,7 +19,8 @@
     "next-intl": "^3.21.1",
     "postcss-pxtorem": "^6.1.0",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-fast-marquee": "^1.6.5"
   },
   "devDependencies": {
     "@types/node": "^20",

pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       react-dom:
         specifier: ^18
         version: 18.3.1(react@18.3.1)
+      react-fast-marquee:
+        specifier: ^1.6.5
+        version: 1.6.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@types/node':
         specifier: ^20
@@ -1558,6 +1561,12 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-fast-marquee@1.6.5:
+    resolution: {integrity: sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==}
+    peerDependencies:
+      react: '>= 16.8.0 || ^18.0.0'
+      react-dom: '>= 16.8.0 || ^18.0.0'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3625,6 +3634,11 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-fast-marquee@1.6.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-is@16.13.1: {}
 
   react-is@18.3.1: {}

price.json

@@ -0,0 +1,38 @@
+[
+    {
+        "desc": "初级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "初级5k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "初级1w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级1w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级1.5w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "高级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "高级2w",
+        "url": "https://static.soyootech.com/case/bubble/bubble.html"
+    },
+    {
+        "desc": "高级2w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    }
+]

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /            

public/sitemap.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+    xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+       http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
+>
+
+<url>
+ <loc>https://www.soyootech.com/en</loc>
+ <priority>0.3</priority>
+ <lastmod>2024-10-25</lastmod>
+ <changefreq>weekly</changefreq>
+</url>
+
+<url>
+ <loc>https://www.soyootech.com/price</loc>
+ <priority>0.3</priority>
+ <lastmod>2024-10-25</lastmod>
+ <changefreq>weekly</changefreq>
+</url>
+
+<url>
+ <loc>https://www.soyootech.com/</loc>
+ <priority>0.3</priority>
+ <lastmod>2024-10-25</lastmod>
+ <changefreq>weekly</changefreq>
+</url>
+
+</urlset>

src/app/[[...lang]]/components/form.tsx

@@ -27,7 +27,7 @@ export default function Form() {
                 <div className="text-[#fff] text-[24px] font-semibold">提交</div>
                 <img
                     className="w-[26px] h-[22px]"
-                    src="/home/submit_icon.png"
+                    src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/submit_icon.png"
                     alt=""
                 />
 

src/app/[[...lang]]/components/more.tsx

@@ -1,17 +0,0 @@
-import Link from "next/link"
-
-export default function More(props: {dict: Record<string, string>, lang: string[]}) {
-    const { dict } = props
-    return <>
-    <Link href="#contact">
-    
-        <div className="flex flex-col justify-center items-center 
-        text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] w-[280px] h-[280px]"
-        style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
-            <div>{ dict.seeMore }</div> 
-            <div>{ dict.contactUs1 }</div>
-        </div>
-    </Link>
-        </>
-    
-}

src/app/[[...lang]]/page.tsx

@@ -1,212 +1,122 @@
-
+import { getDictionary } from "@/dictionaries";
-
-
-
-
-import { getDictionary } from '@/dictionaries';
 import Form from "./components/form";
 import Header from "@/app/components/header";
 import Footer from "@/app/components/footer";
-import More from './components/more';
 
-type CaseType = {
+import Examples from "../components/Examples";
-    img: string
+import ChannelSwiper from "../components/ChannelSwiper";
-}
-export type PropsType = {
-    params: {
-      lang: string[];
-    };
-}
 
+export default async function Home(props: { params: { lang: string[] } }) {
+  const lang = props.params.lang || ["zh"];
 
-
-export default async function Home (props: PropsType) {
-    const lang = props.params.lang || ['zh'];
   const dict = await getDictionary(lang[0]);
-    const caseList: CaseType[] = [
-        { img: '/home/case_1.png' },
-        { img: '/home/case_2.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_1.png' },
-        { img: '/home/case_2.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_1.png' },
-        { img: '/home/case_2.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_3.png' },
-        { img: '/home/case_1.png' },
-        { img: '/home/case_2.png' },
-        { img: '/home/case_3.png' },
-    ]
-    return <>
-        <div className='w-full flex flex-col items-center'>
-            <Header dict={dict} lang={lang} />
-            <div className="w-[1440px] relative pt-[80px]" 
-            >
-                <div className='main'>
-                    <div className="w-full h-[770px] pl-[72px] relative" id="home">
-                        <img
-                            className="absolute right-[-40px] w-[1520px] h-[770px]"
-                            src="/home/img_header.png"
-                            alt=""
 
-                        />
+  return (
-                        <div 
+    <>
-                            className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px]"
+      <div className="w-full flex flex-col items-center">
-                        >
+        <Header dict={dict} lang={lang} />
+        <div className="w-[1440px] relative pt-[80px]">
+          <div className="main">
+            <div className="w-full h-[740px] pl-[72px] relative" id="home">
+              <img className="absolute right-[-40px] w-[1520px] " src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_header.png" alt="" />
+              <div className="text-[46px] leading-[62px] w-[639px] text-center pt-[279px] absolute">
                 <div
                   className="font-black"
                   style={{
-                                'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
+                    background: "linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)",
-                                'backgroundClip': 'text',
+                    backgroundClip: "text",
-                                'WebkitTextFillColor': 'transparent'
+                    WebkitTextFillColor: "transparent",
-                            }}>
+                    backgroundSize: "contain",
+                  }}
+                >
                   {dict.FocusingOnPlayableAds}
                 </div>
                 <div
                   className="font-black"
                   style={{
-                                'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
+                    background: "linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)",
-                                'backgroundClip': 'text',
+                    backgroundClip: "text",
-                                'WebkitTextFillColor': 'transparent'
+                    WebkitTextFillColor: "transparent",
-                            }}>
+                  }}
+                >
                   {dict.goOverseas}
                 </div>
               </div>
             </div>
             <div className="w-full h-[428px] relative" id="service">
-                        <img
+              <img className="absolute left-[-214px] w-[969px] h-[428px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_bg2.png" alt="" />
-                            className="absolute left-[-214px] w-[969px] h-[428px]"
+              <div className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#333333] text-right font-semibold">{dict.customized}</div>
-                            src="/home/img_bg2.png"
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[770px] text-[32px] top-[184px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.customized }
-                        </div>
             </div>
 
-                    <div className="w-full h-[403px] relative">
+            <div className="w-full h-[403px] relative ">
-                        <img
+              <img className="absolute right-[-100px] w-[888px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_AB.png" alt="" />
-                            className="absolute right-[-100px] w-[888px] h-[403px]"
+              <div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">{dict.ABTesting}</div>
-                            src="/home/img_AB.png"
+              <div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">{dict.iterateGameplay}</div>
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[662px] text-[32px] top-[160px] left-[105px] text-[#333333] text-left font-semibold">
-                        { dict.ABTesting}
-                        </div>
-                        <div className="absolute w-[680px] text-[32px] top-[204px] left-[105px] text-[#333333] text-left font-semibold">
-                        { dict.iterateGameplay }
-                        </div>
             </div>
             <div className="w-full h-[392px] relative">
-                        <img
+              <img className="absolute w-[731px] left-[-33px] top-[-20px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_mutilan.png" alt="" />
-                            className="absolute w-[731px] h-[392px] left-[-33px]"
+              <div className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">{dict.multiLanguage}</div>
-                            src="/home/img_mutilan.png"
+              <div className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">{dict.breakingGeographical}</div>
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[520px] text-[32px] top-[197px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.multiLanguage }
-                        </div>
-                        <div className="absolute w-[520px] text-[32px] top-[242px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.breakingGeographical }
-                        </div>
             </div>
             <div className="w-full h-[317px] relative mt-[83px]">
-                        <img
+              <img className="absolute right-0 w-[742px] h-[317px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_Omnichannel.png" alt="" />
-                            className="absolute right-0 w-[742px] h-[317px]"
+              <div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">{dict.allChannel}</div>
-                            src="/home/img_Omnichannel.png"
+              <div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">{dict.expandInfluence}</div>
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[680px] text-[32px] top-[124px] left-[105px] text-[#333333] text-left font-semibold">
-                        { dict.allChannel }
-                        </div>
-                        <div className="absolute w-[680px] text-[32px] top-[169px] left-[105px] text-[#333333] text-left font-semibold">
-                        { dict.expandInfluence }
-                        </div>
             </div>
 
-                    <div className="w-full h-[317px] relative mt-[83px]">
+            <div className="w-full h-[317px] relative mt-[120px]">
-                        <img
+              <img className="absolute w-[908px] h-[356px] left-[-40px] top-[-30px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/img_3.png" alt="" />
-                            className="absolute left-[-329px] w-[1250px] h-[357px]"
+              <div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">{dict.lightweightDeployment}</div>
-                            src="/home/img_3.png"
+              <div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">{dict.simplifyProcess}</div>
-                            alt=""
-                        
-                        />
-                        <div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">
-                        { dict.lightweightDeployment }
             </div>
 
-                        <div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">
+            <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[50px]">
-                        { dict.simplifyProcess }
+              <div
+                className="leading-[42px] text-[36px] font-black w-[350px] mb-[11px] text-center"
+                style={{
+                  background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
+                  backgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                }}
+              >
+                {dict.channel}
               </div>
             </div>
+            <ChannelSwiper />
+
+
             <div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
-                        
               <div
                 className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
                 style={{
-                                    background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
+                  background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
-                                    backgroundClip: 'text',
+                  backgroundClip: "text",
-                                    WebkitTextFillColor: 'transparent'
+                  WebkitTextFillColor: "transparent",
                 }}
-                            >{ dict.caseGallery }</div>
-                            {/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
-                                
-                        </div>
-                    
-                    <div className="w-full px-[40px] flex flex-wrap justify-between mt-[34px] mb-[83px]">
-                        {
-                            caseList.map((item: CaseType, index: number) => {
-                                return <div key={'key'+index} className="cursor-pointer relative group mb-[60px]">
-                                    <div className='hover:scale-[1.25] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px]'>
-                                        <img
-                                            className="rounded-[60px] w-full
-                                            transition ease-in-out duration-300 w-[280px] h-[280px]"
-                                            src={item.img}
-                                            alt=""
-                                        />
-                                        <div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center 
-                                        text-white text-[30px] hidden group-hover:block '
-                                        style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
               >
-                                            {dict.clickToPlay}
+                {dict.caseGallery}
               </div>
+              {/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
             </div>
-                                
+            <Examples dict={dict} lang={lang} />
-                                </div>
-                            })
-                        }
-                        <div className="flex flex-col justify-center items-center 
-                        text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px] w-[280px] h-[280px]"
-                        style={{background: 'radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)' }}>
-                            <More dict={dict} lang={lang} />
-                        </div>
-                    </div>  
-                    
 
             <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">
               <div
                 className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
                 style={{
-                                background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
+                  background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
-                                backgroundClip: 'text',
+                  backgroundClip: "text",
-                                WebkitTextFillColor: 'transparent'
+                  WebkitTextFillColor: "transparent",
                 }}
-                        >{ dict.contactUs }</div>
+              >
+                {dict.contactUs}
+              </div>
             </div>
             <div className="w-full mb-[60px]">
               <Form />
             </div>
-                    <div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]"
+            <div className="w-full flex justify-center text-[19px] text-[#59676C] pb-[52px] mb-[47px] border-b-1 border-solid border-[#D8D8D8]" style={{ borderBottom: "1px solid #D8D8D8" }}>
-                        style={{ borderBottom: '1px solid #D8D8D8' }}
+              {dict.businessCooperation}info@soyootech.com
-                    >
-                    { dict.businessCooperation }info@soyootech.com
             </div>
             <div>
               <Footer dict={dict} />
@@ -215,4 +125,5 @@ export default async function Home (props: PropsType) {
         </div>
       </div>
     </>
+  );
 }

src/app/components/ChannelSwiper.tsx

@@ -0,0 +1,41 @@
+"use client";
+import Marquee from "react-fast-marquee";
+
+const data = [
+  { url: "logo-yandex.png" },
+  { url: "logo-weixin.png" },
+  { url: "logo-vungle.png" },
+  { url: "logo-unity.png" },
+  { url: "logo-tiktok.png" },
+  { url: "logo-tapjoy.png" },
+  { url: "logo-pangle.png" },
+  { url: "logo-moloco.png" },
+  { url: "logo-mintegral.png" },
+  { url: "logo-liftoff.png" },
+  { url: "logo-kwai.png" },
+  { url: "logo-google.png" },
+  { url: "logo-facebook.png" },
+  { url: "logo-chartboost.png" },
+  { url: "logo-bigoads.png" },
+  { url: "logo-applovin.png" },
+];
+
+export default function ChannelSwiper() {
+  const isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
+
+  return (
+    <>
+      <div className="overflow-hidden flex items-center">
+        <Marquee speed={isMobile ? 15 : 50}>
+          {data.map((item, index) => {
+            return (
+              <div key={index} className="mx-8 max-w-[100px] w-auto h-[80px] flex items-center ">
+                <img src={`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/channel/${item.url}`} className={` ${item.url.includes("chartboost") ? "translate-y-[-16px]" : ""}`} alt="" />
+              </div>
+            );
+          })}
+        </Marquee>
+      </div>
+    </>
+  );
+}

src/app/components/Examples.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { useEffect, useState } from "react";
+import More from "./more";
+
+export default function Examples(props: { dict: Record<string, string>; lang: string[] }) {
+  const [previewInfo, setPreviewInfo] = useState({
+    url: "",
+    preview: false,
+  });
+
+  const [examples, setExamples] = useState([]);
+
+  useEffect(() => {
+    if (window.location.hash == "#/price") {
+      window.location.replace(`${window.location.origin}/price`);
+      return;
+    }
+    const fetchData = async () => {
+      const res = await fetch(`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/example.json`);
+      const dataSource = await res.json();
+      setExamples(dataSource);
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <>
+      <div className="w-[89%] flex flex-wrap mt-[34px] mb-[83px] mx-auto">
+        {examples.map((item: { icon: string | undefined; url: string }, index: number) => {
+          return (
+            <div key={"key" + index} className="cursor-pointer relative group mb-[60px] w-1/4 flex justify-center">
+              <div
+                className="hover:scale-[1.15] transition ease-in-out duration-300 hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] w-[280px] h-[280px] relative"
+                onClick={() => {
+                  document.body.style.overflow = "hidden";
+                  setPreviewInfo({
+                    preview: true,
+                    url: item.url,
+                  });
+                }}
+              >
+                <img className="rounded-[60px] w-[280px] h-[280px]" src={item.icon} alt="" />
+                <div
+                  className="absolute bottom-0 w-full h-[81px] bg-[#002653] text-center text-white text-[30px] hidden group-hover:block "
+                  style={{ borderRadius: "0px 0px 60px 60px", lineHeight: "81px" }}
+                >
+                  {props.dict.clickToPlay}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        <div className="w-1/4">
+          <div
+            className="flex flex-col justify-center items-center  text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] mb-[50px] w-[280px] h-[280px] mx-auto"
+            style={{ background: "radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)" }}
+          >
+            <More dict={props.dict} lang={props.lang} />
+          </div>
+        </div>
+      </div>
+
+      {previewInfo.preview && (
+        <div
+          className="fixed left-0 right-0 top-0 bottom-0 bg-black/60 z-[2000]"
+          onClick={() => {
+            document.body.style.overflow = "auto";
+            setPreviewInfo({
+              preview: false,
+              url: "",
+            });
+          }}
+        >
+          <div
+            className="flex justify-center w-[370px] h-[610px] items-center fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] mx-auto border rounded-lg p-4 bg-white"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <iframe src={previewInfo.url} className="w-full h-full" />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

src/app/components/footer.tsx

@@ -1,40 +1,29 @@
-
+export default function Footer(props: { dict: Record<string, string> }) {
-export default function Footer(props: {dict: Record<string, string>}) {
+  const { dict } = props;
-    const { dict } = props
   return (
     <footer>
       <div className="flex items-start justify-between w-full px-[304px]">
         <div className=" w-[166px] flex flex-col items-center mb-[15px]">
-                <img
+          <img className="mb-[16px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/qrcode.png" width={151} height={151} alt="" />
-                    className="mb-[16px]"
+          <div className="text-[#888888] text-[15px] text-center">{dict.addWeChat}</div>
-                    src="/home/qrcode.png"
-                    width={151}
-                    height={151}
-                    alt=""
-                />
-                <div className="text-[#888888] text-[15px] text-center">{ dict.addWeChat }</div>
         </div>
-            <div >
+        <div>
-                <div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{ dict.emailContact }</div>
+          <div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{dict.emailContact}</div>
           <div className="text-[#333333] text-[15px] ">info@soyootech.com</div>
         </div>
         <div>
-                <div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{ dict.helpSupport }</div>
+          <div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{dict.helpSupport}</div>
-                <div className="text-[#333333] text-[15px] mb-[23px]">{ dict.productCenter }</div>
+          <div className="text-[#333333] text-[15px] mb-[23px]">{dict.productCenter}</div>
-                <div className="text-[#333333] text-[15px] ">{ dict.productPricing }</div>
+          <div className="text-[#333333] text-[15px] ">{dict.productPricing}</div>
         </div>
         <div>
-                <div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{ dict.legalAgreements }</div>
+          <div className="text-[#AFB2B9] text-[17px] font-medium mb-[45px]">{dict.legalAgreements}</div>
-                <div className="text-[#333333] text-[15px] mb-[23px]">{ dict.privacyPolicy }</div>
+          <div className="text-[#333333] text-[15px] mb-[23px]">{dict.privacyPolicy}</div>
-                <div className="text-[#333333] text-[15px] ">{ dict.userAgreement }</div>
+          <div className="text-[#333333] text-[15px] ">{dict.userAgreement}</div>
         </div>
       </div>
-        <div className="text-[15px] text-[#888888] text-center">
+      <div className="text-[15px] text-[#888888] text-center">Copyright © 2020-2024 All Rights Reserved.</div>
-        Copyright © 2020-2024 All Rights Reserved.
+      <div className="text-[15px] text-[#888888] text-center mb-[20px]">京ICP备20028159号 版权所有</div>
-        </div>
-        <div className="text-[15px] text-[#888888] text-center mb-[20px]">
-        京ICP备20028159号 版权所有
-        </div>
     </footer>
-  )
+  );
 }

src/app/components/header.tsx

@@ -1,144 +1,138 @@
-'use client'
+"use client";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
-
-
-
 type NavType = {
   name: string;
   href: string;
-}
+};
 
+export default function Header(props: { dict: Record<string, string>; lang: string[] }) {
+  const { dict, lang } = props;
+  const [activeTab, setActiveTab] = useState(dict.home);
+  const [show, setShow] = useState(false);
+  const [hash, setHash] = useState("#home");
 
-export default function Header(props: { dict: Record<string, string>, lang: string[] }) {
-  const { dict, lang } = props
-  const [activeTab, setActiveTab] = useState(dict.home)
-  const [show, setShow] = useState(false)
-  const [hash, setHash] = useState('#home')
   useEffect(() => {
     // const designWidth = 1440;
-    // const deviceWidth = document.documentElement.clientWidth
+    // const deviceWidth = document.documentElement.clientWidth;
-    // let scale = 1
+    // let scale = 1;
+    // console.log("designWidth", deviceWidth);
     // if (deviceWidth <= 1440) {
     //   scale = deviceWidth / designWidth;
     // }
+    // console.log("scale", scale);
     // document.documentElement.style.fontSize = `${scale * 14.4}px`;
+  }, [hash]);
+
+  const handleJumpTo = (hash: string) => {
     switch (hash) {
-      case '#home':
+      case "#home":
-        const home = document.getElementById('home')
+        const home = document.getElementById("home");
         document.documentElement.scrollTo({
           top: home!.offsetTop - 80,
-          behavior: 'smooth'
+          behavior: "smooth",
         });
         break;
-      case '#service':
+      case "#service":
-        const service = document.getElementById('service')
+        const service = document.getElementById("service");
         document.documentElement.scrollTo({
           top: service!.offsetTop - 80,
-          behavior: 'smooth'
+          behavior: "smooth",
         });
         break;
-      case '#case':
+      case "#case":
-        const caseDom = document.getElementById('case')
+        const caseDom = document.getElementById("case");
         document.documentElement.scrollTo({
           top: caseDom!.offsetTop - 110,
-          behavior: 'smooth'
+          behavior: "smooth",
         });
         break;
-      case '#contact':
+      case "#contact":
-          const contact = document.getElementById('contact')
+        const contact = document.getElementById("contact");
         document.documentElement.scrollTo({
           top: contact!.offsetTop - 80,
-            behavior: 'smooth'
+          behavior: "smooth",
         });
         break;
     }
-    
+  };
-
-
-  }, [hash])
 
   const navList: NavType[] = [
     {
       name: dict.home,
-      href: "#home"
+      href: "#home",
     },
     {
       name: dict.services,
-      href: "#service"
+      href: "#service",
     },
     {
       name: dict.caseGallery,
-      href: "#case"
+      href: "#case",
     },
     {
       name: dict.contactUs,
-      href: "#contact"
+      href: "#contact",
     },
-  ]
+  ];
-  return (<>
+  return (
-    <div className={`flex items-center px-[40px] h-[80px] border-b-1 border-solid 
+    <>
-        border-[#D8D8D8] fixed bg-white z-[900] w-[1440px] justify-between`}
+      <div
-      style={{ borderBottom: '1px solid #D8D8D8' }}
+        className={`flex items-center px-[40px] h-[80px] border-b-1 border-solid 
+        border-[#D8D8D8] fixed bg-white z-[100] w-[1440px] justify-between]`}
+        style={{ borderBottom: "1px solid #D8D8D8" }}
       >
         <div className="cursor-pointer">
-        <img
+          <img className="w-[180px] h-[47px]" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/logo.png" alt="logo" onClick={() => setHash("#home")} />
-          className="w-[180px] h-[47px]"
-          src="/common/logo.png"
-          alt="logo"
-          onClick={() => setHash('#home')}
-        />
         </div>
-      <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}
+        <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}>
+          {navList.map((item: NavType) => (
+            <div onClick={() => handleJumpTo(item.href)} key={item.name}>
+              <div
+                className="text-center cursor-pointer"
+                onClick={() => {
+                  setActiveTab(item.name);
+                }}
               >
-        {
-          navList.map((item: NavType) => (
-            <div onClick={() => setHash(item.href)} key={item.name} className="menu-item">
-              <div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
                 <div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
-                {
+                {activeTab === item.name ? (
-                  activeTab === item.name ?
+                  <img src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" />
-                    <img src="/common/tab_checked.png" className="w-[144px] h-[8px]" alt="" /> :
+                ) : (
                   <div className="h-[8px]"></div>
-                }
+                )}
               </div>
             </div>
-          ))
+          ))}
-        }
         </div>
         <div className="w-[129px]">
-          <div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6] 
+          <div
+            className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6] 
         border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer"
-            onClick={() => setShow(!show)}>
+            onClick={() => setShow(!show)}
-            <img
+          >
-              src="/common/earth.png"
+            <img src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/earth.png" className="w-[16.5px] h-[16.5px]" alt="logo" />
-              className="w-[16.5px] h-[16.5px]"
-              alt="logo"
-            />
             <div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{dict?.lang}</div>
             <img
-              className={`transition-transform duration-300 transform rotate-0 ${show && 'rotate-180'} w-[10px] h-[5px]`}
+              className={`transition-transform duration-300 transform rotate-0 ${show && "rotate-180"} w-[10px] h-[5px]`}
-              src="/common/arrow.png"
+              src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/arrow.png"
               alt="logo"
             />
           </div>
           {
-
+            <div className={`absolute ${!show && "hidden"} right-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>
-            <div className={`absolute ${!show && 'hidden'} left-0 right-0 top-0 bottom-0 left-0 top-0 z-[10000]`} onClick={() => setShow(false)}>
+              <Link href={lang[0] === "zh" ? "/en" : "/"}>
-              <Link href={lang[0] === 'zh' ? '/en' : '/'}>
+                <div
-                <div className={`absolute right-[40px] top-[68px] w-[129px] h-[28px] leading-[28px]
+                  className={`absolute right-[40px] top-[68px] w-[129px] h-[28px] leading-[28px]
-                  bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}>
+                  bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}
+                >
                   <div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
                 </div>
               </Link>
             </div>
-
           }
         </div>
       </div>
-    <div className={`${!show && 'hidden'} fixed bg-[#000000] opacity-[0] left-0 top-0 bottom-0 right-0 z-[899]`} onClick={() => setShow(false)}></div>
-    {/* <div className="h-[80px] container"></div> */}
     </>
-  )
+  );
 }

src/app/components/more.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+export default function More(props: { dict: Record<string, string>; lang: string[] }) {
+  const { dict } = props;
+  return (
+    <>
+      <Link href="#contact">
+        <div
+          className="flex flex-col justify-center items-center 
+        text-[30px] text-[#3d3d3d] cursor-pointer rounded-[60px] w-[280px] h-[280px]"
+          style={{ background: "radial-gradient(61% 61% at 50% 50%, #FFFFFF 46%, #E1E1E1 100%)" }}
+        >
+          <div>{dict.seeMore}</div>
+          <div>{dict.contactUs1}</div>
+        </div>
+      </Link>
+    </>
+  );
+}

src/app/globals.css

@@ -2,143 +2,170 @@
 @tailwind components;
 @tailwind utilities;
 
-    ::-webkit-scrollbar {
+html::-webkit-scrollbar {
-        display: none;
+	width: 8px;
-      }
+}
 
-      .main {
+html::-webkit-scrollbar-thumb {
-        -ms-overflow-style: none;
+	background-color: rgba(169, 169, 169, 0.729);
-        scrollbar-width: none;
+	border-radius: 10px;
-      }
+}
-  html {
+
+html::-webkit-scrollbar-track {
+	background: #fff;
+}
+
+html {
 	font-size: 14.4px;
-  }
+}
-  .menu-item {
+.menu-item {
 	display: block;
-  }
+}
-  @media (min-width: 300px) and (max-width: 350px) {
+@media (min-width: 300px) and (max-width: 350px) {
 	html {
 		font-size: 3px;
 	}
-  }
+}
-  @media (min-width: 350px) and (max-width: 400px) {
+@media (min-width: 350px) and (max-width: 400px) {
 	html {
 		font-size: 3.5px;
 	}
-  }
+}
-  @media (min-width: 400px) and (max-width: 450px) {
+@media (min-width: 400px) and (max-width: 450px) {
 	html {
 		font-size: 4px;
 	}
-  }
+}
-  @media (min-width: 450px) and (max-width: 500px) {
+@media (min-width: 450px) and (max-width: 500px) {
 	html {
 		font-size: 4.5px;
 	}
-  }
+}
-  @media (min-width: 500px) and (max-width: 550px) {
+@media (min-width: 500px) and (max-width: 550px) {
 	html {
 		font-size: 5px;
 	}
-  }
+}
-  @media (min-width: 550px) and (max-width: 600px) {
+@media (min-width: 550px) and (max-width: 600px) {
 	html {
 		font-size: 5.5px;
 	}
-  }
+}
-  @media (min-width: 600px) and (max-width: 650px) {
+@media (min-width: 600px) and (max-width: 650px) {
 	html {
 		font-size: 6px;
 	}
-  }
+}
-  @media (min-width: 650px) and (max-width: 700px) {
+@media (min-width: 650px) and (max-width: 700px) {
 	html {
 		font-size: 6.5px;
 	}
-  }
+}
-  @media (min-width: 700px) and (max-width: 750px) {
+@media (min-width: 700px) and (max-width: 750px) {
 	html {
 		font-size: 7px;
 	}
-  }
+}
-  @media (min-width: 750px) and (max-width: 800px) {
+@media (min-width: 750px) and (max-width: 800px) {
 	html {
 		font-size: 7.6px;
 	}
-  }
+}
-  @media (min-width: 800px) and (max-width: 850px) {
+@media (min-width: 800px) and (max-width: 850px) {
 	html {
 		font-size: 8px;
 	}
-  }
+}
-  @media (min-width: 850px) and (max-width: 900px) {
+@media (min-width: 850px) and (max-width: 900px) {
 	html {
 		font-size: 8.5px;
 	}
-  }
+}
-  @media (min-width: 900px) and (max-width: 950px) {
+@media (min-width: 900px) and (max-width: 950px) {
 	html {
 		font-size: 9px;
 	}
-  }
+}
-  @media (min-width: 1000px) and (max-width: 1050px) {
+@media (min-width: 1000px) and (max-width: 1050px) {
 	html {
 		font-size: 10px;
 	}
-  }
+}
-  @media (min-width: 1050px) and (max-width: 1100px) {
+@media (min-width: 1050px) and (max-width: 1100px) {
 	html {
 		font-size: 10.5px;
 	}
-  }
+}
-  @media (min-width: 1100px) and (max-width: 1150px) {
+@media (min-width: 1100px) and (max-width: 1150px) {
 	html {
 		font-size: 11px;
 	}
-  }
+}
-  @media (min-width: 1150px) and (max-width: 1200px) {
+@media (min-width: 1150px) and (max-width: 1200px) {
 	html {
 		font-size: 11.5px;
 	}
-  }
+}
-  @media (min-width: 1200px) and (max-width: 1250px) {
+@media (min-width: 1200px) and (max-width: 1250px) {
 	html {
 		font-size: 12px;
 	}
-  }
+}
-  @media (min-width: 1250px) and (max-width: 1300px) {
+@media (min-width: 1250px) and (max-width: 1300px) {
 	html {
 		font-size: 12.5px;
 	}
-  }
+}
-  @media (min-width: 1300px) and (max-width: 1350px) {
+@media (min-width: 1300px) and (max-width: 1350px) {
 	html {
 		font-size: 13px;
 	}
-  }
+}
-  @media (min-width: 1350px) and (max-width: 1400px) {
+@media (min-width: 1350px) and (max-width: 1400px) {
 	html {
 		font-size: 13.5px;
 	}
-  }
+}
-  @media (min-width: 1400px) and (max-width: 1450px) {
+@media (min-width: 1400px) and (max-width: 1450px) {
 	html {
 		font-size: 14px;
 	}
-  }
+}
-  @media (min-width: 1440px) {
+@media (min-width: 1440px) {
 	html {
 		font-size: 14.4px;
 	}
-  }
+}
-  @media (max-width: 1440px) {
+@media (max-width: 1440px) {
 	.menu-item {
 		display: none;
 	}
-  }
+}
-  @media (min-width: 1440px) {
+@media (min-width: 1440px) {
 	.menu-item {
 		display: block;
 	}
-  }
+}
 
+.wrap {
+	overflow: hidden;
+}
+.wrap .list {
+	position: relative;
+	top: 0px;
+	left: 0px;
+	height: 100%;
+	display: flex;
+}
+
+.wrap .list:hover {
+	animation-play-state: paused !important;
+}
+
+@media (max-width: 768px) {
+	.wrap .list > div {
+		width: 150px !important;
+		display: flex;
+		justify-content: center;
+	}
+}

src/app/layout.tsx

@@ -2,20 +2,70 @@ import type { Metadata } from "next";
 import "./globals.css";
 import { ReactElement, ReactNode } from "react";
 
-
 export const metadata: Metadata = {
-  title: "北京索游科技",
+  title: "试玩广告定制服务 | 北京索游科技",
-  description: "Generated by create next app",
+  keywords: "试玩广告、互动广告、游戏推广、playable",
+  description: "我们专注于试玩广告领域，以创新和专业提供高品质定制服务，打造独特方案，提升游戏曝光，吸引玩家。",
+  creator: "Playable Ads 定制服务团队",
 };
 
-function RootLayout({ children }:{ children: ReactNode } ): ReactElement {
+function RootLayout({ children }: { children: ReactNode }): ReactElement {
   return (
     <html lang="en">
-      <body
+      <head>
-      >
+        <meta name="baidu-site-verification" content="codeva-ET8AOZwhkG" />
+        <meta name="sogou_site_verification" content="5WfNfjHc6j" />
+        <meta name="360-site-verification" content="c2f6de2ca12d108936ee7a52fcbf72dc" />
+        <meta name="bytedance-verification-code" content="uSu4KfluDS94lnP5ePYw" />
+        <meta name="shenma-site-verification" content="0061e0d75bde85c15d49d5d8bc05ffee_1730083409" />
+      </head>
+      <body>
         {children}
+        {/* 头条自动提交 */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+                (function(){
+                  var el = document.createElement("script");
+                  el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?654a750e379cda94a5b533d2242efbff0f6a099f15f24cc656d5ce882f5359fe65e0a2ada1d5e86b11e7de7c1a83287d04743a02fd1ee8dd8558a8cad50e91cb354f8c6f3f78e5fd97613c481f678e6d";
+                  el.id = "ttzz";
+                  var s = document.getElementsByTagName("script")[0];
+                  s.parentNode.insertBefore(el, s);
+                })(window)
+              `,
+          }}
+        />
+        {/* google Analytics */}
+        <script async src="https://www.googletagmanager.com/gtag/js?id=G-3VNFGQNP7Z"></script>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', 'G-3VNFGQNP7Z');
+            `,
+          }}
+        />
+        {/* google tag */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+              j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+              })(window,document,'script','dataLayer','GTM-M6PF7XLN');
+            `,
+          }}
+        />
+        {/* Google Tag Manager (noscript) */}
+        <noscript>
+          <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M6PF7XLN" height="0" width="0" style={{ display: "none", visibility: "hidden" }}></iframe>
+        </noscript>
+        {/* End Google Tag Manager (noscript) */}
       </body>
     </html>
   );
 }
-export default RootLayout
+export default RootLayout;

src/app/price/page.tsx

@@ -0,0 +1,235 @@
+"use client";
+import { useState, useEffect } from "react";
+import "./price.css";
+
+const Page = () => {
+  const [tip, setTip] = useState("");
+
+  const [prices, setPrices] = useState<{ desc: ""; url: "" }[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch(`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/price.json`);
+      const dataSource = await res.json();
+      setPrices(dataSource);
+    };
+
+    fetchData();
+  }, []);
+
+  const [previewInfo, setPreviewInfo] = useState({
+    url: "",
+    preview: false,
+  });
+
+  return (
+    <>
+      <div className="max-w-[1400px] mx-auto mt-4 priceBox">
+        <img
+          className="w-[180px]"
+          src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/common/logo.png"
+          alt="logo"
+          onClick={() => {
+            window.location.href = window.location.origin;
+          }}
+        />
+
+        <div className=" absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
+          <h2 className="text-gradient">参考价格</h2>
+          <div className="formmenu">
+            <div className="formmenus">
+              <ul>
+                <li className="header">分类/价格</li>
+                <li className="header">初级素材</li>
+                <li className="header">中级素材</li>
+                <li className="header">高级素材</li>
+              </ul>
+              <div className="bbbbbb">
+                <dl className="Rowheaders">
+                  <dd className="Rowheader down">交互视频型</dd>
+                  <dd className="Rowheader down">2D类型</dd>
+                  <dd className="Rowheader">3D类型</dd>
+                </dl>
+                <div className=" pricechoose">
+                  <dl>
+                    <dd className="price-item down">
+                      3000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供视频原素材");
+                          setPreviewInfo({
+                            url: prices[0].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                    <dd className="price-item down">
+                      5000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供所有美术资源");
+                          setPreviewInfo({
+                            url: prices[1].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                    <dd className="price-item">
+                      10000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供所有美术资源");
+                          setPreviewInfo({
+                            url: prices[2].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                  </dl>
+
+                  <dl>
+                    <dd className="price-item down">
+                      3000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供视频原素材");
+                          setPreviewInfo({
+                            url: prices[3].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+
+                    <dd className="price-item down">
+                      10000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
+                          setPreviewInfo({
+                            url: prices[4].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+
+                    <dd className="price-item">
+                      15000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
+                          setPreviewInfo({
+                            url: prices[5].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                  </dl>
+
+                  <dl>
+                    <dd className="price-item down">
+                      3000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("用户需要提供视频原素材");
+                          setPreviewInfo({
+                            url: prices[6].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                    <dd className="price-item down">
+                      20000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
+                          setPreviewInfo({
+                            url: prices[7].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                    <dd className="price-item">
+                      20000{" "}
+                      <img
+                        src="/home/send.png"
+                        className="Sendicon"
+                        alt=""
+                        onClick={() => {
+                          setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
+                          setPreviewInfo({
+                            url: prices[8].url,
+                            preview: true,
+                          });
+                        }}
+                      />
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+            <p className="annotation">标价为人民币</p>
+          </div>
+        </div>
+      </div>
+      {previewInfo.preview && (
+        <div
+          className="fixed left-0 right-0 top-0 bottom-0 bg-black/60 z-[2000]"
+          onClick={() => {
+            document.body.style.overflow = "auto";
+            setPreviewInfo({
+              preview: false,
+              url: "",
+            });
+          }}
+        >
+          <div
+            className="flex flex-col justify-center w-[370px] h-[680px] items-center fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] mx-auto border rounded-lg p-4 bg-white"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <div className="text-left w-full mb-2 text-xl flex space-x-2">
+              <img className="w-8 h-8" src="https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/home/tip.png" alt="" />
+              {tip}
+            </div>
+            <iframe src={previewInfo.url} className="flex-1 w-full overflow-hidden" scrolling="no" />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Page;

src/app/price/price.css

@@ -0,0 +1,149 @@
+.priceBox {
+  width: 100%;
+  min-width: 500px;
+  max-width: 1440px;
+  margin: 0 auto;
+  background: hwb(0 100% 0%);
+  margin-top: 50px;
+}
+.priceBox .pricelogo {
+  margin: 26px 0px 40px 42px;
+}
+.priceBox .pricelogo img {
+  width: 238px;
+  height: 74px;
+}
+.priceBox h2 {
+  font-weight: 700;
+  font-size: 36px;
+  line-height: 37px;
+  text-align: center;
+  margin: 0 auto;
+  margin-bottom: 40px;
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-image: linear-gradient(to right, #ecf5ff, #0838b1);
+  -webkit-text-fill-color: transparent;
+}
+.priceBox .formmenu {
+  width: 900px;
+  border-radius: 30px;
+  background: #f1f6ff;
+  margin: 0 auto;
+  padding-top: 48px;
+  padding-bottom: 13px;
+  /* 标价为人民币 */
+}
+.priceBox .formmenu .formmenus {
+  width: 100%;
+}
+.priceBox .formmenu .formmenus ul {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 24px;
+}
+.priceBox .formmenu .formmenus ul .header {
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 34px;
+  color: #526ba8;
+}
+.priceBox .formmenu .formmenus .bbbbbb {
+  display: flex;
+}
+.priceBox .formmenu .formmenus .bbbbbb .Rowheaders {
+  width: 25%;
+  padding-top: 22px;
+}
+.priceBox .formmenu .formmenus .bbbbbb .Rowheaders .Rowheader {
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 34px;
+  letter-spacing: 0em;
+  color: #3d3d3d;
+  text-align: center;
+  box-sizing: border-box;
+}
+.priceBox .formmenu .formmenus .bbbbbb .Rowheaders .down {
+  margin-bottom: 40px;
+}
+.priceBox .formmenu .formmenus .bbbbbb .pricechoose {
+  width: 72%;
+  display: flex;
+  background: #fff;
+  border-radius: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
+  padding-top: 22px;
+}
+.priceBox .formmenu .formmenus .bbbbbb .pricechoose dl {
+  width: 33.3%;
+  box-sizing: border-box;
+}
+.priceBox .formmenu .formmenus .bbbbbb .pricechoose dl dd:last-child {
+  margin: 28px;
+}
+.priceBox .formmenu .formmenus .bbbbbb .pricechoose .price-item {
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 34px;
+  letter-spacing: 0em;
+  color: #3d3d3d;
+  background: #fff;
+  padding-left: 20%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.priceBox .formmenu .formmenus .bbbbbb .pricechoose .price-item .Sendicon {
+  color: #839cd8;
+  vertical-align: revert;
+  box-sizing: border-box;
+  padding-top: 1px;
+  width: 20px;
+  height: 20px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.priceBox .formmenu .formmenus .bbbbbb .pricechoose .price-item .Sendicon:hover {
+  color: #2169ff;
+}
+.priceBox .formmenu .formmenus .bbbbbb .pricechoose .down {
+  margin-bottom: 40px;
+}
+.priceBox .formmenu .annotation {
+  text-align: right;
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 34px;
+  letter-spacing: 0em;
+  color: #999999;
+  width: 97%;
+}
+.priceBox .gameDialog {
+  border-radius: 20px;
+}
+.priceBox .gameDialog .gameDialogImgp {
+  display: flex;
+  margin-bottom: 8px;
+}
+.priceBox .gameDialog img {
+  width: 18.33px;
+  height: 18.33px;
+  vertical-align: middle;
+}
+.priceBox .gameDialog p {
+  font-size: 18px;
+  font-weight: normal;
+  line-height: 23px;
+  letter-spacing: 0em;
+  color: #3d3d3d;
+  vertical-align: middle;
+}
+.priceBox .iframesone {
+  height: 658px;
+}
+.priceBox .el-dialog__header {
+  padding: 0;
+}

src/app/price/price.less

@@ -0,0 +1,176 @@
+.priceBox {
+  width: 100%;
+  margin: 0 auto;
+  min-width: 500px;
+  max-width: 1440px;
+  margin: 0 auto;
+  background: hwb(0 100% 0%);
+  margin-top: 50px;
+
+  .pricelogo {
+    margin: 26px 0px 40px 42px;
+
+    img {
+      width: 238px;
+      height: 74px;
+    }
+  }
+
+  h2 {
+    font-weight: 700;
+    font-size: 36px;
+    line-height: 37px;
+    text-align: center;
+    margin: 0 auto;
+    margin-bottom: 40px;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-image: linear-gradient(to right, #ecf5ff, #0838b1);
+    -webkit-text-fill-color: transparent;
+  }
+
+  .formmenu {
+    width: 900px;
+    border-radius: 30px;
+    background: #f1f6ff;
+    margin: 0 auto;
+    padding-top: 48px;
+    padding-bottom: 13px;
+
+    .formmenus {
+      width: 100%;
+
+      ul {
+        display: flex;
+        justify-content: space-around;
+        margin-bottom: 24px;
+
+        .header {
+          font-size: 20px;
+          font-weight: bold;
+          line-height: 34px;
+          color: #526ba8;
+        }
+      }
+
+      .bbbbbb {
+        display: flex;
+
+        .Rowheaders {
+          width: 25%;
+
+          padding-top: 22px;
+
+          .Rowheader {
+            font-size: 20px;
+            font-weight: bold;
+            line-height: 34px;
+            letter-spacing: 0em;
+            color: #3d3d3d;
+            text-align: center;
+            box-sizing: border-box;
+          }
+
+          .down {
+            margin-bottom: 40px;
+          }
+        }
+
+        .pricechoose {
+          width: 72%;
+          display: flex;
+          background: #fff;
+          border-radius: 16px;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-align: center;
+          padding-top: 22px;
+
+          dl {
+            width: 33.3%;
+            box-sizing: border-box;
+            dd:last-child {
+              margin: 28px;
+            }
+          }
+
+          .price-item {
+            font-size: 24px;
+            font-weight: normal;
+            line-height: 34px;
+            letter-spacing: 0em;
+            color: #3d3d3d;
+            background: #fff;
+            padding-left: 20%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .Sendicon {
+              color: #839cd8;
+              vertical-align: revert;
+              box-sizing: border-box;
+              padding-top: 1px;
+              width: 20px;
+              height: 20px;
+              margin-left: 10px;
+              cursor: pointer;
+            }
+
+            .Sendicon:hover {
+              color: #2169ff;
+            }
+          }
+
+          .down {
+            margin-bottom: 40px;
+          }
+        }
+      }
+    }
+
+    /* 标价为人民币 */
+    .annotation {
+      text-align: right;
+      font-size: 18px;
+      font-weight: normal;
+      line-height: 34px;
+      letter-spacing: 0em;
+      color: #999999;
+      width: 97%;
+    }
+  }
+
+  .gameDialog {
+    border-radius: 20px;
+
+    // height: 698px;
+    .gameDialogImgp {
+      display: flex;
+      margin-bottom: 8px;
+    }
+
+    img {
+      width: 18.33px;
+      height: 18.33px;
+      vertical-align: middle;
+    }
+
+    p {
+      font-size: 18px;
+      font-weight: normal;
+      line-height: 23px;
+      letter-spacing: 0em;
+      color: #3d3d3d;
+      vertical-align: middle;
+    }
+  }
+
+  .iframesone {
+    height: 658px;
+  }
+
+  .el-dialog__header {
+    padding: 0;
+  }
+}

src/dictionaries/en.json

@@ -28,6 +28,6 @@
     "privacyPolicy": "Privacy Policy",
     "userAgreement": "User Agreement",
     "productPricing": "Product Pricing",
-    "clickToPlay": "Click to play"
+    "clickToPlay": "Click to play",
-
+    "channel": "Channel Support"
 }

src/dictionaries/index.ts

@@ -1,6 +1,8 @@
 const dictionaries = {
   en: () => import('./en.json').then((module) => module.default),
   zh: () => import('./zh.json').then((module) => module.default),
-  } as Record<string, () => Promise<Record<string, string>>>;
+} as Record<string, () => Promise<Record<string, string>>>;
 
-  export const getDictionary = async (locale: string) => dictionaries[locale]();
+export const getDictionary = async (locale: string) => {
+  return dictionaries[locale]()
+};

src/dictionaries/zh.json

@@ -28,5 +28,6 @@
     "privacyPolicy": "隐私条款",
     "userAgreement": "用户协议",
     "productPricing": "产品定价",
-    "clickToPlay": "点击试玩"
+    "clickToPlay": "点击试玩",
+    "channel": "渠道支持"
 }

start.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# 确保脚本以root权限运行
+if [ "$(id -u)" != "0" ]; then
+   echo "该脚本必须以root权限运行" 1>&2
+   exit 1
+fi
+
+pm2 startup
+pm2 save
+pm2 start --name addseed-web npm -- run start
+pm2 set your-app-name autorestart true
+pm2 save
+
+echo "PM2启动脚本执行完毕。"

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,16 +15,27 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+    "baseUrl": "./",
     "incremental": true,
+    "noImplicitAny": false,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }