help-centre

语言适配
Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create
2026-05-20 11:43:05 +08:00 · 2026-05-20 11:10:03 +08:00 · 2026-05-20 10:57:49 +08:00 · 2026-05-20 10:57:47 +08:00 · 2026-05-20 10:55:55 +08:00 · 2026-05-20 10:55:54 +08:00
89 changed files with 7470 additions and 783 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
 *.vite-ssg-temp
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,10 @@
 {
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 4,
  "singleQuote": true,
  "printWidth": 100,
  "useTabs": true,
  "trailingComma": "none",
  "vueIndentScriptAndStyle": true
 }
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-ssg</title>
 	<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_5ucv7qhbwg9.css" />
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "Codecreate",
+  "name": "code-create",
  "private": true,
  "version": "0.0.0",
  "type": "module",
@@ -9,11 +9,16 @@
    "preview": "vite preview"
  },
  "dependencies": {
    "@kagol/vue-carousel": "^0.1.2",
    "@unhead/vue": "^2.1.15",
    "gsap": "^3.15.0",
    "less": "^4.6.4",
    "pinia": "^3.0.4",
    "pinia-persistedstate-plugin": "^0.1.0",
    "unhead": "2.1.15",
    "vite-ssg": "^28.3.0",
    "vue": "^3.5.34",
    "vue-i18n": "^11.4.4",
    "vue-router": "^4.6.4"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
  .:
    dependencies:
      '@kagol/vue-carousel':
        specifier: ^0.1.2
        version: 0.1.2(typescript@6.0.3)
      '@unhead/vue':
        specifier: ^2.1.15
        version: 2.1.15(vue@3.5.34(typescript@6.0.3))
@@ -17,12 +20,24 @@ importers:
      less:
        specifier: ^4.6.4
        version: 4.6.4
      pinia:
        specifier: ^3.0.4
        version: 3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3))
      pinia-persistedstate-plugin:
        specifier: ^0.1.0
        version: 0.1.0(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3))
      unhead:
        specifier: 2.1.15
        version: 2.1.15
      vite-ssg:
        specifier: ^28.3.0
        version: 28.3.0(unhead@2.1.15)(vite@8.0.12(@types/node@24.12.4)(less@4.6.4)(terser@5.47.1))(vue-router@4.6.4(vue@3.5.34(typescript@6.0.3)))(vue@3.5.34(typescript@6.0.3))
      vue:
        specifier: ^3.5.34
        version: 3.5.34(typescript@6.0.3)
      vue-i18n:
        specifier: ^11.4.4
        version: 11.4.4(vue@3.5.34(typescript@6.0.3))
      vue-router:
        specifier: ^4.6.4
        version: 4.6.4(vue@3.5.34(typescript@6.0.3))
@@ -143,6 +158,22 @@ packages:
      '@noble/hashes':
        optional: true
  '@intlify/core-base@11.4.4':
    resolution: {integrity: sha512-w/vItlylrAmhebkIbVl5YY8XMCtj8Mb2g70ttxktMYuf5AuRahgEHL2iLgLIsZBIbTSgs4hkUo7ucCL0uTJvOg==}
    engines: {node: '>= 22'}
  '@intlify/devtools-types@11.4.4':
    resolution: {integrity: sha512-PcBLmGmDQsTSVV911P8upzpcLJO1CNVYi/IH6bGnLR2nA+0L963+kXN1ZrisTEnbtw2ewN6HMMSldqzjronA0Q==}
    engines: {node: '>= 22'}
  '@intlify/message-compiler@11.4.4':
    resolution: {integrity: sha512-vn0OAV9pYkJlPPmgnsSm5eAG3mL0+9C/oaded2JY9jmxBbhmUXT3TcAUY8WRgLY9Hte7lkUJKpXrVlYjMXBD2w==}
    engines: {node: '>= 22'}
  '@intlify/shared@11.4.4':
    resolution: {integrity: sha512-QRUCHqda1U6aR14FR0vvXD4+4gj6+fm0AhAozvSuRCw0fCvrmCugWpgiR4xH2NI6s8am6N9p5OhirplsX8ZS3g==}
    engines: {node: '>= 22'}
  '@jridgewell/gen-mapping@0.3.13':
    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -159,6 +190,9 @@ packages:
  '@jridgewell/trace-mapping@0.3.31':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
  '@kagol/vue-carousel@0.1.2':
    resolution: {integrity: sha512-znX+G+QxksjXve0XoTuPT4Sgbqa9XeMDTMlrlY312BDMdbbLWZOUifr0b16ExxHvBOzrBKVPo5e1Zs5JNRoqww==}
  '@napi-rs/wasm-runtime@1.1.4':
    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
    peerDependencies:
@@ -269,9 +303,23 @@ packages:
  '@rolldown/pluginutils@1.0.0-rc.13':
    resolution: {integrity: sha512-3ngTAv6F/Py35BsYbeeLeecvhMKdsKm4AoOETVhAA+Qc8nrA2I0kF7oa93mE9qnIurngOSpMnQ0x2nQY2FPviA==}
  '@rollup/rollup-darwin-x64@4.14.1':
    resolution: {integrity: sha512-2pYRzEjVqq2TB/UNv47BV/8vQiXkFGVmPFwJb+1E0IFFZbIX8/jo1olxqqMbo6xCXf8kabANhp5bzCij2tFLUA==}
    cpu: [x64]
    os: [darwin]
  '@rollup/rollup-linux-x64-gnu@4.14.1':
    resolution: {integrity: sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==}
    cpu: [x64]
    os: [linux]
    libc: [glibc]
  '@tybys/wasm-util@0.10.2':
    resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
  '@types/js-cookie@3.0.6':
    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
  '@types/node@24.12.4':
    resolution: {integrity: sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==}
@@ -316,6 +364,15 @@ packages:
  '@vue/devtools-api@6.6.4':
    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
  '@vue/devtools-api@7.7.9':
    resolution: {integrity: sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==}
  '@vue/devtools-kit@7.7.9':
    resolution: {integrity: sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==}
  '@vue/devtools-shared@7.7.9':
    resolution: {integrity: sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==}
  '@vue/language-core@3.2.8':
    resolution: {integrity: sha512-9OiSPQFiAAWNVnXb0d2dcTmcKnFQamhuNES6ayyISrb/mwPWVgoGdAqSfCWqKhQpa3D5gDTcYD+w7ObiheZ81g==}
@@ -366,6 +423,9 @@ packages:
  bidi-js@1.0.3:
    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
  birpc@2.9.0:
    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
  buffer-from@1.1.2:
    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
@@ -391,6 +451,10 @@ packages:
    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
    engines: {node: '>=12.13'}
  copy-anything@4.0.5:
    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
    engines: {node: '>=18'}
  css-tree@3.2.1:
    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -464,6 +528,9 @@ packages:
  gsap@3.15.0:
    resolution: {integrity: sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A==}
  hookable@5.5.3:
    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
  hookable@6.1.1:
    resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==}
@@ -503,6 +570,10 @@ packages:
    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
    engines: {node: '>=12.13'}
  is-what@5.5.0:
    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
    engines: {node: '>=18'}
  jsdom@28.1.0:
    resolution: {integrity: sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==}
    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -613,6 +684,9 @@ packages:
    engines: {node: '>=4'}
    hasBin: true
  mitt@3.0.1:
    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
  ms@2.1.3:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
@@ -648,6 +722,9 @@ packages:
  path-browserify@1.0.1:
    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
  perfect-debounce@1.0.0:
    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
@@ -659,6 +736,27 @@ packages:
    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
    engines: {node: '>=6'}
  pinia-persistedstate-plugin@0.1.0:
    resolution: {integrity: sha512-ToKR/EJzhhXElQ5YL8PVVY4CqLJjywxszAJjOCgprjmIVkTrPBsEOY4b/ATOzHQc1TtuaJs/3MJuoCpA3pv8Ew==}
  pinia@2.3.1:
    resolution: {integrity: sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==}
    peerDependencies:
      typescript: '>=4.4.4'
      vue: ^2.7.0 || ^3.5.11
    peerDependenciesMeta:
      typescript:
        optional: true
  pinia@3.0.4:
    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
    peerDependencies:
      typescript: '>=4.5.0'
      vue: ^3.5.11
    peerDependenciesMeta:
      typescript:
        optional: true
  postcss@8.5.14:
    resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
    engines: {node: ^10 || ^12 || >=14}
@@ -678,6 +776,9 @@ packages:
    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
    engines: {node: '>=0.10.0'}
  rfdc@1.4.1:
    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
  rolldown@1.0.0:
    resolution: {integrity: sha512-yD986aXDESFGS95spT1LAv0jssywP4npMEjmMHyN2/5+eE8qQJUype2AaKkRiLgBgyD0LFlubwAht7VmY8rGoA==}
    engines: {node: ^20.19.0 || >=22.12.0}
@@ -709,6 +810,14 @@ packages:
    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
    engines: {node: '>=0.10.0'}
  speakingurl@14.0.1:
    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
    engines: {node: '>=0.10.0'}
  superjson@2.2.6:
    resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
    engines: {node: '>=16'}
  symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
@@ -821,6 +930,23 @@ packages:
  vscode-uri@3.1.0:
    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
  vue-demi@0.14.10:
    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
    engines: {node: '>=12'}
    hasBin: true
    peerDependencies:
      '@vue/composition-api': ^1.0.0-rc.1
      vue: ^3.0.0-0 || ^2.6.0
    peerDependenciesMeta:
      '@vue/composition-api':
        optional: true
  vue-i18n@11.4.4:
    resolution: {integrity: sha512-gIbXVSFQV4jcSJxfwdZ5zSZmZ+12CnX0K3vBkRSd6Zn+HSzCp+QwUgPwpD/uN0oKNKI9RzlUXPKVedEuMgNG0A==}
    engines: {node: '>= 22'}
    peerDependencies:
      vue: ^3.0.0
  vue-router@4.6.4:
    resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
    peerDependencies:
@@ -840,6 +966,9 @@ packages:
      typescript:
        optional: true
  vueuse-components@0.0.1:
    resolution: {integrity: sha512-VaodJj28CTwBEuUdAYkx2qmgUI18AnVrzu7gjwCfVSfnuUoQZDF33px9WNdbmEKpoUGXbhVDM1j/kv3xVcAlKQ==}
  w3c-xmlserializer@5.0.0:
    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
    engines: {node: '>=18'}
@@ -946,6 +1075,24 @@ snapshots:
  '@exodus/bytes@1.15.0': {}
  '@intlify/core-base@11.4.4':
    dependencies:
      '@intlify/devtools-types': 11.4.4
      '@intlify/message-compiler': 11.4.4
      '@intlify/shared': 11.4.4
  '@intlify/devtools-types@11.4.4':
    dependencies:
      '@intlify/core-base': 11.4.4
      '@intlify/shared': 11.4.4
  '@intlify/message-compiler@11.4.4':
    dependencies:
      '@intlify/shared': 11.4.4
      source-map-js: 1.2.1
  '@intlify/shared@11.4.4': {}
  '@jridgewell/gen-mapping@0.3.13':
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -965,6 +1112,16 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5
  '@kagol/vue-carousel@0.1.2(typescript@6.0.3)':
    dependencies:
      vue: 3.5.34(typescript@6.0.3)
      vueuse-components: 0.0.1(typescript@6.0.3)
    optionalDependencies:
      '@rollup/rollup-darwin-x64': 4.14.1
      '@rollup/rollup-linux-x64-gnu': 4.14.1
    transitivePeerDependencies:
      - typescript
  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
    dependencies:
      '@emnapi/core': 1.10.0
@@ -1027,11 +1184,19 @@ snapshots:
  '@rolldown/pluginutils@1.0.0-rc.13': {}
  '@rollup/rollup-darwin-x64@4.14.1':
    optional: true
  '@rollup/rollup-linux-x64-gnu@4.14.1':
    optional: true
  '@tybys/wasm-util@0.10.2':
    dependencies:
      tslib: 2.8.1
    optional: true
  '@types/js-cookie@3.0.6': {}
  '@types/node@24.12.4':
    dependencies:
      undici-types: 7.16.0
@@ -1096,6 +1261,24 @@ snapshots:
  '@vue/devtools-api@6.6.4': {}
  '@vue/devtools-api@7.7.9':
    dependencies:
      '@vue/devtools-kit': 7.7.9
  '@vue/devtools-kit@7.7.9':
    dependencies:
      '@vue/devtools-shared': 7.7.9
      birpc: 2.9.0
      hookable: 5.5.3
      mitt: 3.0.1
      perfect-debounce: 1.0.0
      speakingurl: 14.0.1
      superjson: 2.2.6
  '@vue/devtools-shared@7.7.9':
    dependencies:
      rfdc: 1.4.1
  '@vue/language-core@3.2.8':
    dependencies:
      '@volar/language-core': 2.4.28
@@ -1147,6 +1330,8 @@ snapshots:
    dependencies:
      require-from-string: 2.0.2
  birpc@2.9.0: {}
  buffer-from@1.1.2: {}
  cac@6.7.14: {}
@@ -1168,6 +1353,10 @@ snapshots:
    dependencies:
      is-what: 4.1.16
  copy-anything@4.0.5:
    dependencies:
      is-what: 5.5.0
  css-tree@3.2.1:
    dependencies:
      mdn-data: 2.27.1
@@ -1227,6 +1416,8 @@ snapshots:
  gsap@3.15.0: {}
  hookable@5.5.3: {}
  hookable@6.1.1: {}
  html-encoding-sniffer@6.0.0:
@@ -1275,6 +1466,8 @@ snapshots:
  is-what@4.1.16: {}
  is-what@5.5.0: {}
  jsdom@28.1.0:
    dependencies:
      '@acemir/cssom': 0.9.31
@@ -1385,6 +1578,8 @@ snapshots:
  mime@1.6.0:
    optional: true
  mitt@3.0.1: {}
  ms@2.1.3: {}
  muggle-string@0.4.1: {}
@@ -1420,6 +1615,8 @@ snapshots:
  path-browserify@1.0.1: {}
  perfect-debounce@1.0.0: {}
  picocolors@1.1.1: {}
  picomatch@4.0.4: {}
@@ -1427,6 +1624,32 @@ snapshots:
  pify@4.0.1:
    optional: true
  pinia-persistedstate-plugin@0.1.0(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)):
    dependencies:
      '@types/js-cookie': 3.0.6
      pinia: 2.3.1(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3))
    transitivePeerDependencies:
      - '@vue/composition-api'
      - typescript
      - vue
  pinia@2.3.1(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)):
    dependencies:
      '@vue/devtools-api': 6.6.4
      vue: 3.5.34(typescript@6.0.3)
      vue-demi: 0.14.10(vue@3.5.34(typescript@6.0.3))
    optionalDependencies:
      typescript: 6.0.3
    transitivePeerDependencies:
      - '@vue/composition-api'
  pinia@3.0.4(typescript@6.0.3)(vue@3.5.34(typescript@6.0.3)):
    dependencies:
      '@vue/devtools-api': 7.7.9
      vue: 3.5.34(typescript@6.0.3)
    optionalDependencies:
      typescript: 6.0.3
  postcss@8.5.14:
    dependencies:
      nanoid: 3.3.12
@@ -1442,6 +1665,8 @@ snapshots:
  require-from-string@2.0.2: {}
  rfdc@1.4.1: {}
  rolldown@1.0.0:
    dependencies:
      '@oxc-project/types': 0.129.0
@@ -1485,6 +1710,12 @@ snapshots:
  source-map@0.6.1: {}
  speakingurl@14.0.1: {}
  superjson@2.2.6:
    dependencies:
      copy-anything: 4.0.5
  symbol-tree@3.2.4: {}
  terser@5.47.1:
@@ -1561,6 +1792,18 @@ snapshots:
  vscode-uri@3.1.0: {}
  vue-demi@0.14.10(vue@3.5.34(typescript@6.0.3)):
    dependencies:
      vue: 3.5.34(typescript@6.0.3)
  vue-i18n@11.4.4(vue@3.5.34(typescript@6.0.3)):
    dependencies:
      '@intlify/core-base': 11.4.4
      '@intlify/devtools-types': 11.4.4
      '@intlify/shared': 11.4.4
      '@vue/devtools-api': 6.6.4
      vue: 3.5.34(typescript@6.0.3)
  vue-router@4.6.4(vue@3.5.34(typescript@6.0.3)):
    dependencies:
      '@vue/devtools-api': 6.6.4
@@ -1582,6 +1825,12 @@ snapshots:
    optionalDependencies:
      typescript: 6.0.3
  vueuse-components@0.0.1(typescript@6.0.3):
    dependencies:
      vue: 3.5.34(typescript@6.0.3)
    transitivePeerDependencies:
      - typescript
  w3c-xmlserializer@5.0.0:
    dependencies:
      xml-name-validator: 5.0.0
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,13 +3,22 @@
 	<RouterView />
 	<MainFooter />
 	<BackTop />
 	<VideoModel />
 	<div v-show="loading" class="main-loading">
 		<span class="iconfont icon-loading"></span>
 	</div>
 </template>
 <script setup lang="ts">
-	import { RouterView } from "vue-router";
+	import { ref, computed } from 'vue'
-	import MainHeader from "./components/main-header.vue";
+	import { RouterView } from 'vue-router'
-	import MainFooter from "./components/main-footer.vue";
+	import MainHeader from './components/main-header.vue'
-	import BackTop from "./components/back-top.vue";
+	import MainFooter from './components/main-footer.vue'
 	import BackTop from './components/back-top.vue'
 	import VideoModel from './components/video-model.vue'
 	import { useGlobalStore } from './stores/global'
 	const globalStore = useGlobalStore()
 	const loading = computed(() => globalStore.state.loading)
 </script>
 <style scoped lang="less">
 	// .main {
@@ -22,4 +31,26 @@
 	// 		height: auto;
 	// 	}
 	// }
 	.main-loading {
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
 		background-color: rgba(0, 0, 0, 0.5);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		z-index: 9999999999;
 		> .iconfont {
 			font-size: 80px;
 			color: #fff;
 			animation: loading 2s linear infinite;
 		}
 	}
 </style>
 <style lang="less">
 	html:root {
 		--main-header-height: 85px;
 	}
 </style>
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -6,21 +6,25 @@ li,
 h1,
 h2,
 h3,
 h4,
 p {
  margin: 0;
  padding: 0;
 }
 * {
  box-sizing: border-box;
  font-family: Poppins;
 }
-html,
+h1,
-body,
+h2,
-#app {
+h3,
-  width: 100%;
+h4,
-  height: 100%;
+h5,
-  overflow: hidden;
+h6,
-  font-family: 'KaiseiOpti-Medium';
+.products-title {
-  color: #232323;
+  font-family: Poppins, sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
 }
@keyframes loading {
  0% {
@@ -117,35 +121,68 @@ body,
  background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
 }
 button[custom],
-button[custom="white"] {
+button[custom="red"] {
-  min-width: 19.4rem;
+  width: 100%;
-  height: 5rem;
+  height: 38px;
-  padding: 0 1rem;
+  border-radius: 4px;
-  border-radius: 0;
+  border: none;
-  font-family: KaiseiOpti-Bold;
+  background-color: #9a2125;
-  font-size: var(--button-font-size, 2rem);
+  color: #fff;
-  color: var(--button-color, #232323);
+  transition: all 0.3s ease-in-out;
-  background: var(--button-bgcolor, #fff);
+  box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
-  border: var(--button-border, none);
+  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 button[custom]:hover,
 button[custom="red"]:hover {
  background-color: var(--hover-backcolor, #99494c);
 }
 button[custom] > .iconfont,
 button[custom="red"] > .iconfont {
  margin-right: 4px;
  font-size: 16px;
 }
 button[custom] > .label,
 button[custom="red"] > .label {
  font-size: 14px;
 }
 .hover-bottom-animation {
  position: relative;
  cursor: pointer;
 }
-button[custom]:active,
+.hover-bottom-animation.center {
-button[custom="white"]:active {
+  --right: auto;
-  background: var(--button-click-bgcolor, #e4e4e4);
+  --left: 50%;
-  color: var(--button-click-color, #232323);
+  --transform: translateX(-50%);
 }
-button[custom="black"] {
+.hover-bottom-animation::before {
-  --button-bgcolor: #232323;
+  content: '';
-  --button-color: #fff;
+  position: absolute;
-  --button-click-bgcolor: #333;
+  height: 2px;
-  --button-click-color: #fff;
+  width: 0;
-  --button-font-size: 1.6rem;
+  right: var(--right, 0);
  left: var(--left, auto);
  bottom: 0;
  transform: var(--transform);
  transition: width 0.2s ease-in-out;
  -webkit-transition: width 0.2s ease-in-out;
  background-color: var(--background-color, #fff);
 }
-button[custom="black-box"] {
+.hover-bottom-animation:not(.center):hover::before {
-  --button-bgcolor: transparent;
+  width: 100%;
-  --button-color: #232323;
+  --left: 0;
-  --button-border: 0.2rem solid #979797;
+  --right: auto;
-  --button-click-bgcolor: #979797;
+}
-  --button-click-color: #fff;
+.hover-bottom-animation.center:hover::before {
-  --button-font-size: 1.6rem;
+  width: 100%;
  --right: auto;
  --left: 50%;
  --transform: translateX(-50%);
 }
 .hover-bottom-animation.active:before,
 .hover-bottom-animation.router-link-exact-active:before {
  width: 100%;
 }
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -6,6 +6,7 @@ li,
 h1,
 h2,
 h3,
 h4,
 p {
 	margin: 0;
 	padding: 0;
@@ -13,16 +14,20 @@ p {
 * {
 	box-sizing: border-box;
 	font-family: Poppins;
 }
-html,
+h1,
-body,
+h2,
-#app {
+h3,
-	width: 100%;
+h4,
-	height: 100%;
+h5,
-	overflow: hidden;
+h6,
-	font-family: 'KaiseiOpti-Medium';
+.products-title {
-	color: #232323;
+	font-family: Poppins, sans-serif;
 	font-weight: 600;
 	letter-spacing: 2px;
 	// text-transform: capitalize;
 }
@keyframes loading {
@@ -144,37 +149,77 @@ body,
 // 自定义button按钮
 button[custom],
-button[custom="white"] {
+button[custom="red"] {
-	min-width: 19.4rem;
+	width: 100%;
-	height: 5rem;
+	height: 38px;
-	padding: 0 1rem;
+	border-radius: 4px;
-	border-radius: 0;
+	border: none;
-	font-family: KaiseiOpti-Bold;
+	background-color: #9a2125;
-	font-size: var(--button-font-size, 2rem);
+	color: #fff;
-	color: var(--button-color, #232323);
+	transition: all 0.3s ease-in-out;
-	background: var(--button-bgcolor, #fff);
+	box-shadow: 0 2px 5px rgba(7, 129, 105, 0.3);
-	border: var(--button-border, none);
+	cursor: pointer;
 	font-size: 12px;
 	&:hover {
 		background-color: var(--hover-backcolor, #99494c);
 	}
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	>.iconfont {
 		margin-right: 4px;
 		font-size: 16px;
 	}
 	>.label {
 		font-size: 14px;
 	}
 }
 .hover-bottom-animation {
 	position: relative;
 	cursor: pointer;
-	&:active {
+	&.center {
-		background: var(--button-click-bgcolor, #e4e4e4);
+		--right: auto;
-		color: var(--button-click-color, #232323);
+		--left: 50%;
 		--transform: translateX(-50%);
 	}
 	&::before {
 		content: '';
 		position: absolute;
 		height: 2px;
 		width: 0;
 		right: var(--right, 0);
 		left: var(--left, auto);
 		bottom: 0;
 		transform: var(--transform);
 		transition: width 0.2s ease-in-out;
 		-webkit-transition: width 0.2s ease-in-out;
 		background-color: var(--background-color, #fff);
 	}
 	&:not(.center):hover::before {
 		width: 100%;
 		--left: 0;
 		--right: auto;
 	}
 	&.center:hover::before {
 		width: 100%;
 		--right: auto;
 		--left: 50%;
 		--transform: translateX(-50%);
 	}
 	&.active:before,
 	&.router-link-exact-active:before {
 		width: 100%;
 	}
 }
 button[custom="black"] {
 	--button-bgcolor: #232323;
 	--button-color: #fff;
 	--button-click-bgcolor: #333;
 	--button-click-color: #fff;
 	--button-font-size: 1.6rem;
 }
 button[custom="black-box"] {
 	--button-bgcolor: transparent;
 	--button-color: #232323;
 	--button-border: 0.2rem solid #979797;
 	--button-click-bgcolor: #979797;
 	--button-click-color: #fff;
 	--button-font-size: 1.6rem;
 }
--- a/src/assets/fonts/fontFamily.css
+++ b/src/assets/fonts/fontFamily.css
@@ -0,0 +1,5 @@
 /* 字体定义 */
@font-face {
  font-family: 'Poppins';
  src: url('./poppins.woff2') format('woff2');
 }
--- a/src/assets/fonts/poppins.woff2
+++ b/src/assets/fonts/poppins.woff2
--- a/src/assets/images/404.png
+++ b/src/assets/images/404.png
--- a/src/assets/images/aida/diamond.svg
+++ b/src/assets/images/aida/diamond.svg
@@ -0,0 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
  <path fill="#666" d="M464 0H112c-4 0-7.8 2-10 5.4L2 152.6c-2.9 4.4-2.6 10.2.7 14.2l276 340.8c4.8 5.9 13.8 5.9 18.6 0l276-340.8c3.3-4.1 3.6-9.8.7-14.2L474.1 5.4C471.8 2 468.1 0 464 0zm-19.3 48l63.3 96h-68.4l-51.7-96h56.8zm-202.1 0h90.7l51.7 96H191l51.6-96zm-111.3 0h56.8l-51.7 96H68l63.3-96zm-43 144h51.4L208 352 88.3 192zm102.9 0h193.6L288 435.3 191.2 192zM368 352l68.2-160h51.4L368 352z"/>
 </svg>
--- a/src/assets/images/aida/industry-1.png
+++ b/src/assets/images/aida/industry-1.png
--- a/src/assets/images/aida/industry-2.png
+++ b/src/assets/images/aida/industry-2.png
--- a/src/assets/images/aida/industry-3.png
+++ b/src/assets/images/aida/industry-3.png
--- a/src/assets/images/aida/time.svg
+++ b/src/assets/images/aida/time.svg
@@ -0,0 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
  <g transform="translate(1024 0) scale(-1 1)">
    <path
      fill="#666"
      d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64zM512 895.712c-211.584 0-383.712-172.16-383.712-383.712C128.288 300.416 300.416 128.288 512 128.288c211.552 0 383.712 172.128 383.712 383.712C895.712 723.552 723.552 895.712 512 895.712zM671.968 512 512 512 512 288.064c0-17.76-14.24-32.128-32-32.128s-32 14.4-32 32.128L448 544c0 17.76 14.272 32 32 32l191.968 0c17.76 0 32.128-14.24 32.128-32S689.728 512 671.968 512z"
    />
  </g>
 </svg>
--- a/src/assets/images/contact-us/bg.jpg
+++ b/src/assets/images/contact-us/bg.jpg
--- a/src/assets/images/media/bg.jpg
+++ b/src/assets/images/media/bg.jpg
--- a/src/components/back-top.vue
+++ b/src/components/back-top.vue
@@ -7,24 +7,25 @@
 					transition: 'stroke-dashoffset 10ms linear',
 					strokeDasharray: `${progress}, ${max}`,
 					stroke: '#222',
-					strokeWidth: 4,
+					strokeWidth: 4
 				}"
 				fill="none"
 			></path>
 		</svg>
 		<span class="iconfont icon-direction-up"></span>
 	</div>
 </template>
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted } from "vue";
+	import { ref } from "vue";
 	const max = ref(98 * Math.PI);
 	const progress = ref(0);
 	const handleScroll = (e: number) => {
-		progress.value = (e / 100) * max.value;
+		progress.value = (e / 100) * max.value
-	};
+	}
 	const handleClick = () => {
-		document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
+		document.documentElement.scrollTo({ top: 0, behavior: 'smooth' })
-	};
+	}
 </script>
 <style scoped lang="less">
 	.back-top {
@@ -51,6 +52,20 @@
 				transition: stroke-dashoffset 10ms linear;
 			}
 		}
 		&:hover > .iconfont {
 			animation: animArrow 1s infinite;
 		}
 		@keyframes animArrow {
 			0% {
 				transform: rotate(0deg);
 			}
 			50% {
 				transform: translateY(-3px);
 			}
 			100% {
 				transform: rotate(0deg);
 			}
 		}
 		animation: back-top-hidden 0.2s linear both;
 		&.active {
--- a/src/components/down-menu.vue
+++ b/src/components/down-menu.vue
@@ -0,0 +1,100 @@
 <template>
 	<div class="down-menu">
 		<div class="title hover-bottom-animation" to="#">
 			{{ title }}
 			<span class="iconfont icon-arrow-down-bold"></span>
 		</div>
 		<div class="child">
 			<slot></slot>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { ref, onMounted, onUnmounted } from 'vue'
 	const props = defineProps({
 		title: {
 			type: String,
 			default: ''
 		}
 	})
 </script>
 <style scoped lang="less">
 	.down-menu {
 		position: relative;
 		> .title {
 			margin: 0 14px;
 			color: #fff;
 			font-size: 14px;
 			text-decoration: none;
 			line-height: 37px;
 			display: inline-block;
 			position: relative;
 			cursor: pointer;
 			&::before {
 				content: '';
 				position: absolute;
 				height: 2px;
 				width: 0;
 				right: 0;
 				left: auto;
 				bottom: 0;
 				transition: width 0.2s ease-in-out;
 				-webkit-transition: width 0.2s ease-in-out;
 				background-color: #fff;
 			}
 			&:hover::before {
 				width: 100%;
 				left: 0;
 				right: auto;
 			}
 			&.router-link-exact-active:not(.parent):before {
 				width: 100%;
 			}
 			> .iconfont {
 				opacity: 0.5;
 				font-size: 10px;
 				margin-left: 5px;
 			}
 		}
 		> .child {
 			position: absolute;
 			bottom: 0;
 			visibility: hidden;
 			width: 250px;
 			height: auto;
 			padding: 10px 0;
 			box-sizing: border-box;
 			border: 1px solid #e1e1e1;
 			background-color: #fff;
 			display: flex;
 			flex-direction: column;
 			transform: translateY(calc(100% + 5px));
 			> * {
 				display: inline-block;
 				padding: 10px 15px;
 				color: #000;
 				font-size: 15px;
 				text-decoration: none;
 				text-align: left;
 				&:hover {
 					opacity: 0.5;
 				}
 			}
 		}
 		&:hover > .child {
 			animation: child-show 0.2s linear both;
 		}
 		@keyframes child-show {
 			0% {
 				visibility: hidden;
 				// opacity: 0;
 			}
 			100% {
 				// opacity: 1;
 				transform: translateY(100%);
 				visibility: visible;
 			}
 		}
 	}
 </style>
--- a/src/components/main-footer.vue
+++ b/src/components/main-footer.vue
@@ -1,25 +1,83 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<header class="header">
+	<footer class="main-footer">
-	
+		<div class="left">
-	</header>
+			<span>{{
 				$t('MainFooter.Copyright', {
 					year: new Date().getFullYear(),
 					name: 'Code-Create'
 				})
 			}}</span>
 		</div>
 		<div class="right">
 			<div v-for="item in nav" :key="item.path">
 				<router-link class="link" :to="item.path">{{ $t(item.name) }}</router-link>
 			</div>
 		</div>
 	</footer>
 </template>
 <script setup lang="ts">
 	import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
 	const nav = ref([
 		{
 			name: 'MainFooter.PrivacyPolicy',
 			path: '/privacy-policy'
 		},
 		{
 			name: 'MainFooter.TermsOfUse',
 			path: '/terms-of-use'
 		},
 		{
 			name: 'MainFooter.Disclaimer',
 			path: '/disclaimer'
 		},
 		{
 			name: 'MainFooter.SiteMap',
 			path: '/site-map'
 		}
 	])
 </script>
 <style lang="less" scoped>
-	.header{
+	.main-footer {
-		position: relative;
+		width: 100%;
 		max-width: 1200px;
 		margin: 0 auto;
 		padding: 15px 0;
 		min-height: 140px;
 		display: flex;
 		justify-content: space-between;
 		font-family: Poppins, sans-serif;
 		> .left {
 			font-size: 13px;
 			font-weight: normal;
 			line-height: 24px;
 			color: #000000b3;
 		}
 		> .right {
 			display: flex;
 			align-items: flex-start;
 			> div {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				padding-left: 20px;
 				border-left: 1px solid #0a0a0a;
 				margin-left: 20px;
 				&:first-child {
 					border-left: none;
 					padding-left: 0;
 					margin-left: 0;
 				}
 				> .link {
 					font-weight: 400;
 					font-size: 12px;
 					transition: all 0.2s ease-out;
 					box-sizing: border-box;
 					box-shadow: none;
 					text-decoration: none;
 					display: inline-block;
 					color: #0a0a0a;
 				}
 			}
 		}
 	}
 </style>
--- a/src/components/main-header.vue
+++ b/src/components/main-header.vue
@@ -1,55 +1,126 @@
 <template>
 	<header class="main-header" v-scroll-progress>
-		<img class="logo" src="../assets/logo-full.png" alt="code-create" />
+		<a href="/" class="logo"><img src="../assets/logo-full.png" alt="code-create" /></a>
 		<div class="center-nav">
-			<div class="nav-item" v-for="item in navList" :key="item.path">
+			<div class="nav-item" v-for="item in navList" :key="item.name">
-				<router-link class="nav-item-link" :to="item.path">
+				<down-menu :title="$t(item.name)" v-if="item.children">
-					{{ item.name }}
+					<router-link :to="child.path" v-for="(child) in item.children" :key="child.name">
-				</router-link>
+						{{ $t(child.name) }}
 					</router-link>
 				</down-menu>
 				<router-link class="link hover-bottom-animation" :to="item.path" v-else>{{
 					$t(item.name)
 				}}</router-link>
 			</div>
 		</div>
 		<div class="right">
-			<span>English</span>
+			<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
-			<span>My Account</span>
+				<router-link
 					class="link"
 					:to="`/${item.value}${path}`"
 					v-for="item in langList"
 					:key="item.value"
 					v-show="item.value !== locale"
 				>
 					{{ item.label }}
 				</router-link>
 			</down-menu>
 			<router-link class="link" to="/my-account">
 				<span class="iconfont icon-tubiao-"></span>
 				<span v-if="token">{{ $t('MainHeader.MyAccount') }}</span>
 				<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
 			</router-link>
 		</div>
 	</header>
 </template>
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted } from "vue";
+	import { ref, watch, computed } from 'vue'
-	import { useRouter } from "vue-router";
+	import DownMenu from './down-menu.vue'
-	const router = useRouter();
+	import { setLang, LangType } from '../lang'
-	const navList = ref([
+	import { useI18n } from 'vue-i18n'
 	const { locale } = useI18n()
 	import { useRoute } from 'vue-router'
 	import { useUserInfoStore } from '@/stores/userInfo'
 	const userInfoStore = useUserInfoStore()
 	const token = computed(() => userInfoStore.state.token)
 	const route = useRoute()
 	const lang = computed(() => route.params.lang)
 	const path = computed(() => route.path.replace(new RegExp(`^/${lang.value}/`), '/'))
 	if (lang.value) setLang(lang.value)
 	watch(lang, (newVal) => {
 		if (lang.value) setLang(newVal)
 	})
 	const langList = ref([
 		{
-			name: "Home",
+			label: 'English',
-			path: "/",
+			value: LangType.en
 		},
 		{
-			name: "About Us",
+			label: '简体中文',
-			path: "/about",
+			value: LangType.zhCn
 		},
 		{
-			name: "Our Solutions",
+			label: '繁體中文',
-			path: "/solutions",
+			value: LangType.zhTw
 		}
 	])
 	const navList:any = ref([
 		{
 			name: 'MainHeader.Home',
 			path: '/'
 		},
 		{
-			name: "Communities",
+			name: 'MainHeader.AboutUs',
-			path: "/communities",
+			path: '/about-us'
 		},
 		{
-			name: "Media",
+			name: 'MainHeader.OurSolutions',
-			path: "/media",
+			path: '',
 			children: [
 				{
 					name: 'MainHeader.AiDA',
 					path: '/aida'
 				},
 				{
 					name: 'MainHeader.Mixi',
 					path: '/mixi'
 				}
 			]
 		},
 		{
-			name: "Contact Us",
+			name: 'MainHeader.Communities',
-			path: "/contact",
+			path: '',
 			children: [
 				{
 					name: 'MainHeader.Events',
 					path: '/events'
 				},
 				{
 					name: 'MainHeader.UserStories',
 					path: '/user-stories'
 				},
 				{
 					name: 'MainHeader.HelpCentre',
 					path: '/help-centre'
 				}
 			]
 		},
-	]);
+		{
 			name: 'MainHeader.Media',
 			path: '/media'
 		},
 		{
 			name: 'MainHeader.ContactUs',
 			path: '/contact-us'
 		}
 	])
 </script>
 <style lang="less" scoped>
 	.main-header {
 		position: fixed;
 		width: 100%;
-		height: 85px;
+		height: var(--main-header-height, 85px);
 		padding: 15px 30px;
 		box-sizing: border-box;
 		top: 0;
@@ -65,16 +136,87 @@
 		> .logo {
 			height: 100%;
 			width: auto;
 			img {
 				width: auto;
 				height: 100%;
 			}
 		}
 		> .center-nav {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			> .nav-item {
-				> .nav-item-link {
+				position: relative;
 				&:deep(> .down-menu > .title),
 				> .link {
 					margin: 0 14px;
 					color: #fff;
-					font-size: 16px;
+					font-size: 14px;
 					text-decoration: none;
 					line-height: 37px;
 					display: inline-block;
 				}
 				> .child {
 					position: absolute;
 					bottom: 0;
 					visibility: hidden;
 					width: 250px;
 					height: auto;
 					padding: 10px 0;
 					box-sizing: border-box;
 					border: 1px solid #e1e1e1;
 					background-color: #fff;
 					display: flex;
 					flex-direction: column;
 					transform: translateY(calc(100% + 5px));
 					> .child-link {
 						display: inline-block;
 						padding: 10px 15px;
 						color: #000;
 						font-size: 15px;
 						text-decoration: none;
 						text-align: left;
 						&:hover {
 							opacity: 0.5;
 						}
 					}
 				}
 				&:hover > .child {
 					animation: child-show 0.2s linear both;
 				}
 				@keyframes child-show {
 					0% {
 						visibility: hidden;
 						// opacity: 0;
 					}
 					100% {
 						// opacity: 1;
 						transform: translateY(100%);
 						visibility: visible;
 					}
 				}
 			}
 		}
 		> .right {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			> .link {
 				margin: 0 14px;
 				color: #fff;
 				font-size: 14px;
 				text-decoration: none;
 				line-height: 37px;
 				display: inline-block;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				&:hover {
 					opacity: 0.8;
 				}
 				> .iconfont {
 					margin-right: 5px;
 					font-size: 22px;
 				}
 			}
 		}
--- a/src/components/video-model.vue
+++ b/src/components/video-model.vue
@@ -0,0 +1,74 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import MyEvent from "@/directives/myEvents";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 const isVideoShow = ref(false)
 const url = ref('')
 const poster = ref('')
 const playVideo = (data)=>{
 	url.value = data.url || ''
 	poster.value = data.poster || ''
 	isVideoShow.value = true
 }
 const closeVideoModel = ()=>{
 	url.value = ''
 	poster.value = ''
 	isVideoShow.value = false
 }
 onMounted(()=>{
 	MyEvent.add("playVideo",playVideo);
 })
 onUnmounted(()=>{
 })
 defineExpose({})
 </script>
 <template>
 	<div class="vide-model" v-if="isVideoShow">
 		<div class="mask"></div>
 		<video :src="url" autoplay controls preload="metadata" controlslist="nodownload" :poster="poster"></video>
 		<div class="close-btn">
 			<span class="iconfont icon-close" @click="closeVideoModel"></span>
 		</div>
 	</div>
 </template>
 <style lang="less" scoped>
 	.vide-model{
 		z-index: 99999;
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100vw;
 		height: 100vh;
 		> .mask{
 			width: 100%;
 			height: 100%;
 			position: absolute;
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%,-50%);
 			background-color: rgba(0,0,0,.8);
 		}
 		> video{
 			position: absolute;
 			top: 50%;
 			left: 50%;
 			max-height: 80vh;
 			max-width: 80vw;
 			transform: translate(-50%,-50%);
 		}
 		> .close-btn{
 			position: absolute;
 			top: 20px;
 			right: 20px;
 			font-size: 30px;
 			color: #fff;
 			cursor: pointer;
 			span{
 				font-size: 30px;
 			}
 		}
 	}
 </style>
--- a/src/directives/custom-animation.js
+++ b/src/directives/custom-animation.js
@@ -0,0 +1,244 @@
 /**
 * 自定义动画指令
 * v-custom-animation.scroll.once.parent="{GetRoot, activeClass}"
 *  修饰符
 *   scroll: 是否监听滚动事件
 *   once: 是否只执行一次
 *   parent: 是否监听父元素滚动事件-优先级（GetRoot > parent > document）
 *	参数
 *   GetRoot: 获取根元素函数-优先级（GetRoot > parent > document）
 *   activeClass: 激活类名-默认值（active）
 *   duration: 动画时间-默认值（0.5s）
 *   delay: 延迟时间-默认值（0s）
 *   easing: 缓动函数-默认值（ease-out）
 *   transformDuration: 变换时间-默认值 duration
 *   transformDelay: 变换延迟时间-默认值 delay
 *   transformEasing: 变换缓动函数-默认值 easing
 *   opacityDuration: 透明度时间-默认值 duration
 *   opacityDelay: 透明度延迟时间-默认值 delay
 *   opacityEasing: 透明度缓动函数-默认值 easing
 * 
 * 子元素动画
 * <div translate-x-s="-100" translate-x="100"></div>
 *  添加动画属性
 *   translate-x-s: 水平方向移动开始位置
 *   translate-x: 水平方向移动结束位置
 * 	 ......(属性支持查看 T 对象)
 * 
 */
 const roots = new Map()
 const els = new Map()
 const T = {
 	translateX_s: 'translate-x-s',
 	translateX: 'translate-x',
 	translateY_s: 'translate-y-s',
 	translateY: 'translate-y',
 	scale_s: 'scale-s',
 	scale: 'scale',
 	scaleX_s: 'scale-x-s',
 	scaleX: 'scale-x',
 	scaleY_s: 'scale-y-s',
 	scaleY: 'scale-y',
 	rotate_s: 'rotate-s',
 	rotate: 'rotate',
 	rotateX_s: 'rotate-x-s',
 	rotateX: 'rotate-x',
 	rotateY_s: 'rotate-y-s',
 	rotateY: 'rotate-y',
 	rotateZ_s: 'rotate-z-s',
 	rotateZ: 'rotate-z',
 	opacity_s: 'opacity-s',
 	opacity: 'opacity',
 	// 动画属性配置
 	duration: 'duration',
 	delay: 'delay',
 	easing: 'easing',
 	transformDuration: 'transform-duration',
 	transformDelay: 'transform-delay',
 	transformEasing: 'transform-easing',
 	opacityDuration: 'opacity-duration',
 	opacityDelay: 'opacity-delay',
 	opacityEasing: 'opacity-easing',
 }
 const types = Object.values(T)
 const typesStr = types.map(v => `[${v}]`).join(',')
 const resize = new ResizeObserver((e) => {
 	e.forEach(({ target }) => {
 		requestAnimationFrame(() => handleScroll({ target }))
 	})
 })
 export default {
 	name: 'custom-animation',
 	mounted(el, binding) {
 		const { value, modifiers } = binding
 		const {
 			GetRoot,// 获取根元素函数
 			activeClass = 'active',// 激活类名
 			duration = '0.5s',// 动画时间
 			delay = '0s',// 延迟时间
 			easing = 'ease-out',// 缓动函数
 		} = value || {}
 		const transition = {
 			duration,
 			delay,
 			easing,
 			transformDuration: value?.transformDuration || value?.[T.transformDuration],
 			transformDelay: value?.transformDelay || value?.[T.transformDelay],
 			transformEasing: value?.transformEasing || value?.[T.transformEasing],
 			opacityDuration: value?.opacityDuration || value?.[T.opacityDuration],
 			opacityDelay: value?.opacityDelay || value?.[T.opacityDelay],
 			opacityEasing: value?.opacityEasing || value?.[T.opacityEasing],
 		}
 		const {
 			scroll = false,// 是否监听滚动事件
 			once = false,// 是否只执行一次
 			parent = false,// 是否监听父元素滚动事件
 		} = modifiers
 		const root = GetRoot ? GetRoot() : parent ? el.parentElement : document;
 		if (el === root) return;
 		const config = {
 			root,// 根元素
 			scroll,
 			once,
 			activeClass,
 			isActive: false,
 			transition,
 		}
 		els.set(el, config)
 		add(el, root, config)
 	},
 	beforeUnmount(el, binding) {
 		remove(el)
 		els.delete(el)
 	}
 };
 function add(el, root = document, config) {
 	if (config.scroll) {
 		requestAnimationFrame(() => handleScroll({ target: root }))
 	} else {
 		getChildren(el).forEach((child) => setDocumentStyles(el, child, 0))
 	}
 	resize.observe(el)
 	if (roots.has(root)) {
 		let obj = roots.get(root)
 		obj.els.push(el)
 		obj.observer.observe(el)
 		return
 	}
 	resize.observe(isDocumentRoot(root))
 	root.addEventListener('scroll', handleScroll)
 	const observer = new IntersectionObserver((entries) => {
 		entries.forEach((entry) => {
 			const { target } = entry
 			const obj = els.get(target)
 			if (!obj) return
 			if (obj.once && obj.isActive) return;// 只执行一次，且已可见，不执行
 			obj.isActive = entry.isIntersecting;
 			target.classList.toggle(obj.activeClass, obj.isActive)
 			getChildren(target).forEach((el) => {
 				setDocumentStyles(target, el, obj.isActive ? 1 : 0)
 			})
 		})
 	}, { root })
 	observer.observe(el)
 	roots.set(root, { els: [el], observer, resize })
 }
 function remove(el, root = document) {
 	if (!roots.has(root)) return
 	const obj = roots.get(root)
 	if (obj.els.includes(el)) {
 		obj.observer.unobserve(el)
 		obj.resize.unobserve(el)
 		obj.els.splice(obj.els.indexOf(el), 1)
 	}
 	if (obj.els.length === 0) {
 		obj.observer.disconnect()
 		resize.unobserve(isDocumentRoot(root))
 		root.removeEventListener('scroll', handleScroll)
 		roots.delete(root)
 	}
 }
 var timer = null
 async function handleScroll({ target: root }) {
 	clearTimeout(timer)
 	timer = await new Promise(resolve => setTimeout(resolve, 10))
 	const obj = roots.get(root)
 	if (!obj) return
 	obj.els.forEach((el) => {
 		const item = els.get(el)
 		if (!item) return
 		if (!item.scroll) return
 		const children = getChildren(el)
 		if (children.length === 0) return
 		const rootEl = isDocumentRoot(root)
 		const offsetHeight = root === document ? window.innerHeight : rootEl.offsetHeight
 		const offsetTop = rootEl.offsetTop
 		const scrollTop = rootEl.scrollTop
 		const elTop_bottom = offsetHeight - (el.offsetTop - offsetTop - rootEl.scrollTop)
 		const maxHeight = offsetHeight + el.offsetHeight
 		const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight))
 		children.forEach((item) => {
 			setDocumentStyles(el, item, p)
 		})
 	})
 }
 function getChildren(el, oneself = true) {
 	const children = Array.from(el.querySelectorAll(typesStr))
 	if (oneself && Object.values(T).some(v => hasAttr(el, v))) children.push(el)
 	return children
 }
 function setDocumentStyles(parent, el, p = 0) {
 	const item = els.get(parent)
 	if (!item) return
 	const t = getAttrs(el, item.transition)
 	const tDuration = t.duration || t.transformDuration
 	const tDelay = t.delay || t.transformDelay
 	const tEasing = t.easing || t.transformEasing
 	const oDuration = t.duration || t.opacityDuration
 	const oDelay = t.delay || t.opacityDelay
 	const oEasing = t.easing || t.opacityEasing
 	const transitionArr = [
 		`transform ${tDuration} ${tDelay} ${tEasing}`,
 		`opacity ${oDuration} ${oDelay} ${oEasing}`,
 	]
 	el.style.transition = transitionArr.join(', ')
 	const tX = getCurrentValue(el, T.translateX_s, T.translateX, p)
 	const tY = getCurrentValue(el, T.translateY_s, T.translateY, p)
 	const sx = getCurrentValue(el, T.scaleX_s, T.scaleX, p, T.scale_s, T.scale, 1)
 	const sy = getCurrentValue(el, T.scaleY_s, T.scaleY, p, T.scale_s, T.scale, 1)
 	const r = getCurrentValue(el, T.rotate_s, T.rotate, p)
 	const rx = getCurrentValue(el, T.rotateX_s, T.rotateX, p)
 	const ry = getCurrentValue(el, T.rotateY_s, T.rotateY, p)
 	const rz = getCurrentValue(el, T.rotateZ_s, T.rotateZ, p)
 	const transform = `translate(${tX}px, ${tY}px) scale(${sx}, ${sy}) rotate(${r}deg) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`
 	el.style.transform = transform
 	if (hasAttr(el, [T.opacity_s, T.opacity])) {
 		el.style.opacity = getCurrentValue(el, T.opacity_s, T.opacity, p, T.opacity_s, T.opacity, 1)
 	}
 }
 function getAttrs(el, attrs = {}) {
 	const arrs = Object.keys(attrs)
 	const obj = {}
 	arrs.forEach((item) => {
 		obj[item] = el.getAttribute(T[item]) || attrs[item]
 	})
 	return obj
 }
 function getCurrentValue(el, start, end, progress, bStart, bEnd, defaultValue = 0) {
 	const startNum = hasAttr(el, start) ? Number(el.getAttribute(start)) : hasAttr(el, bStart) ? Number(el.getAttribute(bStart)) : defaultValue
 	const endNum = hasAttr(el, end) ? Number(el.getAttribute(end)) : hasAttr(el, bEnd) ? Number(el.getAttribute(bEnd)) : defaultValue
 	return startNum + (endNum - startNum) * progress
 }
 function hasAttr(el, attr) {
 	if (Array.isArray(attr)) {
 		return attr.some(v => el.hasAttribute(v))
 	} else {
 		return el.hasAttribute(attr)
 	}
 }
 // 检查document是否为根元素
 function isDocumentRoot(root) {
 	return root === document ? document.documentElement : root
 }
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -2,7 +2,9 @@ import type { App } from 'vue'
 export default {
 	install(app: App) {
-		const directivesList = import.meta.glob('./*.ts', { eager: true }) as any;
+		const directivesList1 = import.meta.glob('./*.ts', { eager: true }) as any;
 		const directivesList2 = import.meta.glob('./*.js', { eager: true }) as any;
 		const directivesList = { ...directivesList1, ...directivesList2 };
 		Object.keys(directivesList).forEach(key => {
 			app.directive(directivesList[key].default.name, directivesList[key].default);
 		});
--- a/src/directives/myEvents.ts
+++ b/src/directives/myEvents.ts
@@ -0,0 +1,39 @@
 class MyEvent {
 	private events: Map<string, Array<(data: any) => void>>;
 	constructor() {
 		// 使用 Object 或 Map 存储，实现 O(1) 级别的查找
 		this.events = new Map()
 	}
 	add(name: string, call: (data: any) => void) {
 		if (!this.events.has(name)) {
 			this.events.set(name, [])
 		}
 		this.events.get(name)!.push(call)
 	}
 	remove(name: string, call?: (data: any) => void) {
 		if (!this.events.has(name)) return
 		if (!call) {
 			this.events.delete(name)
 		} else {
 			const callbacks = this.events.get(name)
 			const index = callbacks.indexOf(call)
 			if (index !== -1) {
 				callbacks.splice(index, 1)
 			}
 			// 如果该事件没有监听者了，彻底清理 key
 			if (callbacks.length === 0) {
 				this.events.delete(name)
 			}
 		}
 	}
 	emit(name: string, data?: any) {
 		const callbacks = this.events.get(name)
 		if (callbacks) {
 			// 使用 slice() 镜像一份副本，防止在执行回调过程中有 remove 操作导致索引错乱
 			callbacks.slice().forEach((cb) => cb(data))
 		}
 	}
 }
 export default new MyEvent()
--- a/src/directives/scroll-progress.ts
+++ b/src/directives/scroll-progress.ts
@@ -33,7 +33,7 @@ export default {
 		rootMap.set(obj.root, [obj])
 		obj.root.addEventListener('scroll', handleScroll)
 	},
-	beforeUnmount(el: HTMLElement, binding: any) {
+	beforeUnmount(el: HTMLElement) {
 		rootMap.forEach((objs, root) => {
 			if (objs.some((v: any) => v.el === el)) {
 				objs = objs.filter((v_: any) => v_.el !== el)
--- a/src/directives/tween-animation.ts
+++ b/src/directives/tween-animation.ts
@@ -1,13 +1,14 @@
 import { gsap, } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 export default {
-	name: 'tween-animation',
+	name: 'tween',
 	mounted(el: HTMLElement, binding: any) {
 		const params = binding.value
 		// if(!binding.value.isGsap)return
 		let dom = document.querySelector('body')
 		gsap.registerPlugin(ScrollTrigger);
 		let tl1 = gsap.timeline();
-		tl1.from(el,1, {y:'30px',opacity:0},)
+		tl1.from(el,1, params,)
 		ScrollTrigger.create({
 			trigger: el, // 触发器元素
 			start: "top 90%", // 滚动触发器的起始滚动位置
@@ -15,7 +16,8 @@ export default {
 			markers: false, // 开启标注功能
 			animation:tl1,
 			scroller:dom,//设置指定元素为滚动依据
-			scrub:2,
+			scrub:false,
 			// toggleActions: "play reset play reset",
 			// onUpdate:(v)=>{
 			// 	if(v.progress < 0.1){
 			// 		v.trigger?.classList.remove('active')
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -0,0 +1,33 @@
 export default {
 	MainHeader: {
 		Home: 'Home',
 		AboutUs: 'About Us',
 		OurSolutions: 'Our Solutions',
 		AiDA: 'AiDA 3.1',
 		Mixi: 'Mixi',
 		Communities: 'Communities',
 		Events: 'Events',
 		UserStories: 'User Stories',
 		HelpCentre: 'Help Centre',
 		Media: 'Media',
 		ContactUs: 'Contact Us',
 		MyAccount: 'My Account',
 		LoginOrSignin: 'Log in / Sign in',
 	},
 	MainFooter: {
 		Others: 'Others',
 		Copyright: '©{year} {name} Limited',
 		PrivacyPolicy: 'Privacy Policy',
 		TermsOfUse: 'Terms of Use',
 		Disclaimer: 'Disclaimer',
 		SiteMap: 'Site Map',
 	},
 	PageNotFound: 'Page not found',
 	PageNotFoundTitle: "That Page Can't Be Found",
 	PageNotFoundDesc: "It looks like nothing was found at this location.",
 	Contact: 'Contact',
 	GetInTouch: 'Get In Touch',
 	StayUpToDate: "Stay up to date with our e-newsletter",
 	EmailAddress: 'Email Address',
 	Submit: 'Submit',
 }
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -0,0 +1,40 @@
 import { createI18n } from 'vue-i18n'
 import enLocale from './en'
 import zhCnLocale from './zh-cn'
 import zhTwLocale from './zh-tw'
 export const LangType = {
 	en: "en",		// 英文
 	zhTw: "zh-tw",	// 繁体中文
 	zhCn: "zh-cn",	// 简体中文
 }
 export const LANGS = Object.values(LangType)
 // 语言配置整合
 const messages = {
 	[LangType.en]: enLocale,
 	[LangType.zhCn]: zhCnLocale,
 	[LangType.zhTw]: zhTwLocale,
 }
 const localeLang = localStorage.getItem('language')
 const defaultLocale = checkLocale(localeLang) ? localeLang! : LangType.en
 // 创建 i18n
 const i18n = createI18n({
 	legacy: false,
 	globalInjection: true,  // 全局模式，可以直接使用 $t
 	locale: defaultLocale,
 	messages: messages
 })
 export default i18n
 // 检查语言是否存在
 function checkLocale(lang: any) {
 	return LANGS.includes(lang)
 }
 export const setLang = (lang: any) => {
 	if (lang === "") lang = LangType.en
 	if (!checkLocale(lang)) return false
 	i18n.global.locale.value = lang
 	localStorage.setItem('language', lang)
 	return true
 }
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -0,0 +1,33 @@
 export default {
 	MainHeader: {
 		Home: '首页',
 		AboutUs: '关于我们',
 		OurSolutions: '我们的产品',
 		AiDA: 'AiDA 3.1',
 		Mixi: 'Mixi',
 		Communities: '社区',
 		Events: '活动',
 		UserStories: '使用者故事',
 		HelpCentre: '支援中心',
 		Media: '媒体报道',
 		ContactUs: '联系我们',
 		MyAccount: '我的账户',
 		LoginOrSignin: '登入 / 注册',
 	},
 	MainFooter: {
 		Others: '其他',
 		Copyright: '©{year} {name} 有限公司',
 		PrivacyPolicy: '隐私政策',
 		TermsOfUse: '使用条款',
 		Disclaimer: '免责声明',
 		SiteMap: '网站地图',
 	},
 	PageNotFound: '页面不存在',
 	PageNotFoundTitle: '该页面不存在',
 	PageNotFoundDesc: '这里似乎没有任何发现。',
 	Contact: '联络方法',
 	GetInTouch: '联系我们',
 	StayUpToDate: '通过我们的电子通讯掌握最新动态',
 	EmailAddress: '电邮地址',
 	Submit: '提交',
 }
--- a/src/lang/zh-tw.ts
+++ b/src/lang/zh-tw.ts
@@ -0,0 +1,33 @@
 export default {
 	MainHeader: {
 		Home: '首頁',
 		AboutUs: '關於我們',
 		OurSolutions: '我們的產品',
 		AiDA: 'AiDA 3.1',
 		Mixi: 'Mixi',
 		Communities: '社區',
 		Events: '活動',
 		UserStories: '使用者故事',
 		HelpCentre: '支援中心',
 		Media: '媒體報導',
 		ContactUs: '聯絡我們',
 		MyAccount: '我的帳號',
 		LoginOrSignin: '登錄 / 登冊',
 	},
 	MainFooter: {
 		Others: '其他',
 		Copyright: '©{year} {name} 有限公司',
 		PrivacyPolicy: '私隱政策',
 		TermsOfUse: '使用條款',
 		Disclaimer: '免責聲明',
 		SiteMap: '網站地圖',
 	},
 	PageNotFound: '頁面不存在',
 	PageNotFoundTitle: '該頁面不存在',
 	PageNotFoundDesc: '這裡似乎沒有任何發現。',
 	Contact: '聯絡方法',
 	GetInTouch: '保持聯繫',
 	StayUpToDate: '通過我們的電子通訊掌握最新動態',
 	EmailAddress: '電郵地址',
 	Submit: '提交',
 }
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,15 +1,20 @@
 import { ViteSSG } from 'vite-ssg'
 import App from './App.vue'
 import { routes } from './routes'
-import './style.css'
+// import './style.css'
 import '@/assets/css/style.less'
 import directives from './directives/index'
 import i18n from './lang/index'
 import store from './stores/index'
 export const createApp = ViteSSG(App, {
-		routes,
+	routes,
-		base: import.meta.env.BASE_URL,
+	base: import.meta.env.BASE_URL,
-	},
+},
-	({ app, router, routes, isClient, initialState }) => {
+	({ app }) => {
 		// 注册全局指令
 		app.use(directives)
 		app.use(store)
 		app.use(i18n)
 	}
 )
--- a/src/pages/ContactView.vue
+++ b/src/pages/ContactView.vue
@@ -1,127 +0,0 @@
 <template>
  <main class="placeholder-page">
    <p class="placeholder-kicker">
      Static route
    </p>
    <h1>Contact</h1>
    <p>
      This placeholder verifies that the contact page is rendered as a static
      route by Vite SSG.
    </p>
    <a href="/">Back home</a>
 	<div>1</div>
 	<div>2</div>
 	<div>3</div>
 	<div>4</div>
 	<div>5</div>
 	<div>6</div>
 	<div>7</div>
 	<div>8</div>
 	<div>9</div>
 	<div>10</div>
 	<div>11</div>
 	<div>12</div>
 	<div>13</div>
 	<div>14</div>
 	<div>15</div>
 	<div>16</div>
 	<div>17</div>
 	<div>18</div>
 	<div>19</div>
 	<div>20</div>
 	<div>21</div>
 	<div>22</div>
 	<div>23</div>
 	<div>24</div>
 	<div>25</div>
 	<div>26</div>
 	<div>27</div>
 	<div>28</div>
 	<div>29</div>
 	<div>30</div>
 	<div>31</div>
 	<div>32</div>
 	<div>33</div>
 	<div>34</div>
 	<div>35</div>
 	<div>36</div>
 	<div>37</div>
 	<div>38</div>
 	<div>39</div>
 	<div>40</div>
 	<div>41</div>
 	<div>42</div>
 	<div>43</div>
 	<div>44</div>
 	<div>45</div>
 	<div>46</div>
 	<div>47</div>
 	<div>48</div>
 	<div>49</div>
 	<div>50</div>
 	<div>51</div>
 	<div>52</div>
 	<div>53</div>
 	<div>54</div>
 	<div>55</div>
 	<div>56</div>
 	<div>57</div>
 	<div>58</div>
 	<div>59</div>
 	<div>60</div>
 	<div>61</div>
 	<div>62</div>
 	<div>63</div>
 	<div>64</div>
 	<div>65</div>
 	<div>66</div>
 	<div>67</div>
 	<div>68</div>
 	<div>69</div>
 	<div>70</div>
 	<div>71</div>
 	<div>72</div>
 	<div>73</div>
 	<div>74</div>
 	<div>75</div>
 	<div>76</div>
 	<div>77</div>
 	<div>78</div>
 	<div>79</div>
 	<div>80</div>
 	<div>81</div>
 	<div>82</div>
 	<div>83</div>
 	<div>84</div>
 	<div>85</div>
 	<div>86</div>
 	<div>87</div>
 	<div>88</div>
 	<div>89</div>
 	<div>90</div>
 	<div>91</div>
 	<div>92</div>
 	<div>93</div>
 	<div>94</div>
 	<div>95</div>
 	<div>96</div>
 	<div>97</div>
 	<div>98</div>
 	<div>99</div>
 	<div>100</div>
  </main>
 </template>
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
 useHead({
  title: 'Contact | test-ssg',
  meta: [
    {
      name: 'description',
      content: 'Contact page placeholder for the Vite SSG test site.',
    },
  ],
 })
 </script>
--- a/src/pages/HomeView.vue
+++ b/src/pages/HomeView.vue
@@ -1,60 +0,0 @@
 <template>
  <section id="center">
    <div class="hero">
      <img :src="heroImg" class="base" width="170" height="179" alt="" />
      <img :src="vueLogo" class="framework" alt="Vue logo" />
      <img :src="viteLogo" class="vite" alt="Vite logo" />
    </div>
    <div>
      <h1>Get started</h1>
      <p>Edit <code>src/pages/HomeView.vue</code> and save to test <code>HMR</code></p>
    </div>
    <button type="button" class="counter" @click="count++">
      Count is {{ count }}
    </button>
    <nav class="site-pages" aria-label="Site pages">
      <RouterLink
        v-for="page in pageLinks"
        :key="page.to"
        class="site-page-link"
        :to="page.to"
      >
        {{ page.label }}
      </RouterLink>
    </nav>
  </section>
  <div class="ticks"></div>
  <div class="ticks"></div>
  <section id="spacer"></section>
 </template>
 <script setup lang="ts">
 import { useHead } from '@unhead/vue'
 import { shallowRef } from 'vue'
 import { RouterLink } from 'vue-router'
 import heroImg from '../assets/hero.png'
 import viteLogo from '../assets/vite.svg'
 import vueLogo from '../assets/vue.svg'
 const count = shallowRef(0)
 const pageLinks = [
  { label: 'Home', to: '/' },
  { label: 'About', to: '/about' },
  { label: 'Products', to: '/products' },
  { label: 'Contact', to: '/contact' },
 ] as const
 useHead({
  title: 'Home | test-ssg',
  meta: [
    {
      name: 'description',
      content: 'Static generated home page for the Vite SSG test site.',
    },
  ],
 })
 </script>
--- a/src/pages/about-us/ecosystem.vue
+++ b/src/pages/about-us/ecosystem.vue
@@ -0,0 +1,97 @@
 <script setup lang="ts">
 	import { ref } from "vue";
 	import MyEvent from "@/directives/myEvents";
 	let videoUrl = 'https://code-create.com.hk/wp-content/uploads/2023/05/codec_brand_vid_16x9_ENG.mp4'
 	let videoPosterUrl = 'https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg'
 	const playVideo = ()=>{
 		MyEvent.emit("playVideo",{
 			url: videoUrl,
 			poster: videoPosterUrl,
 		});
 	}
 	defineExpose({})
 </script>
 <template>
 	<section class="ecosystem">
 		<div class="content">
 			<img src="https://code-create.com.hk/wp-content/uploads/2022/11/home_ai_logo.png" alt="">
 			<h2>REVITALISE THE FASHION ECOSYSTEM</h2>
 			<h4>through Artificial Intelligence (AI)</h4>
 		</div>
 	</section>
 	<section class="ecosystem-video">
 		<div class="content">
 			<img src="https://code-create.com.hk/wp-content/uploads/revslider/video-media/codec_brand_vid_16x9_ENG_11_layer.jpeg" alt="">
 			<span class="iconfont icon-bofang" @click="playVideo"></span>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.ecosystem{
 		width: 100%;
 		background-color: #fff;
 		> .content{
 			margin: 0 auto;
 			max-width: 1200px;
 			padding: 100px 0px 100px 0px;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			> img{
 				width: 300px;
 				height: 300px;
 				margin-bottom: 20px;
 			}
 			> h2{
 				margin-bottom: 20px;
 				font-size: 24px;
 			}
 			> h4{
 				color: #333333;
 				font-size: 18px;
 			}
 		}
 	}
 	.ecosystem-video{
 		width: 100%;
 		background-color: #463a37;
 		> .content{
 			max-width: 1200px;
 			margin: 0 auto;
 			padding: 100px 0;
 			position: relative;
 			> img{
 				width: 100%;
 				height: 675px;
 			}
 			> .icon-bofang{
 				font-size: 100px;
 				color: #fff;
 				position: absolute;
 				top: 50%;
 				left: 50%;
 				transform: translate(-50%,-50%);
 				animation: identifier 2s ease-in-out infinite;
 				// box-shadow: 0 0 10px #fff;
 				transition: .3s all;
 				cursor: pointer;
 				@keyframes identifier {
 					0% {
 						transform: translate(-50%,-50%) scale(1);
 						filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
 					}
 					50% {
 						transform: translate(-50%,-50%) scale(.95);
 						filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 1));
 					}
 					100% {
 						transform: translate(-50%,-50%) scale(1);
 						filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1));
 					}
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/about-us/index.vue
+++ b/src/pages/about-us/index.vue
@@ -0,0 +1,36 @@
 <script setup lang="ts">
 import Ecosystem from './ecosystem.vue'
 import Title from './title.vue'
 import Mission from './mission.vue'
 import OurTeam from './our-team.vue'
 import StrategicPartners from './strategic-partners.vue'
 defineExpose({})
 </script>
 <template>
 	<div class="about-us">
 		<div class="bg">
 			<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
 		</div>
 		<Title />
 		<Ecosystem />
 		<Mission />
 		<OurTeam />
 		<StrategicPartners />
 	</div>
 </template>
 <style lang="less" scoped>
 	.about-us{
 		width: 100%;
 		height: 100%;
 		position: relative;
 		> .bg{
 			width: 100%;
 			position: fixed;
 			z-index: -1;
 			top: 0;
 			> img{
 				width: 100%;
 			}
 		}
 	}
 </style>
--- a/src/pages/about-us/mission.vue
+++ b/src/pages/about-us/mission.vue
@@ -0,0 +1,148 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { gsap, TweenMax, TweenLite } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 const imgItem1 = ref(null)
 const imgItem2 = ref(null)
 const imgItem3 = ref(null)
 const imgItem4 = ref(null)
 const imgBox = ref(null)
 let data = reactive({
 })
 onMounted(()=>{
 	let dom = document.querySelector('body')
 	gsap.registerPlugin(ScrollTrigger);
 	let tl1 = gsap.timeline();
 	tl1.from(imgItem1.value,1, {y:'200px',opacity:0,ease:'power2.out'},0)
 	tl1.from(imgItem2.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.2) 
 	tl1.from(imgItem3.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.4)
 	tl1.from(imgItem4.value,1, {y:'200px',opacity:0,ease:'power2.out'},0.6)
 	ScrollTrigger.create({
 		trigger: imgBox.value, // 触发器元素
 		start: "top 90%", // 滚动触发器的起始滚动位置
 		end: '100% 80%',   // 滚动触发器的结束滚动位置
 		markers: false, // 开启标注功能
 		animation:tl1,
 		scroller:dom,//设置指定元素为滚动依据
 		// toggleActions: "play reset play reset",
 		scrub:false,
 	});
 })
 onUnmounted(()=>{
 })
 defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
 	<section class="mission">
 		<div class="content">
 			<h2>Mission</h2>
 			<p>To be the world leading innovative leader in offering the state-of-the-art AI based solutions and systems to disrupt the fashion industry</p>
 		</div>
 	</section>
 	<section class="mission-focus-area">
 		<div class="content">
 			<h2>Focus Area</h2>
 			<div class="img-box" ref="imgBox">
 				<div class="img-item" ref="imgItem1">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_01.png" alt="">
 					<h2>Elevate Operation Efficiency</h2>
 				</div>
 				<div class="img-item" ref="imgItem2">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_02-1-600x888.png" alt="">
 					<h2>Vertical Design Platform</h2>
 				</div>
 				<div class="img-item" ref="imgItem3">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_03-1-600x887.png" alt="">
 					<h2>Education</h2>
 				</div>
 				<div class="img-item" ref="imgItem4">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_04-1-600x888.png" alt="">
 					<h2>Community</h2>
 				</div>
 			</div>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.mission{
 		width: 100%;
 		background-color: #eeeeee;
 		> .content{
 			margin: 0 auto;
 			max-width: 730px;
 			padding: 200px 0px 200px 0px;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			text-align: center;
 			> h2{
 				margin-bottom: 30px;
 				color: #000000;
 				font-size: 40px;
 				font-weight: 600;
 				letter-spacing: 1px;
 				font-family: "Poppins", Sans-serif;
 			}
 			> p{
 				color: #555;
 				font-size: 16px;
 			}
 		}
 	}
 	.mission-focus-area{
 		width: 100%;
 		background-color: #f9f9f9;
 		> .content{
 			max-width: 1440px;
 			margin: 0 auto;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			flex-direction: column;
 			> h2{
 				font-family: "Poppins", Sans-serif;
 				font-size: 40px;
 				font-weight: 600;
 				letter-spacing: 1px;
 				color: #000000;
 				margin: 100px auto;
 			}
 			> .img-box{
 				padding: 10px;
 				margin: 0 auto;
 				margin-bottom: 20px;
 				position: relative;
 				display: flex;
 				> .img-item{
 					margin: 10px;
 					// width: 1120px;
 					width: 340px;
 					height: 503px;
 					position: relative;
 					> h2{
 						font-family: "Poppins", Sans-serif;
 						font-weight: 600;
 						line-height: 1.3em;
 						letter-spacing: 2px;
 						color: #FFFFFF;
 						width: 320px;
 						position: absolute;
 						bottom: 25%;
 						text-align: center;
 						left: 50%;
 						transform: translateX(-50%);
 					}
 					> img{
 						width: 100%;
 					}
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/about-us/our-team.vue
+++ b/src/pages/about-us/our-team.vue
@@ -0,0 +1,204 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { gsap, TweenMax, TweenLite } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 const imgItem1 = ref(null)
 let data = reactive({
 })
 onMounted(()=>{
 	let dom = document.querySelector('body')
 	let ourListDom = document.querySelectorAll('.our-team-item')
 	ourListDom.forEach((item,index)=>{
 		gsap.registerPlugin(ScrollTrigger);
 		let tl1 = gsap.timeline();
 		let img = item.querySelector('.img')
 		let textTop = item.querySelector('.text p')
 		let textBottom = item.querySelector('.text .bottom-text')
 		tl1.from(img,1, {opacity:'0',ease:'power2.out'},0)
 		.from(textTop,1, {y:'20px',opacity:'0',ease:'power2.out'},0)
 		.from(textBottom,1, {y:'-20px',opacity:'0',ease:'power2.out'},0)
 		ScrollTrigger.create({
 			trigger: img, // 触发器元素
 			start: "top 90%", // 滚动触发器的起始滚动位置
 			end: '100% 80%',   // 滚动触发器的结束滚动位置
 			markers: false, // 开启标注功能
 			animation:tl1,
 			scroller:dom,//设置指定元素为滚动依据
 			// toggleActions: "play reset play reset",
 			scrub:false,
 		});
 	})
 })
 onUnmounted(()=>{
 })
 defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
 	<section class="our-team">
 		<div class="content">
 			<h2>Our Team</h2>
 		</div>
 	</section>
 	<section class="our-team-item bg1">
 		<div class="content">
 			<div class="text">
 				<p>
 					Prof Wong is Cheng Yik Hung Professor in Fashion of School of Fashion and Textiles at The Hong Kong Polytechnic University and currently serving as the Chief Executive Officer and Centre Director of 
 					<a href="https://www.aidlab.hk/">Laboratory for Artificial Intelligence in Design (AiDLab)</a>.
 					He is one of the inventors of the technologies to be commercialized in the start-up.
 				</p>
 				<div class="bottom-text" ref="bottomText">
 					<h4 class="name">Prof Calvin WONG</h4>
 					<h4 class="position">Co-Founder and Technical Advisor</h4>
 				</div>
 			</div>
 			<div class="img">
 				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_01-600x887.png" alt="">
 			</div>
 		</div>
 	</section>
 	<section class="our-team-item bg2">
 		<div class="content">
 			<div class="img">
 				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_02-600x887.png" alt="">
 			</div>
 			<div class="text">
 				<p>
 					Ms Wong is an accomplished C-level business executive with extensive experience in the fashion and luxury goods industries, building business across China and APAC and leading operations for renowned fashion houses such as DFS USA, Lane Crawford, Burberry Asia, Brunello Cucinelli and Versace Asia Pacific.
 				</p>
 				<div class="bottom-text" ref="bottomText">
 					<h4 class="name">Ms Kim WONG</h4>
 					<h4 class="position">Co-Founder and Chief Executive Officer</h4>
 				</div>
 			</div>
 		</div>
 	</section>
 	<section class="our-team-item bg1">
 		<div class="content">
 			<div class="text">
 				<p>
 					Dr Zou is currently serving as Assistant Professor at School of Fashion and Textiles at The Hong Kong Polytechnic University. She is one of the inventors of the technologies to be commercialized in the start-up.
 				</p>
 				<div class="bottom-text" ref="bottomText">
 					<h4 class="name">Dr Aemika ZOU</h4>
 					<h4 class="position">Technical Advisor</h4>
 				</div>
 			</div>
 			<div class="img">
 				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_03-600x887.png" alt="">
 			</div>
 		</div>
 	</section>
 	<section class="our-team-item bg2">
 		<div class="content">
 			<div class="img">
 				<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_team_04-600x887.png" alt="">
 			</div>
 			<div class="text">
 				<p>
 					Giovanni is currently the Chief Executive Officer Asia of Salvatore Ferragamo.
 				</p>
 				<div class="bottom-text" ref="bottomText">
 					<h4 class="name">Mr Giovanni DI SALVO</h4>
 					<h4 class="position">Advisory Member</h4>
 				</div>
 			</div>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.our-team{
 		width: 100%;
 		background-color: #f9f9f9;
 		> .content{
 			margin: 0 auto;
 			max-width: 730px;
 			padding: 100px 0px 100px 0px;
 			> h2{
 				text-align: center;
 				margin-bottom: 30px;
 				color: #000000;
 				font-size: 40px;
 				font-weight: 600;
 				letter-spacing: 1px;
 				font-family: "Poppins", Sans-serif;
 			}
 		}
 	}
 	.our-team-item{
 		width: 100%;
 		&.bg1{
 			background-color: #eeeeee;
 			.img{
 				text-align: right;
 			}
 		}
 		&.bg2{
 			background-color: #ffffff;
 			.img{
 				text-align: left;
 			}
 		}
 		> .content{
 			padding: 100px 0;
 			max-width: 960px;
 			margin: 0 auto;
 			display: flex;
 			> div{
 				width: 50%;
 			}
 			> .text{
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				> p{
 					font-family: "Poppins", Sans-serif;
 					font-size: 16px;
 					font-weight: 600;
 					line-height: 1.6em;
 					color: #000000;
 					margin-bottom: 20px;
 					> a{
 						color: inherit;
 						font-size: inherit;
 						font-family: inherit;
 						line-height: inherit;
 						text-decoration: none;
 					}
 				}
 				> .bottom-text{
 					> .name{
 						font-family: "Poppins", Sans-serif;
 						font-size: 16px;
 						font-weight: 600;
 						color: #000000;
 						line-height: 1;
 						margin-bottom: 10px;
 					}
 					> .position{
 						font-family: "Poppins", Sans-serif;
 						font-size: 16px;
 						font-weight: 400;
 						color: #000000;
 						line-height: 1;
 					}
 				}
 			}
 			> .img{
 				> img{
 					width: 100%;
 					height: 492px;
 					object-fit: cover;
 					max-width: 330px;
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/about-us/strategic-partners.vue
+++ b/src/pages/about-us/strategic-partners.vue
@@ -0,0 +1,78 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { gsap, TweenMax, TweenLite } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 const imgItem1 = ref(null)
 let data = reactive({
 })
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
 	<section class="strategic-partners">
 		<div class="content">
 			<h2 v-tween="{'y':'30px','opacity':0}">Strategic Partners</h2>
 			<div class="img-box" v-tween="{'y':'30px','opacity':0}">
 				<a href="https://www.aidlab.hk/">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_partners_01.png" alt="">
 				</a>
 				<a href="https://www.polyu.edu.hk/">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_partners_02-1.png" alt="">
 				</a>
 				<a href="https://www.rca.ac.uk/">
 					<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_partners_03-300x145.png" alt="">
 				</a>
 				<img src="https://code-create.com.hk/wp-content/uploads/2025/05/Eschange-600x130.jpg" alt="">
 			</div>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.strategic-partners{
 		width: 100%;
 		background-color: #fff;
 		> .content{
 			margin: 0 auto;
 			max-width: 1440px;
 			padding: 200px 0px 200px 0px;
 			> h2{
 				font-family: "Poppins", Sans-serif;
 				font-size: 40px;
 				font-weight: 600;
 				letter-spacing: 1px;
 				color: #000000;
 				margin-bottom: 30px;
 				text-align: center;
 			}
 			> .img-box{
 				width: 1110px;
 				margin: 0 auto;
 				margin-top: 40px;
 				display: flex;
 				height: 100px;
 				> a{
 					width: 25%;
 					> img{
 						object-fit: contain;
 						height: 100%;
 						width: 100%;
 					}
 				}
 				> img{
 					width: 25%;
 					object-fit: contain;
 					padding: 10px;
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/about-us/title.vue
+++ b/src/pages/about-us/title.vue
@@ -0,0 +1,32 @@
 <script setup lang="ts">
 defineExpose({})
 </script>
 <template>
 	<section class="title-section">
 		<div class="content">
 			<div class="text">
 				<h1>ABOUT US</h1>
 			</div>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.title-section{
 		width: 100%;
 		> .content{
 			max-width: 1400px;
 			margin: 0 auto;
 			> .text{
 				padding: 200px 300px;
 				> h1{
 					text-align: center;
 					font-size: 64px;
 					font-weight: 600;
 					line-height: 64px;
 					letter-spacing: 2px;
 					color: #FFFFFF;
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/aida/index.vue
+++ b/src/pages/aida/index.vue
@@ -0,0 +1,819 @@
 <script setup lang="ts">
 	import { useHead } from '@unhead/vue'
 	import { shallowRef, useTemplateRef } from 'vue'
 	import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
 	import aidaPanel from '@/assets/images/home/aida-panel.png'
 	import aidaBanner from '@/assets/images/aida/aida-banner.jpg'
 	import demoVideo from '@/assets/images/aida/aida-demo-video.mp4'
 	import diamondIcon from '@/assets/images/aida/diamond.svg'
 	import industryOne from '@/assets/images/aida/industry-1.png'
 	import industryTwo from '@/assets/images/aida/industry-2.png'
 	import industryThree from '@/assets/images/aida/industry-3.png'
 	import timeIcon from '@/assets/images/aida/time.svg'
 	const keyFeatures = [
 		"The world's first AI system in fashion design emphasizing user control, ensuring AI-generated designs align seamlessly with the designer's unique vision and brand identity.",
 		'Excels in synthesizing diverse inputs, such as moodboards, fabric prints, color choices, and sketches, into a cohesive collection quickly, harmoniously, and efficiently.',
 		'Significantly speeds up the design process by over 60%, quickly generating unlimited designs based on user input.',
 		'Incorporates cutting-edge AIGC technology to generate innovative designs and provide comprehensive assistance in the creative process.'
 	] as const
 	const benefits = [
 		{
 			image: industryOne,
 			alt: 'Light bulb icon',
 			text: 'Provides speedy ideation for fashion brands and individual designers'
 		},
 		{
 			image: industryTwo,
 			alt: 'Stopwatch icon',
 			text: 'Speeds up the whole fashion design process to strive for the goal of sustainability and cost-saving'
 		},
 		{
 			image: industryThree,
 			alt: 'Drawing brush icon',
 			text: 'Allows fashion novices who do not have drawing or sketching skills to create their own designs in a simple and easy mode'
 		}
 	] as const
 	const subscriptionHighlights = [
 		'Easily create your fashion collections in around 10 seconds based on your creative inspirations and Brand DNA',
 		'Upload mood boards, colour choices, fabric prints and sketches for generating unlimited design proposals',
 		'Save and retrieve your own designs with just a few clicks',
 		'A Cloud-based system by subscription for accessing anytime and anywhere',
 		'Easy to use, can learn in 10 minutes',
 		'Contact us for AiDA trial at info@code-create.com.hk'
 	] as const
 	const plans = [
 		{
 			icon: timeIcon,
 			name: 'Trial',
 			description: '7 days free trial',
 			action: 'Start Trial',
 			href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Trial'
 		},
 		{
 			icon: diamondIcon,
 			name: 'Corporate',
 			description: 'Customised plan',
 			action: 'Contact Us',
 			href: 'mailto:info@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
 		}
 	] as const
 	const demoVideoRef = useTemplateRef<HTMLVideoElement>('demoVideoRef')
 	const isVideoPlaying = shallowRef(false)
 	async function toggleDemoVideo() {
 		const video = demoVideoRef.value
 		if (!video) {
 			return
 		}
 		if (video.paused) {
 			await video.play()
 			isVideoPlaying.value = true
 			return
 		}
 		video.pause()
 		isVideoPlaying.value = false
 	}
 	function handleVideoStateChange() {
 		const video = demoVideoRef.value
 		isVideoPlaying.value = Boolean(video && !video.paused && !video.ended)
 	}
 	useHead({
 		title: 'AiDA 3.1 | Code Create',
 		meta: [
 			{
 				name: 'description',
 				content:
 					'AiDA 3.1 is an AI-based interactive design assistant for fashion designers.'
 			}
 		]
 	})
 </script>
 <template>
 	<main class="aida-page">
 		<section class="aida-hero" aria-labelledby="aida-title">
 			<img class="aida-hero-image" :src="aidaBanner" alt="AiDA 3.1 purple silk banner" />
 			<h1 id="aida-title" class="aida-hero-title">AiDA 3.1</h1>
 		</section>
 		<section class="intro-section" aria-labelledby="intro-title">
 			<div class="intro-inner" v-custom-animation.scroll>
 				<h2 id="intro-title" class="intro-title">
 					AI-Based Interactive Design Assistant For Fashion
 				</h2>
 				<p class="intro-copy">
 					AiDA 3.1, a first-to-market technology that empowers fashion designers, based on
 					their creative inspirations, to work with AI to create original designs. With
 					just a few clicks, designers can choose or refine options to develop fashion
 					collections, bringing agility, efficiency and flexibility to conventional and
 					intensive studio processes.
 				</p>
 				<p class="pricing-copy">
 					Annual Subscription Fee: $5,000 HKD / Year (50000 Credits)<br />
 					Monthly Subscription Fee: $500 HKD / Month (3500 Credits)<br />
 					Monthly Subscription Fee: $100 HKD / Month (500 Credits)
 				</p>
 				<p class="academic-copy">
 					Special Academic rate available, please contact us for details.
 				</p>
 				<a
 					class="primary-button"
 					href="mailto:info@code-create.com.hk?subject=AiDA%203.1%20Subscription"
 				>
 					Subscribe Now
 				</a>
 				<a class="manual-link" href="#subscription">User Manual</a>
 			</div>
 		</section>
 		<section class="features-section" aria-labelledby="features-title">
 			<div class="features-inner" v-custom-animation.scroll>
 				<div class="feature-art">
 					<img
 						class="feature-bg"
 						:src="aidaIntroBg"
 						alt="Fashion design sketches on paper"
 						loading="lazy"
 					/>
 					<img
 						class="feature-panel"
 						:src="aidaPanel"
 						alt="AiDA design workspace preview"
 						loading="lazy"
 					/>
 				</div>
 				<div class="feature-copy">
 					<h2 id="features-title" class="section-title">Key Features</h2>
 					<ul class="feature-list">
 						<li v-for="feature in keyFeatures" :key="feature">
 							{{ feature }}
 						</li>
 					</ul>
 				</div>
 			</div>
 		</section>
 		<section class="benefits-section" aria-labelledby="benefits-title">
 			<div class="benefits-inner">
 				<h2 id="benefits-title" class="section-title benefits-title">
 					Benefits to Industry
 				</h2>
 				<div class="benefits-grid">
 					<article v-for="benefit in benefits" :key="benefit.text" class="benefit-card">
 						<img
 							class="benefit-icon"
 							:src="benefit.image"
 							:alt="benefit.alt"
 							loading="lazy"
 						/>
 						<p class="benefit-copy">{{ benefit.text }}</p>
 					</article>
 				</div>
 			</div>
 		</section>
 		<section class="demo-section" aria-labelledby="demo-title">
 			<div class="demo-inner">
 				<h2 id="demo-title" class="demo-title">Demo</h2>
 				<div class="demo-video-wrap">
 					<video
 						ref="demoVideoRef"
 						class="demo-video"
 						:class="{ 'is-playing': isVideoPlaying }"
 						preload="metadata"
 						playsinline
 						@click="toggleDemoVideo"
 						@pause="handleVideoStateChange"
 						@play="handleVideoStateChange"
 						@ended="handleVideoStateChange"
 					>
 						<source :src="demoVideo" type="video/mp4" />
 					</video>
 					<button
 						v-show="!isVideoPlaying"
 						class="video-play-button"
 						type="button"
 						aria-label="Play AiDA demo video"
 						@click="toggleDemoVideo"
 					>
 						Click to play
 						<span class="play-dot" aria-hidden="true"></span>
 					</button>
 				</div>
 			</div>
 		</section>
 		<section
 			id="subscription"
 			class="subscription-section"
 			aria-labelledby="subscription-title"
 		>
 			<div class="subscription-inner">
 				<h2 id="subscription-title" class="section-title subscription-title">
 					Choose Your Subscription Plan
 				</h2>
 				<ul class="subscription-list">
 					<li v-for="item in subscriptionHighlights" :key="item">
 						{{ item }}
 					</li>
 				</ul>
 				<div class="plans-grid">
 					<article v-for="plan in plans" :key="plan.name" class="plan-card">
 						<img
 							class="plan-icon"
 							:src="plan.icon"
 							:alt="`${plan.name} plan icon`"
 							loading="lazy"
 						/>
 						<h3 class="plan-title">{{ plan.name }}</h3>
 						<p class="plan-copy">{{ plan.description }}</p>
 						<a class="plan-button" :href="plan.href">{{ plan.action }}</a>
 					</article>
 				</div>
 				<div class="legal-links">
 					<a href="#subscription">Terms &amp; Conditions</a>
 					<a href="#subscription">Subscription Agreement</a>
 				</div>
 			</div>
 		</section>
 	</main>
 </template>
 <style scoped lang="less">
 	.aida-page {
 		width: 100%;
 		min-height: 100vh;
 		overflow: hidden;
 		background: #f0f0f0;
 		color: #333333;
 		font-family: Poppins, Arial, sans-serif;
 	}
 	.aida-hero {
 		position: relative;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		height: clamp(280px, 36vw, 520px);
 		min-height: 280px;
 		background: #241023;
 		overflow: hidden;
 	}
 	.aida-hero-image {
 		position: absolute;
 		inset: 0;
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
 		object-position: center;
 	}
 	.aida-hero-title {
 		position: relative;
 		z-index: 1;
 		margin: 0;
 		padding-top: 34px;
 		color: #ffffff;
 		font-size: clamp(40px, 5.2vw, 72px);
 		font-weight: 700;
 		line-height: 1;
 		letter-spacing: 0;
 		text-transform: none;
 		text-align: center;
 	}
 	.intro-section {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		min-height: 735px;
 		padding: 110px 24px 122px;
 		background: #ebebeb;
 	}
 	.intro-inner {
 		width: min(100%, 720px);
 		text-align: center;
 	}
 	.intro-title,
 	.section-title,
 	.demo-title,
 	.subscription-title,
 	.plan-title {
 		margin: 0;
 		color: #333333;
 		font-family: Poppins, Arial, sans-serif;
 		font-weight: 700;
 		letter-spacing: 1.4px;
 		text-transform: none;
 	}
 	.intro-title {
 		margin-bottom: 32px;
 		font-size: clamp(18px, 1.55vw, 24px);
 		line-height: 1.35;
 	}
 	.intro-copy,
 	.pricing-copy,
 	.academic-copy {
 		margin: 0 auto;
 		color: #555555;
 		font-size: 12px;
 		line-height: 1.5;
 		letter-spacing: 0;
 	}
 	.intro-copy {
 		max-width: 610px;
 		margin-bottom: 20px;
 	}
 	.pricing-copy {
 		max-width: 520px;
 		margin-bottom: 14px;
 		color: #3f3f3f;
 		font-weight: 700;
 		line-height: 1.32;
 		letter-spacing: 1.1px;
 	}
 	.academic-copy {
 		margin-bottom: 25px;
 	}
 	.primary-button,
 	.plan-button {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		min-height: 43px;
 		padding: 0 34px;
 		border-radius: 999px;
 		background: #a51f28;
 		color: #ffffff;
 		font-size: 10px;
 		font-weight: 700;
 		line-height: 1;
 		letter-spacing: 1.8px;
 		text-decoration: none;
 		text-transform: uppercase;
 		transition:
 			background-color 0.2s ease,
 			transform 0.2s ease;
 	}
 	.primary-button:hover,
 	.primary-button:focus-visible,
 	.plan-button:hover,
 	.plan-button:focus-visible {
 		background: #8f1720;
 		transform: translateY(-1px);
 	}
 	.primary-button:focus-visible,
 	.plan-button:focus-visible,
 	.manual-link:focus-visible,
 	.legal-links a:focus-visible,
 	.video-play-button:focus-visible {
 		outline: 2px solid #a51f28;
 		outline-offset: 4px;
 	}
 	.manual-link {
 		display: table;
 		margin: 23px auto 0;
 		color: #333333;
 		font-size: 10px;
 		font-weight: 700;
 		line-height: 1.4;
 		text-decoration: underline;
 		text-underline-offset: 3px;
 	}
 	.features-section,
 	.benefits-section,
 	.subscription-section {
 		background: #f4f4f4;
 	}
 	.features-section {
 		padding: clamp(82px, 9vw, 132px) 24px 70px;
 	}
 	.features-inner {
 		display: grid;
 		grid-template-columns: minmax(300px, 520px) minmax(320px, 620px);
 		align-items: center;
 		gap: clamp(56px, 7vw, 112px);
 		width: min(100%, 1180px);
 		margin: 0 auto;
 	}
 	.feature-art {
 		position: relative;
 		min-height: clamp(440px, 38vw, 565px);
 	}
 	.feature-bg {
 		display: block;
 		width: min(75%, 430px);
 		border-radius: 24px;
 		user-select: none;
 	}
 	.feature-panel {
 		position: absolute;
 		right: 0;
 		bottom: 32px;
 		width: min(75%, 445px);
 		filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.12));
 		user-select: none;
 	}
 	.feature-copy {
 		max-width: 610px;
 		padding-top: 12px;
 	}
 	.section-title {
 		font-size: clamp(26px, 2.35vw, 42px);
 		line-height: 1.18;
 	}
 	.feature-list {
 		margin: 32px 0 0;
 		padding-left: 18px;
 		color: #444444;
 		font-size: 13px;
 		line-height: 1.55;
 	}
 	.feature-list li + li {
 		margin-top: 12px;
 	}
 	.benefits-section {
 		padding: 78px 24px 112px;
 	}
 	.benefits-inner {
 		width: min(100%, 1160px);
 		margin: 0 auto;
 		text-align: center;
 	}
 	.benefits-title {
 		margin-bottom: clamp(56px, 7vw, 95px);
 	}
 	.benefits-grid {
 		display: grid;
 		grid-template-columns: repeat(3, minmax(0, 1fr));
 		gap: clamp(40px, 8vw, 118px);
 		align-items: start;
 	}
 	.benefit-card {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		min-width: 0;
 	}
 	.benefit-icon {
 		width: 84px;
 		height: 84px;
 		object-fit: contain;
 		margin-bottom: 48px;
 		user-select: none;
 	}
 	.benefit-copy {
 		max-width: 248px;
 		margin: 0;
 		color: #555555;
 		font-size: 12px;
 		line-height: 1.45;
 		letter-spacing: 0;
 	}
 	.demo-section {
 		padding: 78px 24px 104px;
 		background: #372b28;
 	}
 	.demo-inner {
 		width: min(100%, 1060px);
 		margin: 0 auto;
 		text-align: center;
 	}
 	.demo-title {
 		margin-bottom: 14px;
 		color: #ffffff;
 		font-size: clamp(24px, 2.15vw, 34px);
 		line-height: 1.2;
 	}
 	.demo-video-wrap {
 		position: relative;
 		width: min(100%, 960px);
 		margin: 0 auto;
 		background: #202020;
 		aspect-ratio: 16 / 9;
 		overflow: hidden;
 	}
 	.demo-video {
 		display: block;
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
 		cursor: pointer;
 		filter: grayscale(1);
 	}
 	.demo-video.is-playing {
 		filter: none;
 	}
 	.video-play-button {
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		display: inline-flex;
 		align-items: center;
 		gap: 8px;
 		min-height: 32px;
 		padding: 0 16px;
 		border: 0;
 		border-radius: 999px;
 		background: #a51f28;
 		color: #ffffff;
 		font-family: Poppins, Arial, sans-serif;
 		font-size: 10px;
 		font-weight: 700;
 		line-height: 1;
 		letter-spacing: 0;
 		cursor: pointer;
 		transform: translate(-50%, -50%);
 		transition:
 			background-color 0.2s ease,
 			transform 0.2s ease;
 	}
 	.video-play-button:hover {
 		background: #8f1720;
 		transform: translate(-50%, calc(-50% - 1px));
 	}
 	.play-dot {
 		display: block;
 		width: 0;
 		height: 0;
 		border-top: 5px solid transparent;
 		border-bottom: 5px solid transparent;
 		border-left: 8px solid #ffffff;
 	}
 	.subscription-section {
 		padding: clamp(76px, 8vw, 104px) 24px 86px;
 	}
 	.subscription-inner {
 		width: min(100%, 930px);
 		margin: 0 auto;
 	}
 	.subscription-title {
 		margin-bottom: 27px;
 		font-size: clamp(28px, 3vw, 43px);
 		line-height: 1.2;
 		text-align: left;
 	}
 	.subscription-list {
 		margin: 0 auto 52px;
 		padding: 0;
 		list-style: none;
 		color: #333333;
 		font-size: 13px;
 		line-height: 1.48;
 	}
 	.subscription-list li {
 		position: relative;
 		padding-left: 24px;
 	}
 	.subscription-list li + li {
 		margin-top: 14px;
 	}
 	.subscription-list li::before {
 		content: '';
 		position: absolute;
 		top: 0.55em;
 		left: 0;
 		width: 10px;
 		height: 5px;
 		border-left: 2px solid #333333;
 		border-bottom: 2px solid #333333;
 		transform: rotate(-45deg);
 	}
 	.plans-grid {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 		gap: 36px;
 	}
 	.plan-card {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		min-height: 324px;
 		padding: 34px 28px 30px;
 		border-radius: 12px;
 		background: #ffffff;
 		text-align: center;
 	}
 	.plan-icon {
 		width: 86px;
 		height: 86px;
 		object-fit: contain;
 		margin-bottom: 30px;
 	}
 	.plan-title {
 		margin-bottom: 34px;
 		color: #a51f28;
 		font-size: 22px;
 		line-height: 1.2;
 	}
 	.plan-copy {
 		margin: 0 0 44px;
 		color: #555555;
 		font-size: 12px;
 		line-height: 1.45;
 	}
 	.plan-button {
 		min-height: 39px;
 		margin-top: auto;
 		padding: 0 27px;
 	}
 	.legal-links {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		gap: 18px;
 		margin-top: 45px;
 	}
 	.legal-links a {
 		color: #333333;
 		font-size: 10px;
 		font-weight: 700;
 		line-height: 1.2;
 		text-decoration: underline;
 		text-underline-offset: 3px;
 	}
 	@media (max-width: 980px) {
 		.intro-section {
 			min-height: 620px;
 			padding: 84px 24px 94px;
 		}
 		.features-inner {
 			grid-template-columns: 1fr;
 			gap: 34px;
 			width: min(100%, 680px);
 		}
 		.feature-art {
 			min-height: clamp(390px, 78vw, 560px);
 		}
 		.feature-copy {
 			max-width: 100%;
 		}
 		.benefits-grid {
 			gap: 40px;
 		}
 		.subscription-inner {
 			width: min(100%, 760px);
 		}
 	}
 	@media (max-width: 720px) {
 		.aida-hero {
 			height: 292px;
 		}
 		.aida-hero-title {
 			padding-top: 24px;
 			font-size: 42px;
 		}
 		.intro-section {
 			min-height: 520px;
 			padding: 72px 20px 78px;
 		}
 		.intro-title {
 			margin-bottom: 24px;
 		}
 		.features-section {
 			padding: 64px 20px 44px;
 		}
 		.feature-bg {
 			width: 72%;
 		}
 		.feature-panel {
 			width: 78%;
 			bottom: 24px;
 		}
 		.benefits-section {
 			padding: 52px 20px 76px;
 		}
 		.benefits-grid,
 		.plans-grid {
 			grid-template-columns: 1fr;
 		}
 		.benefit-icon {
 			margin-bottom: 24px;
 		}
 		.demo-section {
 			padding: 58px 20px 76px;
 		}
 		.subscription-section {
 			padding: 62px 20px 70px;
 		}
 		.subscription-title {
 			text-align: center;
 		}
 		.subscription-list {
 			margin-bottom: 40px;
 		}
 	}
 	@media (max-width: 480px) {
 		.aida-hero {
 			height: 250px;
 			min-height: 250px;
 		}
 		.aida-hero-title {
 			font-size: 34px;
 		}
 		.intro-copy,
 		.pricing-copy,
 		.academic-copy,
 		.feature-list,
 		.subscription-list {
 			font-size: 12px;
 		}
 		.feature-art {
 			min-height: 320px;
 		}
 		.plan-card {
 			min-height: 292px;
 			padding: 30px 22px;
 		}
 	}
 </style>
--- a/src/pages/contact-us/index.vue
+++ b/src/pages/contact-us/index.vue
@@ -0,0 +1,148 @@
 <template>
 	<div class="contact-us">
 		<img class="bg" src="@/assets/images/contact-us/bg.jpg" alt="" />
 		<section class="header">
 			<h1 v-custom-animation.once duration="1s" translate-y-s="-100" opacity-s="0">
 				{{ $t('MainHeader.ContactUs') }}
 			</h1>
 		</section>
 		<section class="contact">
 			<span class="iconfont icon-dingwei"></span>
 			<h3 class="title">{{ $t('Contact') }}</h3>
 			<a class="email" href="mailto:info@code-create.com.hk">info@code-create.com.hk</a>
 		</section>
 		<section class="contact-input">
 			<div class="box">
 				<h3 class="title">{{ $t('GetInTouch') }}</h3>
 				<div class="tip">{{ $t('StayUpToDate') }}</div>
 				<input
 					v-model="email"
 					@keydown.enter.prevent="submit"
 					type="email"
 					:placeholder="$t('EmailAddress')"
 				/>
 				<div v-show="error" class="error">{{ error }}</div>
 				<button custom @click="submit">{{ $t('Submit') }}</button>
 			</div>
 		</section>
 	</div>
 </template>
 <script setup lang="ts">
 	import { ref } from 'vue'
 	const email = ref('')
 	const error = ref('')
 	const submit = () => {
 		if (!validateEmail(email.value)) return
 		console.log(email.value)
 	}
 	// 验证邮箱
 	const validateEmail = (email: string) => {
 		if (email === '') {
 			error.value = 'Please fill out this field.'
 			return false
 		} else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
 			error.value = 'Please enter a valid email address.'
 			return false
 		}
 		error.value = ''
 		return true
 	}
 </script>
 <style scoped lang="less">
 	.contact-us {
 		> * {
 			position: relative;
 			z-index: 1;
 		}
 		> .bg {
 			height: 514px;
 			width: 100%;
 			object-fit: cover;
 			position: fixed;
 			top: 0;
 			z-index: 0;
 		}
 		> .header {
 			height: 514px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			> h1 {
 				font-size: 64px;
 				font-weight: 600;
 				letter-spacing: 2px;
 				color: #fff;
 				margin-bottom: 50px;
 				text-transform: uppercase;
 			}
 		}
 		> .contact {
 			background-color: #fff;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			padding: 40px;
 			> .iconfont {
 				font-size: 50px;
 				color: #4f4f4f;
 				margin-bottom: 20px;
 			}
 			> .title {
 				font-weight: 600;
 				line-height: 36px;
 				color: #464f3b;
 				font-size: 24px;
 				margin-bottom: 15px;
 			}
 			> .email {
 				font-size: 14px;
 				color: #222;
 				text-decoration: none;
 			}
 		}
 		> .contact-input {
 			padding: 100px;
 			background-color: #faf8f8;
 			> .box {
 				max-width: 860px;
 				width: 100%;
 				padding: 80px;
 				margin: 0 auto;
 				background-color: #fff;
 				box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
 				border-radius: 40px;
 				> .title {
 					font-size: 40px;
 					color: #222;
 					margin-bottom: 10px;
 				}
 				> .tip {
 					color: #4d4d4d;
 					margin-bottom: 20px;
 				}
 				> input {
 					width: 100%;
 					border-radius: 40px;
 					height: 40px;
 					padding: 0 20px;
 					border: 1px solid #e1e1e1;
 					outline: none;
 					color: #222;
 				}
 				> .error {
 					font-size: 14px;
 					color: #dc3232;
 				}
 				> button {
 					margin-top: 10px;
 					width: 100%;
 					border-radius: 50px;
 					height: 50px;
 					font-weight: bold;
 					--hover-backcolor: #000;
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/events/all-events.vue
+++ b/src/pages/events/all-events.vue
@@ -0,0 +1,149 @@
 <script setup lang="ts">
 import { ref } from "vue";
 const eventList = ref([
 	{
 		url:'https://code-create.com.hk/wp-content/uploads/2026/05/45e19bf9012eac5071ace52896e4f53f-600x331.png',
 		title:'Elevate Operation Efficiency',
 	},
 	{
 		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-600x750.gif',
 		title:'Elevate Operation Efficiency',
 	},
 ])
 defineExpose({})
 </script>
 <template>
 	<section class="mission">
 		<div class="content">
 			<h2>ALL EVENTS</h2>
 			<div class="all-events">
 				<div v-for="item in eventList" :key="item.url" class="img-item">
 					<div class="img-box">
 						<img :src="item.url" alt="">
 						<div class="line">
 							<div class="day">11</div>
 							<div class="month">May</div>
 						</div>
 					</div>
 					<h3>{{item.title}}</h3>
 					<div class="info">
 						<p>
 							2026-05-11 10:00 - 12:00
 						</p>
 					</div>
 					<a href="#" class="read-more" target="_blank">
 						Read More
 						<span class="iconfont icon-direction-right"></span>
 					</a>
 				</div>
 			</div>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.mission{
 		width: 100%;
 		background-color: #f9f9f9;
 		> .content{
 			margin: 0 auto;
 			padding: 40px 0px 40px 0px;
 			max-width: 1120px;
 			> h2{
 				text-align: center;
 				margin-bottom: 50px;
 				font-size: 40px;
 				color: #222222;
 				font-family: "Poppins", Sans-serif;
 			}
 			> .all-events{
 			    display: grid;
 				grid-template-columns: repeat(3, minmax(100px, 1fr));
 				grid-gap: 20px 30px;
 				> .img-item{
 					&:hover{
 						> .img-box{
 							> img{
 								transform: scale(1.1);
 							}
 						}
 					}
 					> .img-box{
 						border-radius: 20px;
 						overflow: hidden;
 						max-width: 100%;
 						width: 100%;
 						position: relative;
 						margin-bottom: 20px;
 						> img{
 							transition: all .3s;
 							width: 100%;
 							height: 100%;
 							object-fit: cover;
 						}
 						> .line{
 							position: absolute;
 							width: 54px;
 							height: 54px;
 							left: 15px;
 							top: 15px;
 							border-radius: 50%;
 							background-color: #fff;
 							display: flex;
 							flex-direction: column;
 							align-items: center;
 							justify-content: center;
 							> .day{
 								font-family: "Poppins", Sans-serif;
 								font-size: 20px;
 								font-weight: 600;
 								line-height: 1;
 							}
 							> .month{
 								font-size: 12px;
 								line-height: 1;
 							}
 						}
 					}
 					> h3{
 						font-size: 20px;
 						font-weight: 600;
 						line-height: 1;
 						margin-bottom: 10px;
 					}
 					> .info{
 						font-size: 16px;
 						font-weight: 400;
 						line-height: 1;
 						color: #555;
 						margin-bottom: 15px;
 					}
 					.read-more{
 						color: #9A2125;
 						box-shadow: none;
 						font-size: 14px;
 						text-decoration: none;
 						position: relative;
 						&:hover{
 							&::after{
 								width: 100%;
 							}
 						}
 						&::after{
 							content: '';
 							position: absolute;
 							bottom: 0;
 							left: 0;
 							width: 0;
 							height: 1px;
 							background-color: #9A2125;
 							transition: all .3s;
 						}
 						> span{
 							margin-left: 10px;
 						}
 					}
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/events/index.vue
+++ b/src/pages/events/index.vue
@@ -0,0 +1,24 @@
 <script setup lang="ts">
 import Swiper from './swiper.vue'
 import AllEvents from './all-events.vue'
 defineExpose({})
 </script>
 <template>
 	<div class="events">
 		<div class="placeholder"></div>
 		<Swiper />
 		<AllEvents />
 	</div>
 </template>
 <style lang="less" scoped>
 	.events{
 		.placeholder{
 			height: var(--main-header-height, 100px);
 			width: 100%;
 			position: sticky;
 			top: 0;
 			background-color: #000;
 		}
 	}
 </style>
--- a/src/pages/events/swiper.vue
+++ b/src/pages/events/swiper.vue
@@ -0,0 +1,175 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
 import '@kagol/vue-carousel/dist/style.css'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 let list = ref([
 	{
 		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
 	},
 	{
 		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
 	},
 	{
 		url:'https://code-create.com.hk/wp-content/uploads/2026/04/award_qrcode_en-819x1024.gif'
 	},
 	{
 		url:'https://code-create.com.hk/wp-content/uploads/2026/03/Code-Create-Limited-1536x1029.jpg'
 	},
 ])
 const activePage = ref(0)
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
 </script>
 <template>
 	<section class="events-swiper">
 		<div class="content">
 			<KagolCarousel
 				:autoplay="false"
 				:interval="1000"
 				class="events-carousel"
 			>
 				<div class="carousel-item" v-for="(item,index) in list" :key="index">
 					<div class="img-box">
 						<img :src="item.url" alt="">
 					</div>
 					<div class="text-box">
 						<h4 class="title">
 							Honored to be selected as Alibaba JUMPSTARTER 2026 Top 30 Startup | Code-Create				
 						</h4>
 						<div class="info">
 							Honored to be selected as a Alibaba JUMPSTARTER 2026 Top 30 Startup |...		
 						</div>
 						<a href="#" class="read-more" target="_blank">
 							Read More
 							<span class="iconfont icon-direction-right"></span>
 						</a>
 					</div>
 				</div>
 				<template #pagination="{ prevPage, nextPage }">
 					<div class="prev-page" @click="prevPage">
 						<span class="iconfont icon-direction-left"></span>
 					</div>
 					<div class="next-page" @click="nextPage">
 						<span class="iconfont icon-direction-right"></span>
 					</div>
 				</template>
 				<template #indicator></template>
 			</KagolCarousel>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.events-swiper{
 		width: 100%;
 		background-color: #f9f9f9;
 		> .content{
 			padding: 40px 0px 40px 0px;
 			margin: 0 auto;
 			max-width: 1120px;
 			position: relative;
 			> .events-carousel{
 				.carousel-item{
 					overflow: hidden;
 					cursor: pointer;
 					&:hover{
 						img{
 							transform: scale(1.1);
 						}
 					}
 					.img-box{
 						border-radius: 20px;
 						height: 600px;
 						width: 100%;
 						overflow: hidden;
 						img{
 							width: 100%;							
 							height: 100%;
 							object-fit: cover;
 							background-color: #FFF;
 							transition: all .3s;
 						}
 					}
 					> .text-box{
 						margin-top: -40px;	
 						padding: 25px;
 						width: 560px;
 						background-color: #fff;
 						position: relative;
 						z-index: 22;
 						.title{
 							font-family: Poppins, sans-serif;
 							font-weight: 600;
 							letter-spacing: 2px;
 							color: #222222;
 							text-transform: capitalize;
 							font-size: 20px;
 							margin-bottom: 9px;
 						}
 						.info{
 							color: #555;
 							font-size: 16px;
 							margin-bottom: 15px;
 						}
 						.read-more{
 							color: #9A2125;
 							box-shadow: none;
 							font-size: 14px;
 							text-decoration: none;
 							position: relative;
 							&:hover{
 							}
 							&::after{
 								content: '';
 								position: absolute;
 								bottom: 0;
 								left: 0;
 								width: 100%;
 								height: 2px;
 								background-color: #9A2125;
 								transition: all .3s;
 							}
 							> span{
 								margin-left: 10px;
 							}
 						}
 					}
 				}
 			}
 			.prev-page, .next-page{
 				width: 96px;
 				height: 96px;
 				margin: 0 10px;
 				border: 1px solid #e1e1e1;
 				background-color: #fff;
 				border-radius: 50%;
 				transition: all .3s;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				position: absolute;
 				bottom: 0;
 				> span{
 					font-size: 38px;
 				}
 				&:hover{
 					border: 1px solid #000;
 				}
 			}
 			.prev-page{
 				right: 112px;
 			}
 			.next-page{
 				right: 0;
 			}
 		}
 	}
 </style>
--- a/src/pages/help-centre/faq.vue
+++ b/src/pages/help-centre/faq.vue
@@ -0,0 +1,132 @@
 <script setup lang="ts">
 import { ref } from "vue";
 // 使用接口定义
 const faqList = ref([
 	{
 		id: 1,
 		title: 'What are the minimum, recommended system requirements?',
 		content: 'As AiDA is a cloud-based system, only stable internet access is required.',
 	},
 	{
 		id: 2,
 		title: 'Does AiDA run on both a PC & a MAC?',
 		content: 'Yes, AiDA supports both PC & MAC.',
 	},
 	{
 		id: 3,
 		title: 'Does AiDA run on an iPad?',
 		content: 'Yes, AiDA can be run on an iPad.',
 	},
 	{
 		id: 4,
 		title: 'What File Types it supports?',
 		content: 'The image file types that can be uploaded into AiDA: jpeg, jpg, png',
 	},
 	{
 		id: 5,
 		title: 'In what languages is AiDA system available',
 		content: 'Currently, AiDA is available in English',
 	},
 	{
 		id: 6,
 		title: 'Can I receive my invoice?',
 		content: 'The invoice will be sent to your registered mailbox 1 months before (for paid subscription) with the reminder email.',
 	},
 	{
 		id: 7,
 		title: 'How do I change my password?',
 		content: 'You could change your password after login to your account in “My Account” page “Account details” part.',
 	},
 ])
 const openIdList = ref([])
 const openInfo = (id) => {
 	if(openIdList.value.includes(id)){
 		openIdList.value = openIdList.value.filter(item => item !== id)
 	}else{
 		openIdList.value.push(id)
 	}
 }
 defineExpose({})
 </script>
 <template>
 	<section class="faq">
 		<div class="content">
 			<h2>FAQ</h2>
 			<div class="faq-list">
 				<div v-for="item in faqList" :key="item.id" class="faq-item">
 					<h2 @click="openInfo(item.id)">
 						{{ item.title }}
 						<span class="iconfont icon-sanjiao_xia" :class="{'active': openIdList.includes(item.id)}"></span>
 					</h2>
 					<div class="info" :class="{'active': openIdList.includes(item.id)}">
 						<p>{{ item.content }}</p>
 					</div>
 				</div>
 			</div>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.faq{
 		width: 100%;
 		padding: 60px 0;
 		background-color: #f9f9f9;
 		> .content{
 			max-width: 1140px;
 			margin: 0 auto;
 			> h2{
 				font-family: "Poppins", Sans-serif;
 				font-size: 40px;
 				font-weight: 600;
 				letter-spacing: 1px;
 				color: #000000;
 				margin-bottom: 40px;
 				line-height: 1;
 				text-align: center;
 			}
 			> .faq-list{
 				> .faq-item{
 					border-bottom: 1px solid #d5d8dc;
 					> h2{
 						padding: 40px 0px 40px 0px;
 						font-family: "Poppins", Sans-serif;
 						font-size: 24px;
 						line-height: 1.5em;
 						color: #333333;
 						font-weight: 700;
 						display: flex;
 						align-items: flex-start;
 						justify-content: space-between;
 						cursor: pointer;
 						> span{
 							font-size: 14px;
 							transition: all .3s;
 							&.active{
 								transform: rotate(180deg);
 							}
 						}
 					}
 					> .info{
 						height: 0;
 						overflow: hidden;
 						transition: all .3s;
 						&.active{
 							height: 70px;
 						}
 						> p{
 							padding: 15px;
 							color: #333333;
 							font-weight: 400;
 							font-size: 14px;
 							line-height: 20px;
 							margin-bottom: 20px;
 						}
 					}
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/help-centre/index.vue
+++ b/src/pages/help-centre/index.vue
@@ -0,0 +1,30 @@
 <script setup lang="ts">
 import Title from './title.vue'
 import Faq from './faq.vue'
 defineExpose({})
 </script>
 <template>
 	<div class="about-us">
 		<div class="bg">
 			<img src="https://code-create.com.hk/wp-content/uploads/2022/11/helpcentre_banner-1.jpg" alt="">
 		</div>
 		<Title />
 		<Faq />
 	</div>
 </template>
 <style lang="less" scoped>
 	.about-us{
 		width: 100%;
 		height: 100%;
 		position: relative;
 		> .bg{
 			width: 100%;
 			position: fixed;
 			z-index: -1;
 			top: 0;
 			> img{
 				width: 100%;
 			}
 		}
 	}
 </style>
--- a/src/pages/help-centre/title.vue
+++ b/src/pages/help-centre/title.vue
@@ -0,0 +1,32 @@
 <script setup lang="ts">
 defineExpose({})
 </script>
 <template>
 	<section class="title-section">
 		<div class="content">
 			<div class="text">
 				<h1>HELP CENTRE</h1>
 			</div>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.title-section{
 		width: 100%;
 		> .content{
 			max-width: 1400px;
 			margin: 0 auto;
 			> .text{
 				padding: 200px 300px;
 				> h1{
 					text-align: center;
 					font-size: 64px;
 					font-weight: 600;
 					line-height: 64px;
 					letter-spacing: 2px;
 					color: #FFFFFF;
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/home/components/Carousel.vue
+++ b/src/pages/home/components/Carousel.vue
@@ -0,0 +1,476 @@
 <template>
 	<section
 		class="carousel-container"
 		aria-label="Featured content"
 		@mouseenter="pauseAutoplay"
 		@mouseleave="resumeAutoplay"
 	>
 		<KagolCarousel
 			v-model="activePage"
 			class="home-carousel"
 			:autoplay="false"
 			:interval="1000"
 		>
 			<article
 				v-for="slide in slides"
 				:key="slide.id"
 				ref="slideEls"
 				class="carousel-slide"
 			>
 				<div class="mask"></div>
 				<div class="banner-title" v-if="slide.title">{{ slide.title }}</div>
 				<img
 					v-if="!slide.video"
 					class="carousel-banner image"
 					:src="slide.image"
 					:alt="slide.alt"
 				/>
 				<video
 					v-else
 					class="carousel-banner video"
 					:alt="slide.alt"
 					:controls="false"
 					autoplay
 					muted
 					loop
 				>
 					<source :src="slide.video" type="video/mp4" />
 				</video>
 				<div class="desc flex flex-center" v-if="slide.description">
 					<span class="desc-fill" aria-hidden="true"></span>
 					<span class="desc-index-group">
 						<span class="desc-line" aria-hidden="true"></span>
 						<span class="desc-index-frame">
 							<span class="desc-index">{{ slide.number }}</span>
 							<span class="desc-index-cover" aria-hidden="true"></span>
 						</span>
 					</span>
 					<p class="desc-copy">{{ slide.description }}</p>
 				</div>
 			</article>
 			<template #pagination="{ prevPage, nextPage }">
 				<nav class="carousel-pagination" aria-label="Carousel pagination">
 					<button
 						class="carousel-pagination-button carousel-pagination-button-prev"
 						type="button"
 						aria-label="Previous slide"
 						@click="prevPage"
 					>
 						<span
 							class="carousel-pagination-arrow carousel-pagination-arrow-prev"
 						></span>
 					</button>
 					<button
 						class="carousel-pagination-button carousel-pagination-button-next"
 						type="button"
 						aria-label="Next slide"
 						@click="nextPage"
 					>
 						<span
 							class="carousel-pagination-arrow carousel-pagination-arrow-next"
 						></span>
 					</button>
 				</nav>
 			</template>
 			<template #indicator></template>
 		</KagolCarousel>
 	</section>
 </template>
 <script setup lang="ts">
 	import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
 	import '@kagol/vue-carousel/dist/style.css'
 	import { gsap } from 'gsap'
 	import {
 		nextTick,
 		onBeforeUnmount,
 		onMounted,
 		shallowRef,
 		useTemplateRef,
 		watch
 	} from 'vue'
 	import mainBanner01 from '../../../assets/images/home/mainbanner01.jpg'
 	import mainBanner02 from '../../../assets/images/home/mainbanner02.jpg'
 	import Video from '@/assets/images/home/hero-desktop.mp4'
 	type HomeSlide = {
 		id: string
 		image: string
 		video: string
 		alt: string
 		title?: string
 		number?: string
 		description?: string
 	}
 	const activePage = shallowRef(1)
 	const isAutoplayEnabled = shallowRef(false)
 	const slideEls = useTemplateRef<HTMLElement[]>('slideEls')
 	const slides: readonly HomeSlide[] = [
 		{
 			id: 'aida',
 			image: mainBanner01,
 			video: '',
 			alt: 'Code Create product banner',
 			title: 'Shaping the future\nof fashion design',
 			number: '01',
 			description:
 				"World's first and only designer-led AI system that streamlines ideation from hours to seconds"
 		},
 		{
 			id: 'mixi',
 			image: mainBanner02,
 			video: '',
 			alt: 'Code Create product banner',
 			title: 'Be the game changer,\n subscribe now!',
 			number: '02',
 			description: 'Make the first move to streamline and facilitate your inspiration process'
 		},
 		{
 			id: 'video',
 			image: '',
 			video: Video,
 			alt: 'Code Create product video banner'
 		}
 	]
 	const descAnimationDelay = 1
 	let activeSlideIndex: number | null = null
 	let descAnimationFrame = 0
 	let descTimeline: ReturnType<typeof gsap.timeline> | null = null
 	function getActiveSlideIndex() {
 		const slideCount = slides.length
 		return ((activePage.value - 1) % slideCount + slideCount) % slideCount
 	}
 	function prefersReducedMotion() {
 		return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
 	}
 	function playDescAnimation(slideIndex: number) {
 		const activeSlide = slideEls.value?.[slideIndex]
 		const desc = activeSlide?.querySelector<HTMLElement>('.desc')
 		const fill = desc?.querySelector<HTMLElement>('.desc-fill')
 		const line = desc?.querySelector<HTMLElement>('.desc-line')
 		const index = desc?.querySelector<HTMLElement>('.desc-index')
 		const cover = desc?.querySelector<HTMLElement>('.desc-index-cover')
 		const copy = desc?.querySelector<HTMLElement>('.desc-copy')
 		descTimeline?.kill()
 		descTimeline = null
 		if (!fill || !line || !index || !cover || !copy) {
 			return
 		}
 		gsap.killTweensOf([fill, line, index, cover, copy])
 		if (prefersReducedMotion()) {
 			gsap.set(fill, { width: '100%' })
 			gsap.set(line, { autoAlpha: 1, width: 1, x: 0 })
 			gsap.set(index, { autoAlpha: 1, x: 0 })
 			gsap.set(cover, { autoAlpha: 0, xPercent: 110 })
 			gsap.set(copy, { autoAlpha: 1, x: 0 })
 			return
 		}
 		gsap.set(fill, { width: 0 })
 		gsap.set(line, { autoAlpha: 0, width: 5, x: 18 })
 		gsap.set(index, { autoAlpha: 0, x: -34 })
 		gsap.set(cover, { autoAlpha: 0, xPercent: 0 })
 		gsap.set(copy, { autoAlpha: 0, x: 22 })
 		descTimeline = gsap
 			.timeline({
 				delay: descAnimationDelay,
 				defaults: {
 					ease: 'power3.out'
 				}
 			})
 			.addLabel('panel', 0)
 			.to(fill, { duration: 1.05, ease: 'power2.out', width: '100%' }, 'panel')
 			.to(line, { autoAlpha: 1, duration: 0.9, width: 1, x: 0 }, 'panel+=0.12')
 			.addLabel('number', 1.18)
 			.set(index, { autoAlpha: 1 }, 'number')
 			.set(cover, { autoAlpha: 1 }, 'number')
 			.to(index, { duration: 0.7, x: 0 }, 'number')
 			.to(cover, { duration: 0.72, ease: 'power2.inOut', xPercent: 110 }, 'number+=0.08')
 			.to(copy, { autoAlpha: 1, duration: 0.72, x: 0 }, '>')
 	}
 	function queueDescAnimation() {
 		const slideIndex = getActiveSlideIndex()
 		if (slideIndex === activeSlideIndex) {
 			return
 		}
 		activeSlideIndex = slideIndex
 		nextTick(() => {
 			if (descAnimationFrame) {
 				window.cancelAnimationFrame(descAnimationFrame)
 			}
 			descAnimationFrame = window.requestAnimationFrame(() => {
 				descAnimationFrame = 0
 				playDescAnimation(slideIndex)
 			})
 		})
 	}
 	function pauseAutoplay() {
 		isAutoplayEnabled.value = false
 	}
 	function resumeAutoplay() {
 		isAutoplayEnabled.value = true
 	}
 	onMounted(() => {
 		resumeAutoplay()
 		queueDescAnimation()
 	})
 	onBeforeUnmount(() => {
 		if (descAnimationFrame) {
 			window.cancelAnimationFrame(descAnimationFrame)
 		}
 		descTimeline?.kill()
 	})
 	watch(activePage, queueDescAnimation)
 </script>
 <style scoped lang="less">
 	.carousel-container {
 		width: 100%;
 		overflow: hidden;
 	}
 	.home-carousel {
 		.carousel-slide {
 			position: relative;
 			width: 100%;
 			aspect-ratio: 16 / 9;
 			height: 960px;
 			overflow: hidden;
 			.mask {
 				position: absolute;
 				top: 0;
 				left: 0;
 				right: 0;
 				bottom: 0;
 				background-color: rgba(0, 0, 0, 0.35);
 				z-index: 2;
 			}
 			.carousel-banner {
 				display: block;
 				width: 100%;
 				height: 100%;
 				object-fit: cover;
 				position: absolute;
 			}
 			.banner-title {
 				position: absolute;
 				right: 50%;
 				top: 50%;
 				white-space: pre-line;
 				color: #fff;
 				font-size: 64px;
 				font-family: 'Poppins';
 				transform: translateY(-70%);
 				z-index: 3;
 			}
 			.desc {
 				position: absolute;
 				left: 0;
 				bottom: 0;
 				z-index: 3;
 				display: flex;
 				align-items: center;
 				gap: 24px;
 				height: 140px;
 				width: 656px;
 				color: #ffffff;
 				background: transparent;
 				isolation: isolate;
 			}
 			.desc-fill {
 				position: absolute;
 				inset: 0 auto 0 0;
 				z-index: 0;
 				display: block;
 				width: 0;
 				background: #a51f24;
 				pointer-events: none;
 			}
 			.desc-index-group {
 				position: relative;
 				z-index: 1;
 				flex: 0 0 auto;
 			}
 			.desc-line {
 				position: absolute;
 				top: -160%;
 				left: 50%;
 				display: block;
 				width: 1px;
 				height: 65px;
 				background: rgba(255, 255, 255, 0.72);
 				opacity: 0;
 				transform: translateX(-50%);
 				will-change: transform, width, opacity;
 			}
 			.desc-index-frame {
 				position: relative;
 				display: block;
 				overflow: hidden;
 			}
 			.desc-index {
 				flex: 0 0 auto;
 				position: relative;
 				z-index: 1;
 				display: block;
 				font-family: 'Poppins';
 				font-size: 52px;
 				font-weight: 700;
 				line-height: 1;
 				opacity: 0;
 				will-change: transform, opacity;
 			}
 			.desc-index-cover {
 				position: absolute;
 				inset: 0;
 				z-index: 2;
 				display: block;
 				background: #ffffff;
 				opacity: 0;
 				pointer-events: none;
 				will-change: transform;
 			}
 			.desc-copy {
 				position: relative;
 				z-index: 1;
 				max-width: 440px;
 				margin: 0;
 				font-family: 'Poppins';
 				font-size: 14px;
 				font-weight: 600;
 				line-height: 1.45;
 				opacity: 0;
 				will-change: transform, opacity;
 			}
 		}
 		.carousel-pagination {
 			position: absolute;
 			right: 0;
 			bottom: 0;
 			z-index: 2;
 			display: flex;
 			flex-direction: column;
 			width: 70px;
 			height: 140px;
 			transform: translateX(100%);
 			transition: transform 0.28s ease;
 			will-change: transform;
 		}
 		.carousel-pagination-button {
 			position: relative;
 			display: flex;
 			flex: 1 1 0;
 			align-items: center;
 			justify-content: center;
 			width: 100%;
 			padding: 0;
 			border: 0;
 			color: #ffffff;
 			background: #65090c;
 			cursor: pointer;
 			appearance: none;
 			transition: background-color 0.2s ease;
 		}
 		.carousel-pagination-button:hover {
 			background: rgba(255, 255, 255, 0.75);
 		}
 		.carousel-pagination-button:focus-visible {
 			position: relative;
 			z-index: 1;
 			outline: 2px solid #ffffff;
 			outline-offset: -6px;
 		}
 		.carousel-pagination-arrow {
 			position: absolute;
 			top: 50%;
 			left: 50%;
 			display: block;
 			box-sizing: border-box;
 			width: 20px;
 			height: 20px;
 			border-top: 2.5px solid currentColor;
 			border-right: 2.5px solid currentColor;
 		}
 		.carousel-pagination-arrow-prev {
 			transform: translate(-50%, -50%) rotate(225deg);
 		}
 		.carousel-pagination-arrow-next {
 			transform: translate(-50%, -50%) rotate(45deg);
 		}
 	}
 	.carousel-container:hover .carousel-pagination {
 		transform: translateX(0);
 	}
 	:deep(.xui-carousel) {
 		width: 100%;
 	}
 	:deep(.xui-carousel-item-container) {
 		height: 100%;
 	}
 	@media (max-width: 768px) {
 		.carousel-slide {
 			min-height: 320px;
 		}
 		.home-carousel {
 			.carousel-slide {
 				.desc {
 					width: 100%;
 					min-width: 0;
 					height: auto;
 					min-height: 92px;
 					padding: 16px 20px;
 				}
 				.desc-line {
 					top: -28px;
 					height: 42px;
 				}
 				.desc-index {
 					font-size: 40px;
 				}
 				.desc-copy {
 					max-width: none;
 					font-size: 12px;
 				}
 			}
 		}
 		.carousel-pagination-arrow {
 			width: 18px;
 			height: 18px;
 		}
 	}
 </style>
--- a/src/pages/home/components/ProductFeature.vue
+++ b/src/pages/home/components/ProductFeature.vue
@@ -0,0 +1,269 @@
 <script setup lang="ts">
 	import { RouterLink } from 'vue-router'
 	withDefaults(
 		defineProps<{
 			name: string
 			title: string
 			backgroundImage: string
 			backgroundAlt: string
 			panelImage: string
 			panelAlt: string
 			reversed?: boolean
 		}>(),
 		{
 			reversed: false
 		}
 	)
 </script>
 <template>
 	<section
 		class="product-feature"
 		:class="{ 'product-feature-reversed': reversed }"
 		v-custom-animation.scroll
 	>
 		<div class="product-feature-art">
 			<img
 				class="product-feature-bg"
 				:src="backgroundImage"
 				:alt="backgroundAlt"
 				loading="lazy"
 				translate-x-s="-100"
 				translate-x="100"
 			/>
 			<img
 				class="product-feature-panel"
 				:src="panelImage"
 				:alt="panelAlt"
 				loading="lazy"
 				translate-y-s="-100"
 				translate-y="20"
 			/>
 		</div>
 		<div class="product-feature-copy">
 			<p class="product-feature-name">{{ name }}</p>
 			<h2 class="product-feature-title">{{ title }}</h2>
 			<RouterLink
 				class="product-feature-link"
 				to="/products"
 				translate-y-s="100"
 				translate-y="0"
 			>
 				View More
 			</RouterLink>
 		</div>
 	</section>
 </template>
 <style scoped lang="less">
 	.product-feature {
 		display: flex;
 		align-items: center;
 		gap: clamp(48px, 5.5vw, 76px);
 		width: 1440px;
 		min-width: 0;
 		min-height: 690px;
 		margin: 0 auto;
 		& > div {
 			width: 50%;
 		}
 	}
 	.product-feature-reversed {
 		grid-template-columns: minmax(420px, 0.95fr) minmax(0, 1.05fr);
 	}
 	.product-feature-reversed .product-feature-art {
 		order: 2;
 		justify-self: end;
 	}
 	.product-feature-reversed .product-feature-copy {
 		order: 1;
 		justify-self: start;
 		max-width: 510px;
 	}
 	.product-feature-art {
 		position: relative;
 		width: min(100%, 560px);
 		min-width: 0;
 		min-height: 560px;
 		justify-self: start;
 	}
 	.product-feature-bg {
 		display: block;
 		width: min(100%, 480px);
 		max-width: 100%;
 		height: auto;
 		user-select: none;
 	}
 	.product-feature-panel {
 		position: absolute;
 		right: 0;
 		bottom: 94px;
 		width: min(72%, 380px);
 		max-width: 100%;
 		height: auto;
 		user-select: none;
 	}
 	.product-feature-reversed .product-feature-bg {
 		width: min(100%, 460px);
 		margin-left: auto;
 	}
 	.product-feature-reversed .product-feature-panel {
 		right: auto;
 		left: -88px;
 		bottom: 70px;
 		width: min(78%, 430px);
 	}
 	.product-feature-copy {
 		position: relative;
 		z-index: 1;
 		max-width: 590px;
 		min-width: 0;
 		justify-self: start;
 		padding-bottom: 18px;
 	}
 	.product-feature-name {
 		margin: 0 0 20px;
 		color: #6e6e6e;
 		font-family: Poppins, sans-serif;
 		font-size: 18px;
 		font-weight: 700;
 		line-height: 1;
 		letter-spacing: 2px;
 	}
 	.product-feature-title {
 		margin: 0 0 28px;
 		color: #252525;
 		font-family: Poppins, sans-serif;
 		font-size: clamp(30px, 2.8vw, 38px);
 		font-weight: 700;
 		line-height: 1.16;
 		letter-spacing: 2px;
 		text-transform: none;
 		overflow-wrap: break-word;
 	}
 	.product-feature-link {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		min-width: 152px;
 		min-height: 48px;
 		padding: 0 28px;
 		border-radius: 999px;
 		color: #ffffff;
 		background: #a72125;
 		font-family: Poppins, sans-serif;
 		font-size: 10px;
 		font-weight: 700;
 		line-height: 1;
 		letter-spacing: 2px;
 		text-decoration: none;
 		text-transform: uppercase;
 		transition:
 			background-color 0.2s ease,
 			transform 0.2s ease;
 	}
 	.product-feature-link:hover,
 	.product-feature-link:focus-visible {
 		background: #8e171b;
 		transform: translateY(-1px);
 	}
 	.product-feature-link:focus-visible {
 		outline: 2px solid #a72125;
 		outline-offset: 4px;
 	}
 	@media (max-width: 980px) {
 		.product-feature,
 		.product-feature-reversed {
 			grid-template-columns: 1fr;
 			gap: 24px;
 			width: min(680px, calc(100% - 40px));
 			min-height: 0;
 			padding: 70px 0;
 		}
 		.product-feature-reversed .product-feature-art,
 		.product-feature-reversed .product-feature-copy {
 			order: initial;
 			justify-self: start;
 		}
 		.product-feature-art {
 			width: 100%;
 			max-width: 100%;
 			min-height: clamp(390px, 82vw, 560px);
 			justify-self: stretch;
 		}
 		.product-feature-copy {
 			width: 100%;
 			max-width: 640px;
 			justify-self: stretch;
 			padding-bottom: 0;
 		}
 		.product-feature-reversed .product-feature-panel {
 			left: 0;
 		}
 	}
 	@media (max-width: 640px) {
 		.product-feature,
 		.product-feature-reversed {
 			width: calc(100% - 32px);
 			padding: 52px 0;
 		}
 		.product-feature-art {
 			min-height: clamp(300px, 82vw, 430px);
 		}
 		.product-feature-copy,
 		.product-feature-reversed .product-feature-copy {
 			width: 100% !important;
 			max-width: 100% !important;
 			justify-self: stretch !important;
 		}
 		.product-feature-bg {
 			width: 78%;
 		}
 		.product-feature-panel,
 		.product-feature-reversed .product-feature-panel {
 			left: auto;
 			right: 0;
 			bottom: 42px;
 			width: 68%;
 		}
 		.product-feature-reversed .product-feature-bg {
 			width: 72%;
 		}
 		.product-feature-title {
 			width: 100%;
 			max-width: 100%;
 			font-size: clamp(26px, 7.2vw, 30px);
 			line-height: 1.2;
 			letter-spacing: 1.2px;
 			overflow-wrap: anywhere;
 		}
 	}
 </style>
--- a/src/pages/home/components/ProjectCta.vue
+++ b/src/pages/home/components/ProjectCta.vue
@@ -0,0 +1,83 @@
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
 </script>
 <template>
 	<section class="project-cta">
 		<div class="project-cta-inner">
 			<h2 class="project-cta-title">Talk To Us About Your Next Project</h2>
 			<RouterLink class="project-cta-link" to="/contact">
 				Contact Us
 			</RouterLink>
 		</div>
 	</section>
 </template>
 <style scoped lang="less">
 	.project-cta {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		min-height: 435px;
 		padding: 72px 20px;
 		background: #473935;
 	}
 	.project-cta-inner {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		gap: 38px;
 		text-align: center;
 	}
 	.project-cta-title {
 		margin: 0;
 		color: #ffffff;
 		font-family: Poppins, sans-serif;
 		font-size: clamp(22px, 2vw, 27px);
 		font-weight: 700;
 		line-height: 1.35;
 		letter-spacing: 2px;
 		text-transform: capitalize;
 	}
 	.project-cta-link {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		min-width: 158px;
 		min-height: 48px;
 		padding: 0 28px;
 		border-radius: 999px;
 		color: #ffffff;
 		background: #ad2228;
 		font-family: Poppins, sans-serif;
 		font-size: 10px;
 		font-weight: 700;
 		line-height: 1;
 		letter-spacing: 2px;
 		text-decoration: none;
 		text-transform: uppercase;
 		transition:
 			background-color 0.2s ease,
 			transform 0.2s ease;
 	}
 	.project-cta-link:hover,
 	.project-cta-link:focus-visible {
 		background: #93191f;
 		transform: translateY(-1px);
 	}
 	.project-cta-link:focus-visible {
 		outline: 2px solid #ffffff;
 		outline-offset: 4px;
 	}
 	@media (max-width: 640px) {
 		.project-cta {
 			min-height: 340px;
 		}
 	}
 </style>
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,30 +1,181 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+	import { useHead } from '@unhead/vue'
-import Video from './video.vue'
+	import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
-import Product from './product.vue'
+	import aidaPanel from '@/assets/images/home/aida-panel.png'
-//const props = defineProps({
+	import homeAiLogo from '@/assets/images/home/home-ai-logo.png'
-//})
+	import mixiIntroBg from '@/assets/images/home/mixi-intro-bg.png'
-//const emit = defineEmits([
+	import mixiPanel from '@/assets/images/home/mixi-panel.png'
-//])
+	import HomeCarousel from './components/Carousel.vue'
-let data = reactive({
+	import ProductFeature from './components/ProductFeature.vue'
-})
+	import ProjectCta from './components/ProjectCta.vue'
-onMounted(()=>{
+
-})
+	const productFeatures = [
-onUnmounted(()=>{
+		{
-})
+			name: 'AiDA 3.1',
-defineExpose({})
+			title: 'Empowers fashion designers to create a collection with just a few clicks based on their creative inspirations.',
-const {} = toRefs(data);
+			backgroundImage: aidaIntroBg,
 			backgroundAlt: 'Fashion design sketches on paper',
 			panelImage: aidaPanel,
 			panelAlt: 'AiDA design workspace preview',
 			reversed: false
 		},
 		{
 			name: 'Mixi',
 			title: "Drives sales by improving shoppers' experience through precise and fast search.",
 			backgroundImage: mixiIntroBg,
 			backgroundAlt: 'Layered fabric texture',
 			panelImage: mixiPanel,
 			panelAlt: 'Mixi visual search interface preview',
 			reversed: true
 		}
 	] as const
 	useHead({
 		title: 'Home | Code Create',
 		meta: [
 			{
 				name: 'description',
 				content:
 					'Code Create revitalises the fashion ecosystem through artificial intelligence.'
 			}
 		]
 	})
 </script>
 <template>
-	<div class="home">
+	<main class="home-page">
-		<Video />
+		<HomeCarousel />
-		<Product />
+
-	</div>
+		<div class="home-content">
 			<section
 				class="ecosystem-intro"
 				aria-labelledby="ecosystem-title"
 				v-custom-animation.scroll
 			>
 				<img
 					class="ecosystem-logo"
 					:src="homeAiLogo"
 					alt="Code Create"
 					loading="lazy"
 					translate-y-s="-20"
 					translate-y="20"
 				/>
 				<h1
 					id="ecosystem-title"
 					class="ecosystem-title"
 					translate-y-s="-60"
 					translate-y="0"
 				>
 					Revitalise The Fashion Ecosystem
 				</h1>
 				<p translate-y-s="-60" translate-y="0" class="ecosystem-subtitle">
 					Through Artificial Intelligence (AI)
 				</p>
 			</section>
 			<ProductFeature
 				v-for="feature in productFeatures"
 				:key="feature.name"
 				:name="feature.name"
 				:title="feature.title"
 				:background-image="feature.backgroundImage"
 				:background-alt="feature.backgroundAlt"
 				:panel-image="feature.panelImage"
 				:panel-alt="feature.panelAlt"
 				:reversed="feature.reversed"
 			/>
 		</div>
 		<ProjectCta />
 	</main>
 </template>
-<style lang="less" scoped>
+
-	.home{
+<style scoped lang="less">
 	.home-page {
 		width: 100%;
-		height: 100%;
+		overflow: hidden;
-		position: relative;
+		background: #ffffff;
 	}
 	.home-content {
 		padding: clamp(116px, 10vw, 172px) 0 clamp(92px, 8vw, 126px);
 		background: #ffffff;
 	}
 	.ecosystem-intro {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		padding: 0 20px clamp(92px, 10vw, 150px);
 		text-align: center;
 	}
 	.ecosystem-logo {
 		display: block;
 		width: clamp(146px, 15vw, 184px);
 		height: auto;
 		margin-bottom: 30px;
 		user-select: none;
 	}
 	.ecosystem-title {
 		width: 100%;
 		max-width: 100%;
 		margin: 0 0 9px;
 		color: #101010;
 		font-family: Poppins, sans-serif;
 		font-size: clamp(18px, 1.65vw, 22px);
 		font-weight: 700;
 		line-height: 1.25;
 		letter-spacing: 4px;
 		text-transform: uppercase;
 		overflow-wrap: break-word;
 	}
 	.ecosystem-subtitle {
 		width: 100%;
 		margin: 0;
 		color: #101010;
 		font-family: Poppins, sans-serif;
 		font-size: clamp(13px, 1.2vw, 16px);
 		font-weight: 600;
 		line-height: 1.35;
 		letter-spacing: 2.5px;
 	}
 	@media (max-width: 980px) {
 		.home-content {
 			padding: 96px 0 64px;
 		}
 		.ecosystem-intro {
 			padding-bottom: 50px;
 		}
 	}
 	@media (max-width: 640px) {
 		.home-content {
 			padding: 72px 0 36px;
 		}
 		.ecosystem-logo {
 			width: 138px;
 			margin-bottom: 22px;
 		}
 		.ecosystem-title {
 			width: min(100%, 330px);
 			max-width: none;
 			font-size: 14px;
 			letter-spacing: 1.5px;
 			line-height: 1.45;
 			overflow-wrap: anywhere;
 		}
 		.ecosystem-subtitle {
 			font-size: 12px;
 			letter-spacing: 1.5px;
 		}
 	}
 </style>
--- a/src/pages/home/product.vue
+++ b/src/pages/home/product.vue
@@ -1,30 +0,0 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { gsap, TweenMax, TweenLite } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
 	<section class="product">
 		<br v-for="item in 50" />
 		<div class="aa" >1231312</div>
 		<div class="aa" v-tween-animation>1231312</div>
 		<br v-for="item in 10" />
 	</section>
 </template>
 <style lang="less" scoped>
 	.product{
 		width: 100%;
 	}
 </style>
--- a/src/pages/home/video.vue
+++ b/src/pages/home/video.vue
@@ -1,25 +0,0 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
 	<section class="video">
 		<div class="title">
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.video{
 	}
 </style>
--- a/src/pages/media/index.vue
+++ b/src/pages/media/index.vue
@@ -0,0 +1,178 @@
 <template>
 	<div class="media">
 		<img class="bg" src="@/assets/images/media/bg.jpg" alt="" />
 		<section class="header">
 			<h1 v-custom-animation.once duration="1s" translate-y-s="-100" opacity-s="0">
 				{{ $t('MainHeader.Media') }}
 			</h1>
 		</section>
 		<section class="content">
 			<div class="box">
 				<div class="nav">
 					<span
 						class="hover-bottom-animation center"
 						v-for="v in navList"
 						:key="v.value"
 						:class="{ active: v.value === nav }"
 						@click="nav = v.value"
 						>{{ v.label }}</span
 					>
 				</div>
 				<div class="list">
 					<div class="item" v-for="v in list" :key="nav + v.text">
 						<span class="date">{{ FormatDate(v.date, 'SM D, YYYY') }}</span>
 						<span class="text">{{ v.text }}</span>
 					</div>
 				</div>
 			</div>
 		</section>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import listEn from './list-en.js'
 	import listZhCn from './list-zh-cn.js'
 	import listZhTw from './list-zh-tw.js'
 	import { LangType } from '../../lang'
 	import { useI18n } from 'vue-i18n'
 	const { locale } = useI18n()
 	const allList = computed(() => {
 		if (locale.value === LangType.zhCn) {
 			return listZhCn
 		}
 		if (locale.value === LangType.zhTw) {
 			return listZhTw
 		}
 		return listEn
 	})
 	const list = computed(() => {
 		return allList.value.filter((v) =>
 			nav.value === 0 ? true : new Date(v.date).getFullYear() === nav.value
 		)
 	})
 	const nav = ref(0)
 	const navList = computed(() => {
 		const arr = [
 			{
 				label: 'All',
 				value: 0
 			}
 		]
 		allList.value.forEach((v) => {
 			const year = new Date(v.date).getFullYear()
 			if (!arr.find((item) => item.value === year)) {
 				arr.push({
 					label: String(year),
 					value: year
 				})
 			}
 		})
 		return arr
 	})
 	const FormatDate = (value = new Date(), format: string = 'YYYY-MM-DD HH:mm:ss') => {
 		const d = new Date(value)
 		if (!d || isNaN(d.getTime())) return 'Invalid Date'
 		const pad = (n) => String(n).padStart(2, '0')
 		const months = [
 			'Jan',
 			'Feb',
 			'Mar',
 			'Apr',
 			'May',
 			'Jun',
 			'Jul',
 			'Aug',
 			'Sep',
 			'Oct',
 			'Nov',
 			'Dec'
 		]
 		const tokens = {
 			YYYY: d.getFullYear(),
 			YY: String(d.getFullYear()).slice(-2),
 			MM: pad(d.getMonth() + 1),
 			M: d.getMonth() + 1,
 			SM: months[d.getMonth()],
 			DD: pad(d.getDate()),
 			D: d.getDate(),
 			HH: pad(d.getHours()),
 			H: d.getHours(),
 			hh: pad(d.getHours() % 12 || 12),
 			h: d.getHours() % 12 || 12,
 			mm: pad(d.getMinutes()),
 			m: d.getMinutes(),
 			ss: pad(d.getSeconds()),
 			s: d.getSeconds(),
 			A: d.getHours() < 12 ? 'AM' : 'PM',
 			a: d.getHours() < 12 ? 'am' : 'pm'
 		}
 		const reg = new RegExp(Object.keys(tokens).join('|'), 'g')
 		return format.replace(reg, (match) => tokens[match])
 	}
 </script>
 <style scoped lang="less">
 	.media {
 		> * {
 			position: relative;
 			z-index: 1;
 		}
 		> .bg {
 			height: 464px;
 			width: 100%;
 			object-fit: cover;
 			position: fixed;
 			top: 0;
 			z-index: 0;
 		}
 		> .header {
 			height: 464px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			> h1 {
 				font-size: 64px;
 				font-weight: 600;
 				letter-spacing: 2px;
 				color: #fff;
 			}
 		}
 		> .content {
 			width: 100%;
 			padding: 100px 0;
 			background-color: #fff;
 			font-size: 14px;
 			> .box {
 				max-width: 1140px;
 				margin: 0 auto;
 				> .nav {
 					display: flex;
 					align-items: center;
 					gap: 30px;
 					> span {
 						--background-color: #a4004f;
 						line-height: 34px;
 						color: #333;
 					}
 				}
 				> .list {
 					padding: 14px;
 					> div {
 						animation: opacity-in 0.3s ease-in-out;
 						margin-top: 14px;
 						margin-bottom: 10px;
 						display: flex;
 						> .date {
 							min-width: 130px;
 							margin-right: 10px;
 							color: #999;
 						}
 						> .text {
 							color: #222;
 						}
 					}
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/media/list-en.js
+++ b/src/pages/media/list-en.js
@@ -0,0 +1,326 @@
 export default [
 	{
 		"date": 1745942400000,
 		"text": "Congratulations to Code-Create for being named one of Hong Kong’s Hottest Startups of 2025"
 	},
 	{
 		"date": 1745078400000,
 		"text": "AI-Powered Design Curriculum: Pioneering Creativity in Fashion Education"
 	},
 	{
 		"date": 1744732800000,
 		"text": "Code-Create x BIFU: Breakthrough in the AI Era"
 	},
 	{
 		"date": 1744214400000,
 		"text": "South Korean brand BESFXXK leveraged AiDA to create its 2025 FW ready-to-wear collection."
 	},
 	{
 		"date": 1744041600000,
 		"text": "AiDA: Accelerating Fashion Design Efficiency by Over 60%"
 	},
 	{
 		"date": 1743436800000,
 		"text": "Ms. Kim Wong Breaks Down How AI Is Reshaping Sustainable Fashion"
 	},
 	{
 		"date": 1743350400000,
 		"text": "The AiDA Workshop was successfully held in Shenzhen"
 	},
 	{
 		"date": 1741708800000,
 		"text": "AiDA x SFT Fashion AI Award Successfully Finished"
 	},
 	{
 		"date": 1741276800000,
 		"text": "Feminine Power: Ms. Kim Wong's Journey in Fashion and AI"
 	},
 	{
 		"date": 1739980800000,
 		"text": "Achieving Excellence in Design within an Hour!"
 	},
 	{
 		"date": 1739894400000,
 		"text": "Brainstorm with AI！！"
 	},
 	{
 		"date": 1735574400000,
 		"text": "New Year 2025！Let's kick off the year with a burst of inspiration and design"
 	},
 	{
 		"date": 1735488000000,
 		"text": "Announcing the Finalists for AiDA Fashion AI Award"
 	},
 	{
 		"date": 1733500800000,
 		"text": "Code-Create's CEO Kim Wong Honored with Best Paper Award at 2024 International Fashion Conference"
 	},
 	{
 		"date": 1733500800000,
 		"text": "【2024 FABI KOREA Conference】：Revolutionizing Fashion Design with AiDA"
 	},
 	{
 		"date": 1732723200000,
 		"text": "Hanyang University Meets AiDA: A Fusion of Creativity and Technology"
 	},
 	{
 		"date": 1731513600000,
 		"text": "AiDA Workshop"
 	},
 	{
 		"date": 1731513600000,
 		"text": "AiDA X SFT AI Fashion Award 2024"
 	},
 	{
 		"date": 1725379200000,
 		"text": "Hong Kong’s fashion tech start-up raises funds, eyes mainland, South Korea growth markets"
 	},
 	{
 		"date": 1721750400000,
 		"text": "AiDA@Victoria and Albert Museum, London: Fusing Cultural Heritage with Fashion's Future"
 	},
 	{
 		"date": 1714752000000,
 		"text": "Code-Create's AiDA Wins Prestigious iF DESIGN AWARD 2024 for Revolutionary Fashion AI Solution!"
 	},
 	{
 		"date": 1702569600000,
 		"text": "Revolutionizing the Runway: An Interview with the Minds Behind AiDA and Code-Create"
 	},
 	{
 		"date": 1702224000000,
 		"text": "AiDA in \"The State of Fashion 2024\" by The Business of Fashion & McKinsey & Company"
 	},
 	{
 		"date": 1674057600000,
 		"text": "What Does The AI Design Hype Mean For Fashion?"
 	},
 	{
 		"date": 1673193600000,
 		"text": "Artificial intelligence meets fashion: How AiDA is disrupting design"
 	},
 	{
 		"date": 1671638400000,
 		"text": "Artificial Intelligence Times 인공지능으로 패션 패러다임 바꾼다!... 홍콩 '코드 크리에이트', 세계 첫 패션 AI 플랫폼 선보여"
 	},
 	{
 		"date": 1671638400000,
 		"text": "Chill Blog Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "AsiaOne Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Hinet Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "HiNet生活志 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "iFeng (凤凰网大风号) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Intellasia.Net Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "IT News Africa Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "IT News Online Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "MeNews Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Newswire 코드-크리에이트, 오리지널 디자인용 패션 AI 플랫폼 선봬"
 	},
 	{
 		"date": 1671552000000,
 		"text": "SBS 코드-크리에이트, 오리지널 디자인용 패션 AI 플랫폼 선봬"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Sohu (搜狐) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Taiwan News Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Tencent (腾讯企鹅号) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "The Hans India Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "United Daily News Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Vietnam Insider Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Australia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Hong Kong Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance New Zealand Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Singapore Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Indonesia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Malaysia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Philippines Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Taiwan Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "匯港資訊 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "南洋視界 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "南洋視界 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "台灣經濟日報 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "台灣英文新聞 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "商業焦點 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "奧丁丁新聞 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "媒體拓展 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "愛威信3C科技生活 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新加坡 Asiaone 新聞網 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪香港 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪香港 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新頭條 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "經濟通 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "經濟通 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA, 由AiDLab研發,帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "華富財經 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "觀傳媒 全球首個｜AI時裝設計助理系統「AiDA」面市"
 	},
 	{
 		"date": 1671552000000,
 		"text": "財經智珠網 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "香港矽谷 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "馬來郵報 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Finance 730 AiDLab 主辦的「FASHION X AI 時裝匯演」昨在 M+ 舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Infocast AiDLab主辦的「FASHIONXAI時裝匯演」昨在M+舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Quamnet AiDLab主辦的「FASHIONXAI時裝匯演」昨在M+舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "紫荊App(科创) “時尚 x 人工智能: 2022-2023” 國際匯展在M+掀起時裝業革命"
 	},
 	{
 		"date": 1671465600000,
 		"text": "紫荊雜誌 “時尚 x 人工智能: 2022-2023” 國際匯展在M+掀起時裝業革命"
 	},
 	{
 		"date": 1671379200000,
 		"text": "Vogue Hong Kong 專訪 Anteprima 創意總監 Izumi Ogino 與 AiDLab 總監，如何透過 AI 技術打造特色服裝"
 	},
 	{
 		"date": 1670515200000,
 		"text": "香港電台 AiDLab黃偉強講人工智能時裝設計"
 	},
 	{
 		"date": 1669910400000,
 		"text": "香港電台 【財經新思維】時裝設計與科技嘅結合，會帶來咩嘢效果？"
 	},
 	{
 		"date": 1669564800000,
 		"text": "明周Inner AI技術能取替真人嗎？AI時裝設計系統AiDA 與Anteprima聯乘"
 	}
 ]
--- a/src/pages/media/list-zh-cn.js
+++ b/src/pages/media/list-zh-cn.js
@@ -0,0 +1,330 @@
 export default [
 	{
 		"date": 1745942400000,
 		"text": "恭喜 Code-Create 荣登香港2025年最热门初创企业榜单"
 	},
 	{
 		"date": 1745078400000,
 		"text": "AI设计课程：在时尚教育领域开创性地激发创造力"
 	},
 	{
 		"date": 1744732800000,
 		"text": "Code-Create x BIFU：AI时代下设计师如何破局"
 	},
 	{
 		"date": 1744214400000,
 		"text": "来自韩国品牌BESFXXK利用AiDA制作的2025FW系列成衣"
 	},
 	{
 		"date": 1744041600000,
 		"text": "AiDA：让时尚设计效率提升超60%"
 	},
 	{
 		"date": 1743436800000,
 		"text": "走进港理课堂：解码AI如何重塑可持续时尚"
 	},
 	{
 		"date": 1743350400000,
 		"text": "內地首場AiDA 深圳 Workshop 成功舉辦"
 	},
 	{
 		"date": 1741708800000,
 		"text": "AiDA x SFT 时尚AI大赛圆满落幕"
 	},
 	{
 		"date": 1741276800000,
 		"text": "不被定义的女性力量——Kim女士的时尚与AI之旅"
 	},
 	{
 		"date": 1739980800000,
 		"text": "一小时内的卓越设计实现"
 	},
 	{
 		"date": 1739894400000,
 		"text": "与AI来一场头脑风暴"
 	},
 	{
 		"date": 1736092800000,
 		"text": "梦想不分年龄！！Code-Create 首席执行官 Kim Wong 在 Henrietta 中学的鼓舞人心演讲"
 	},
 	{
 		"date": 1735574400000,
 		"text": "搭上2025的列车！打开新设计的大门"
 	},
 	{
 		"date": 1735488000000,
 		"text": "AiDA AI时尚比赛入围选手公布"
 	},
 	{
 		"date": 1733500800000,
 		"text": "Code-Create首席执行官王剑虹（Kim Wong）荣获2024年国际时尚大会最佳论文奖"
 	},
 	{
 		"date": 1733500800000,
 		"text": "【2024 FABI KOREA】：AiDA引领时尚设计变革"
 	},
 	{
 		"date": 1732723200000,
 		"text": "韩国汉阳大师生的AiDA体验日——与未来设计对话"
 	},
 	{
 		"date": 1731513600000,
 		"text": "AiDA 工作坊"
 	},
 	{
 		"date": 1731513600000,
 		"text": "AiDA X SFT AI Fashion Award 2024"
 	},
 	{
 		"date": 1725379200000,
 		"text": "Hong Kong’s fashion tech start-up raises funds, eyes mainland, South Korea growth markets"
 	},
 	{
 		"date": 1721750400000,
 		"text": "AiDA@Victoria and Albert Museum, London: Fusing Cultural Heritage with Fashion's Future"
 	},
 	{
 		"date": 1714752000000,
 		"text": "Code-Create's AiDA Wins Prestigious iF DESIGN AWARD 2024 for Revolutionary Fashion AI Solution!"
 	},
 	{
 		"date": 1702569600000,
 		"text": "Revolutionizing the Runway: An Interview with the Minds Behind AiDA and Code-Create"
 	},
 	{
 		"date": 1702224000000,
 		"text": "AiDA in \"The State of Fashion 2024\" by The Business of Fashion & McKinsey & Company"
 	},
 	{
 		"date": 1674057600000,
 		"text": "What Does The AI Design Hype Mean For Fashion?"
 	},
 	{
 		"date": 1673193600000,
 		"text": "Artificial intelligence meets fashion: How AiDA is disrupting design"
 	},
 	{
 		"date": 1671638400000,
 		"text": "Artificial Intelligence Times 인공지능으로 패션 패러다임 바꾼다!... 홍콩 '코드 크리에이트', 세계 첫 패션 AI 플랫폼 선보여"
 	},
 	{
 		"date": 1671638400000,
 		"text": "Chill Blog Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "AsiaOne Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Hinet Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "HiNet生活志 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "iFeng (凤凰网大风号) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Intellasia.Net Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "IT News Africa Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "IT News Online Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "MeNews Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Newswire 코드-크리에이트, 오리지널 디자인용 패션 AI 플랫폼 선봬"
 	},
 	{
 		"date": 1671552000000,
 		"text": "SBS 코드-크리에이트, 오리지널 디자인용 패션 AI 플랫폼 선봬"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Sohu (搜狐) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Taiwan News Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Tencent (腾讯企鹅号) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "The Hans India Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "United Daily News Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Vietnam Insider Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Australia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Hong Kong Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance New Zealand Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Singapore Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Indonesia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Malaysia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Philippines Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Taiwan Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "匯港資訊 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "南洋視界 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "南洋視界 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "台灣經濟日報 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "台灣英文新聞 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "商業焦點 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "奧丁丁新聞 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "媒體拓展 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "愛威信3C科技生活 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新加坡 Asiaone 新聞網 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪香港 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪香港 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新頭條 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "經濟通 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "經濟通 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA, 由AiDLab研發,帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "華富財經 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "觀傳媒 全球首個｜AI時裝設計助理系統「AiDA」面市"
 	},
 	{
 		"date": 1671552000000,
 		"text": "財經智珠網 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "香港矽谷 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "馬來郵報 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Finance 730 AiDLab 主辦的「FASHION X AI 時裝匯演」昨在 M+ 舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Infocast AiDLab主辦的「FASHIONXAI時裝匯演」昨在M+舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Quamnet AiDLab主辦的「FASHIONXAI時裝匯演」昨在M+舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "紫荊App(科创) “時尚 x 人工智能: 2022-2023” 國際匯展在M+掀起時裝業革命"
 	},
 	{
 		"date": 1671465600000,
 		"text": "紫荊雜誌 “時尚 x 人工智能: 2022-2023” 國際匯展在M+掀起時裝業革命"
 	},
 	{
 		"date": 1671379200000,
 		"text": "Vogue Hong Kong 專訪 Anteprima 創意總監 Izumi Ogino 與 AiDLab 總監，如何透過 AI 技術打造特色服裝"
 	},
 	{
 		"date": 1670515200000,
 		"text": "香港電台 AiDLab黃偉強講人工智能時裝設計"
 	},
 	{
 		"date": 1669910400000,
 		"text": "香港電台 【財經新思維】時裝設計與科技嘅結合，會帶來咩嘢效果？"
 	},
 	{
 		"date": 1669564800000,
 		"text": "明周Inner AI技術能取替真人嗎？AI時裝設計系統AiDA 與Anteprima聯乘"
 	}
 ]
--- a/src/pages/media/list-zh-tw.js
+++ b/src/pages/media/list-zh-tw.js
@@ -0,0 +1,334 @@
 export default [
 	{
 		"date": 1745942400000,
 		"text": "恭喜 Code-Create 榮登香港2025年最熱門初創企業榜單"
 	},
 	{
 		"date": 1745078400000,
 		"text": "AI設計課程：在時尚教育領域開創性地激發創造力"
 	},
 	{
 		"date": 1744732800000,
 		"text": "Code-Create x BIFU：AI時代下設計師如何破局"
 	},
 	{
 		"date": 1744214400000,
 		"text": "來自韓國品牌BESFXXK利用AiDA製作的2025FW系列成衣"
 	},
 	{
 		"date": 1744041600000,
 		"text": "AiDA：讓時尚設計效率提升超60%"
 	},
 	{
 		"date": 1743436800000,
 		"text": "走進港理課堂：解碼AI如何重塑可持續時尚"
 	},
 	{
 		"date": 1743350400000,
 		"text": "內地首場AiDA 深圳 Workshop 成功舉辦"
 	},
 	{
 		"date": 1741708800000,
 		"text": "AiDA x SFT 時尚AI大賽圓滿落幕"
 	},
 	{
 		"date": 1741276800000,
 		"text": "不被定義的女性力量——Kim女士的時尚與AI之旅"
 	},
 	{
 		"date": 1739980800000,
 		"text": "一小時內的卓越設計實現"
 	},
 	{
 		"date": 1739894400000,
 		"text": "與AI來一場頭腦風暴"
 	},
 	{
 		"date": 1736092800000,
 		"text": "夢想不分年齡！！Code-Create 首席執行官 Kim Wong 在 Henrietta 中學的鼓舞人心演講"
 	},
 	{
 		"date": 1735488000000,
 		"text": "AiDA AI時尚比賽入圍選手公布"
 	},
 	{
 		"date": 1735574400000,
 		"text": "搭上2025的列車！打開新設計的大門"
 	},
 	{
 		"date": 1735488000000,
 		"text": "AiDA AI時尚比賽入圍選手公布"
 	},
 	{
 		"date": 1733500800000,
 		"text": "Code-Create首席執行官王劍虹（Kim Wong）榮獲2024年國際時尚大會最佳論文獎"
 	},
 	{
 		"date": 1733500800000,
 		"text": "【2024 FABI KOREA】：AiDA引領時尚設計變革"
 	},
 	{
 		"date": 1732723200000,
 		"text": "韓國漢陽大師生的AiDA體驗日——與未來設計對話"
 	},
 	{
 		"date": 1731513600000,
 		"text": "AiDA 工作坊"
 	},
 	{
 		"date": 1731513600000,
 		"text": "AiDA X SFT AI時尚設計比賽2024"
 	},
 	{
 		"date": 1725379200000,
 		"text": "政府資助初創公司獲本地創投基金入股逾200萬美元 拓展AI結合時裝設計"
 	},
 	{
 		"date": 1721750400000,
 		"text": "AiDA亮相倫敦維多利亞與艾伯特博物館：融合文化傳承與時尚未來"
 	},
 	{
 		"date": 1714752000000,
 		"text": "AiDA贏得了2024年iF設計獎，這是一款革命性的時尚AI解決方案"
 	},
 	{
 		"date": 1702569600000,
 		"text": "變革T台：AiDA與Code-Create背後的創意人專訪"
 	},
 	{
 		"date": 1702224000000,
 		"text": "AiDA榮登由Business of Fashion & McKinsey & Company發佈的\"The State of Fashion 2024\"報告"
 	},
 	{
 		"date": 1674057600000,
 		"text": "What Does The AI Design Hype Mean For Fashion?"
 	},
 	{
 		"date": 1673193600000,
 		"text": "Artificial intelligence meets fashion: How AiDA is disrupting design"
 	},
 	{
 		"date": 1671638400000,
 		"text": "Artificial Intelligence Times 인공지능으로 패션 패러다임 바꾼다!... 홍콩 '코드 크리에이트', 세계 첫 패션 AI 플랫폼 선보여"
 	},
 	{
 		"date": 1671638400000,
 		"text": "Chill Blog Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "AsiaOne Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Hinet Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "HiNet生活志 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "iFeng (凤凰网大风号) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Intellasia.Net Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "IT News Africa Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "IT News Online Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "MeNews Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Newswire 코드-크리에이트, 오리지널 디자인용 패션 AI 플랫폼 선봬"
 	},
 	{
 		"date": 1671552000000,
 		"text": "SBS 코드-크리에이트, 오리지널 디자인용 패션 AI 플랫폼 선봬"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Sohu (搜狐) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Taiwan News Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Tencent (腾讯企鹅号) Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "The Hans India Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "United Daily News Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Vietnam Insider Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Australia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Hong Kong Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance New Zealand Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo Finance Singapore Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Indonesia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Malaysia Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Philippines Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "Yahoo News Taiwan Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "匯港資訊 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "南洋視界 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "南洋視界 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "台灣經濟日報 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "台灣英文新聞 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "商業焦點 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "奧丁丁新聞 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "媒體拓展 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "愛威信3C科技生活 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新加坡 Asiaone 新聞網 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪香港 Code-Create 推出全球首个以设计师原创灵感主导的时尚AI平台AiDA， 由AiDLab研发，带来无限设计方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新浪香港 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "新頭條 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "經濟通 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671552000000,
 		"text": "經濟通 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA, 由AiDLab研發,帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "華富財經 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "觀傳媒 全球首個｜AI時裝設計助理系統「AiDA」面市"
 	},
 	{
 		"date": 1671552000000,
 		"text": "財經智珠網 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "香港矽谷 Code-Create 推出全球首個以設計師原創靈感主導的時尚AI平台AiDA， 由AiDLab研發，帶來無限設計方案"
 	},
 	{
 		"date": 1671552000000,
 		"text": "馬來郵報 Code-Create Introduces AiDA by AiDLab, The World’s First Fashion AI Platform For Limitless Original Designs Based On Designer’s Creative Inspirations"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Finance 730 AiDLab 主辦的「FASHION X AI 時裝匯演」昨在 M+ 舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Infocast AiDLab主辦的「FASHIONXAI時裝匯演」昨在M+舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "Quamnet AiDLab主辦的「FASHIONXAI時裝匯演」昨在M+舉行"
 	},
 	{
 		"date": 1671465600000,
 		"text": "紫荊App(科创) “時尚 x 人工智能: 2022-2023” 國際匯展在M+掀起時裝業革命"
 	},
 	{
 		"date": 1671465600000,
 		"text": "紫荊雜誌 “時尚 x 人工智能: 2022-2023” 國際匯展在M+掀起時裝業革命"
 	},
 	{
 		"date": 1671379200000,
 		"text": "Vogue Hong Kong 專訪 Anteprima 創意總監 Izumi Ogino 與 AiDLab 總監，如何透過 AI 技術打造特色服裝"
 	},
 	{
 		"date": 1670515200000,
 		"text": "香港電台 AiDLab黃偉強講人工智能時裝設計"
 	},
 	{
 		"date": 1669910400000,
 		"text": "香港電台 【財經新思維】時裝設計與科技嘅結合，會帶來咩嘢效果？"
 	},
 	{
 		"date": 1669564800000,
 		"text": "明周Inner AI技術能取替真人嗎？AI時裝設計系統AiDA 與Anteprima聯乘"
 	}
 ]
--- a/src/pages/my-account/account-info.vue
+++ b/src/pages/my-account/account-info.vue
@@ -0,0 +1,115 @@
 <template>
 	<div class="account-info">
 		<div class="left">
 			<div class="info">
 				<img alt="" src="" class="avatar" />
 				<div class="name">12312</div>
 				<div class="email">12312@example.com</div>
 			</div>
 			<router-link
 				class="link"
 				v-for="(v, i) in navs"
 				:key="i"
 				:to="v.path"
 				@click="typeof v.onClick === 'function' && v.onClick()"
 			>
 				<span class="iconfont" :class="v.icon"></span>
 				<span class="label">{{ v.label }}</span>
 			</router-link>
 		</div>
 		<div class="content">
 			<router-view></router-view>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import { useUserInfoStore } from '@/stores/userInfo'
 	const userInfoStore = useUserInfoStore()
 	const navs = ref([
 		{
 			path: '/my-account',
 			label: 'Dashboard',
 			icon: 'icon-dashboard'
 		},
 		{
 			path: '/my-account/orders',
 			label: 'Orders',
 			icon: 'icon-orders'
 		},
 		{
 			path: '/my-account/subscriptions',
 			label: 'Subscriptions',
 			icon: 'icon-subscriptions'
 		},
 		{
 			path: '/my-account/address',
 			label: 'Address',
 			icon: 'icon-address'
 		},
 		{
 			path: '/my-account/payment-methods',
 			label: 'Payment methods',
 			icon: 'icon-duidiaojiaohuanduihuan'
 		},
 		{
 			path: '/my-account/details',
 			label: 'Account details',
 			icon: 'icon-tubiao-'
 		},
 		{
 			path: '/my-account',
 			label: 'Log out',
 			icon: 'icon-tuichu',
 			onClick: () => {
 				console.log('logout')
 				userInfoStore.setToken('')
 			}
 		}
 	])
 </script>
 <style scoped lang="less">
 	.account-info {
 		display: flex;
 		> .left {
 			width: 270px;
 			border-right: 1px solid #e1e1e1;
 			margin-right: 30px;
 			> .info {
 				margin-bottom: 30px;
 				> .avatar {
 					width: 86px;
 					height: 86px;
 					margin-bottom: 15px;
 					border-radius: 50%;
 				}
 				> .name {
 					color: #222;
 					font-size: 16px;
 				}
 				> .email {
 					color: #333;
 					font-size: 14px;
 				}
 			}
 			> .link {
 				display: flex;
 				align-items: center;
 				width: 100%;
 				color: #222;
 				font-size: 16px;
 				text-decoration: none;
 				padding: 7px 0;
 				line-height: 1.6;
 				> .iconfont {
 					font-size: 20px;
 					margin-right: 5px;
 				}
 			}
 		}
 		> .content {
 			flex: 1;
 		}
 	}
 </style>
--- a/src/pages/my-account/address.vue
+++ b/src/pages/my-account/address.vue
@@ -0,0 +1,37 @@
 <template>
 	<div class="address">
 		<div class="tip">The following addresses will be used on the checkout page by default.</div>
 		<h2>Billing address</h2>
 		<div class="header">
 			<router-link to="/my-account/edit-address">Edit Billing address</router-link>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import tipBox from './tip-box.vue'
 </script>
 <style scoped lang="less">
 	.address {
 		width: 100%;
 		> .tip {
 			margin-bottom: 20px;
 		}
 		> h2 {
 			text-transform: uppercase;
 			margin-bottom: 10px;
 		}
 		> .header {
 			text-transform: uppercase;
 			border-bottom: 1px solid #e1e1e1;
 			height: 18px;
 			> a {
 				color: #222;
 				font-size: 14px;
 				text-decoration: none;
 				float: right;
 			}
 		}
 	}
 </style>
--- a/src/pages/my-account/css/style.css
+++ b/src/pages/my-account/css/style.css
@@ -0,0 +1,107 @@
 .login,
 .register {
  padding: 35px;
  border: 1px solid #e1e1e1;
  background-color: #fff;
  border-radius: 5px;
 }
 .login > h2,
 .register > h2 {
  font-weight: 600;
  color: #222;
  font-size: 24px;
  margin-bottom: 24px;
 }
 .login > form > *,
 .register > form > * {
  margin-bottom: 20px;
 }
 .login > form > .form-item,
 .register > form > .form-item {
  display: flex;
  flex-direction: column;
 }
 .login > form > .form-item > label,
 .register > form > .form-item > label {
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  font-weight: 400;
 }
 .login > form > .form-item > label::after,
 .register > form > .form-item > label::after {
  content: ' *';
  color: #f00;
 }
 .login > form > .form-item > .input-container > input,
 .register > form > .form-item > .input-container > input,
 .login > form > .form-item > input,
 .register > form > .form-item > input {
  width: 100%;
  height: 35px;
  padding: 0 17px;
  font-size: 16px;
  border: 1px solid #e1e1e1;
  outline: none;
 }
 .login > form > .form-item > .input-container > input:focus,
 .register > form > .form-item > .input-container > input:focus,
 .login > form > .form-item > input:focus,
 .register > form > .form-item > input:focus {
  border-color: #000;
 }
 .login > form > .form-item > .input-container,
 .register > form > .form-item > .input-container {
  position: relative;
 }
 .login > form > .form-item > .input-container > input,
 .register > form > .form-item > .input-container > input {
  padding-right: 35px;
 }
 .login > form > .form-item > .input-container > .iconfont,
 .register > form > .form-item > .input-container > .iconfont {
  position: absolute;
  right: 10px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
 }
 .login > form > .remember,
 .register > form > .remember {
  display: flex;
  align-items: center;
 }
 .login > form > .remember > input,
 .register > form > .remember > input {
  margin: 4px 8px 0 0;
 }
 .login > form > .remember > label,
 .register > form > .remember > label {
  color: #333;
 }
 .login > form > .remember > .link,
 .register > form > .remember > .link {
  margin-left: auto;
  color: #222;
 }
 .login > form > .subscribe,
 .register > form > .subscribe {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
 }
 .login > form > .tip,
 .register > form > .tip {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
 }
 .login > form > .tip > a,
 .register > form > .tip > a {
  color: #000;
 }
--- a/src/pages/my-account/index.vue
+++ b/src/pages/my-account/index.vue
@@ -0,0 +1,61 @@
 <template>
 	<div class="my-account">
 		<div class="header">
 			<h1 class="title">
 				<span class="iconfont icon-tubiao-"></span>
 				<span>My account</span>
 			</h1>
 		</div>
 		<div class="content" v-if="!token">
 			<Login />
 			<Register />
 		</div>
 		<div class="content" v-else>
 			<AccountInfo />
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed } from 'vue'
 	import Login from './login.vue'
 	import Register from './register.vue'
 	import AccountInfo from './account-info.vue'
 	import { useUserInfoStore } from '@/stores/userInfo'
 	const userInfoStore = useUserInfoStore()
 	const token = computed(() => userInfoStore.state.token)
 </script>
 <style scoped lang="less">
 	.my-account {
 		background-color: #f9f9f9;
 		> .header {
 			border-top: var(--main-header-height, 85px) solid #000;
 			background-color: #666;
 			padding: 32px 0;
 			color: #fff;
 			margin-bottom: 32px;
 			> h1 {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				height: 80px;
 				> span {
 					font-size: 40px;
 					font-weight: 400;
 				}
 			}
 		}
 		> .content {
 			max-width: 1200px;
 			margin: 0 auto;
 			padding-bottom: 80px;
 			display: flex;
 			align-items: flex-start;
 			gap: 60px;
 			> * {
 				flex: 1;
 			}
 			animation: opacity-in 0.3s linear both;
 		}
 	}
 </style>
--- a/src/pages/my-account/less/style.less
+++ b/src/pages/my-account/less/style.less
@@ -0,0 +1,107 @@
 .login,
 .register {
 	padding: 35px;
 	border: 1px solid #e1e1e1;
 	background-color: #fff;
 	border-radius: 5px;
 	>h2 {
 		font-weight: 600;
 		color: #222;
 		font-size: 24px;
 		margin-bottom: 24px;
 	}
 	>form {
 		>* {
 			margin-bottom: 20px;
 		}
 		>.form-item {
 			display: flex;
 			flex-direction: column;
 			>label {
 				margin-bottom: 5px;
 				font-size: 16px;
 				line-height: 1.6;
 				color: #333;
 				font-weight: 400;
 				&::after {
 					content: ' *';
 					color: #f00;
 				}
 			}
 			>.input-container>input,
 			>input {
 				width: 100%;
 				height: 35px;
 				padding: 0 17px;
 				font-size: 16px;
 				border: 1px solid #e1e1e1;
 				outline: none;
 				&:focus {
 					border-color: #000;
 				}
 			}
 			>.input-container {
 				position: relative;
 				>input {
 					padding-right: 35px;
 				}
 				>.iconfont {
 					position: absolute;
 					right: 10px;
 					top: 0;
 					height: 100%;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 					font-size: 18px;
 					cursor: pointer;
 				}
 			}
 		}
 		>.remember {
 			display: flex;
 			align-items: center;
 			>input {
 				margin: 4px 8px 0 0;
 			}
 			>label {
 				color: #333;
 			}
 			>.link {
 				margin-left: auto;
 				color: #222;
 			}
 		}
 		>.subscribe {
 			font-size: 16px;
 			line-height: 1.6;
 			color: #333;
 		}
 		>.tip {
 			font-size: 16px;
 			line-height: 1.6;
 			color: #333;
 			>a {
 				color: #000;
 			}
 		}
 	}
 }
--- a/src/pages/my-account/login.vue
+++ b/src/pages/my-account/login.vue
@@ -0,0 +1,62 @@
 <template>
 	<div class="login">
 		<h2>Login</h2>
 		<form @submit.prevent="handleSubmit">
 			<div class="form-item">
 				<label for="email">Username or email address</label>
 				<input type="email" id="email" name="email" required v-model="fromData.email" />
 			</div>
 			<div class="form-item">
 				<label for="password">Password</label>
 				<div class="input-container">
 					<input
 						id="password"
 						name="password"
 						required
 						:type="passShow ? 'text' : 'password'"
 						v-model="fromData.password"
 					/>
 					<span
 						class="iconfont"
 						:class="[passShow ? 'icon-hide' : 'icon-show']"
 						@click="passShow = !passShow"
 					></span>
 				</div>
 			</div>
 			<div class="remember">
 				<input type="checkbox" id="remember" name="remember" v-model="remember" />
 				<label for="remember">Remember me</label>
 				<router-link class="link" to="/my-account/lost-password"
 					>Lost your password?</router-link
 				>
 			</div>
 			<button type="submit" custom>LOG IN</button>
 		</form>
 	</div>
 </template>
 <script setup lang="ts">
 	import { ref } from 'vue'
 	import { useGlobalStore } from '@/stores/global'
 	const globalStore = useGlobalStore()
 	import { useUserInfoStore } from '@/stores/userInfo'
 	const userInfoStore = useUserInfoStore()
 	const passShow = ref(false)
 	const remember = ref(false)
 	const fromData = ref({
 		email: '',
 		password: ''
 	})
 	const handleSubmit = () => {
 		console.log(fromData.value, remember.value)
 		globalStore.setLoading(true)
 		setTimeout(() => {
 			globalStore.setLoading(false)
 			userInfoStore.setToken('123456')
 		}, 1000)
 	}
 </script>
 <style scoped lang="less">
 	@import './less/style.less';
 </style>
--- a/src/pages/my-account/orders.vue
+++ b/src/pages/my-account/orders.vue
@@ -0,0 +1,15 @@
 <template>
 	<div class="orders">
 		<tip-box type="warning" title="No order has been made yet." />
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import tipBox from './tip-box.vue'
 </script>
 <style scoped lang="less">
 	.orders {
 		width: 100%;
 	}
 </style>
--- a/src/pages/my-account/payment-methods.vue
+++ b/src/pages/my-account/payment-methods.vue
@@ -0,0 +1,28 @@
 <template>
 	<div class="payment-methods">
 		<tip-box type="warning" title="No saved methods found." :is-show-link="false" />
 		<router-link to="#">
 			<button custom>Add payment method</button>
 		</router-link>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import tipBox from './tip-box.vue'
 </script>
 <style scoped lang="less">
 	.payment-methods {
 		width: 100%;
 		> a {
 			display: block;
 			margin-top: 22px;
 			width: auto;
 			> button {
 				width: auto;
 				padding: 0 30px;
 				text-transform: uppercase;
 			}
 		}
 	}
 </style>
--- a/src/pages/my-account/register.vue
+++ b/src/pages/my-account/register.vue
@@ -0,0 +1,78 @@
 <template>
 	<div class="register">
 		<h2>Register</h2>
 		<form @submit.prevent="handleSubmit">
 			<div class="form-item">
 				<label for="username">Username</label>
 				<input
 					type="username"
 					id="username"
 					name="username"
 					required
 					v-model="fromData.username"
 				/>
 			</div>
 			<div class="form-item">
 				<label for="email">Email address</label>
 				<input type="email" id="email" name="email" required v-model="fromData.email" />
 			</div>
 			<div class="form-item">
 				<label for="password">Password</label>
 				<div class="input-container">
 					<input
 						id="password"
 						name="password"
 						required
 						:type="passShow ? 'text' : 'password'"
 						v-model="fromData.password"
 					/>
 					<span
 						class="iconfont"
 						:class="[passShow ? 'icon-hide' : 'icon-show']"
 						@click="passShow = !passShow"
 					></span>
 				</div>
 			</div>
 			<div class="subscribe">
 				<input
 					type="checkbox"
 					id="subscribe"
 					name="subscribe"
 					v-model="fromData.subscribe"
 				/>
 				<label for="subscribe"
 					>Subscribe to Code Create product/service news and newsletter</label
 				>
 			</div>
 			<div class="tip">
 				Your personal data will be used to support your experience throughout this website,
 				to manage access to your account, and for other purposes described in our
 				<router-link class="link" to="/my-account/privacy-policy"
 					>Privacy Policy</router-link
 				>
 			</div>
 			<button type="submit" custom>REGISTER</button>
 		</form>
 	</div>
 </template>
 <script setup lang="ts">
 	import { ref } from 'vue'
 	import { useUserInfoStore } from '@/stores/userInfo'
 	const userInfoStore = useUserInfoStore()
 	const passShow = ref(false)
 	const remember = ref(false)
 	const fromData = ref({
 		username: '',
 		email: '',
 		password: '',
 		subscribe: false
 	})
 	const handleSubmit = () => {
 		console.log(fromData.value, remember.value)
 	}
 </script>
 <style scoped lang="less">
 	@import './less/style.less';
 </style>
--- a/src/pages/my-account/subscriptions.vue
+++ b/src/pages/my-account/subscriptions.vue
@@ -0,0 +1,15 @@
 <template>
 	<div class="subscriptions">
 		<tip-box type="success" title="You have no active subscriptions." />
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import tipBox from './tip-box.vue'
 </script>
 <style scoped lang="less">
 	.subscriptions {
 		width: 100%;
 	}
 </style>
--- a/src/pages/my-account/tip-box.vue
+++ b/src/pages/my-account/tip-box.vue
@@ -0,0 +1,41 @@
 <template>
 	<div class="tip-box">
 		<span class="iconfont" :class="[`icon-${type}`]"></span>
 		<div class="tip">{{ title }}</div>
 		<router-link v-if="isShowLink" class="link" to="/">Browse products</router-link>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	const props = defineProps({
 		type: {
 			default: 'warning',
 			type: String as () => 'success' | 'warning'
 		},
 		title: { default: '', type: String },
 		isShowLink: { default: true, type: Boolean }
 	})
 </script>
 <style scoped lang="less">
 	.tip-box {
 		width: 100%;
 		height: 48px;
 		background-color: #1565c0;
 		border-left: 5px solid rgba(0, 0, 0, 0.2);
 		display: flex;
 		align-items: center;
 		padding: 0 20px;
 		> * {
 			color: #fff;
 			font-size: 16px;
 		}
 		> .iconfont {
 			margin-right: 10px;
 			font-size: 18px;
 		}
 		> .tip {
 			flex: 1;
 		}
 	}
 </style>
--- a/src/pages/my-account/welcome.vue
+++ b/src/pages/my-account/welcome.vue
@@ -0,0 +1,64 @@
 <template>
 	<div class="welcome">
 		<h3 class="title">Welcome to your account page</h3>
 		<div class="tip">
 			Hi <b>XXX</b>, today is a great day to check your account page. You can check also:
 		</div>
 		<div class="buttons">
 			<router-link class="link" v-for="(v, i) in navs" :key="i" :to="v.path">
 				<button custom>
 					<span class="iconfont" :class="v.icon"></span>
 					<span class="label">{{ v.label }}</span>
 				</button>
 			</router-link>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	const navs = ref([
 		{
 			path: '/my-account/orders',
 			label: 'RECENT ORDERS',
 			icon: 'icon-orders'
 		},
 		{
 			path: '/my-account/address',
 			label: 'ADDRESSSES',
 			icon: 'icon-address'
 		},
 		{
 			path: '/my-account/details',
 			label: 'ACCOUNT DETAILS',
 			icon: 'icon-tubiao-'
 		}
 	])
 </script>
 <style scoped lang="less">
 	.welcome {
 		> .title {
 			font-weight: 600;
 			letter-spacing: 2px;
 			color: #222222;
 			font-size: 24px;
 			margin-bottom: 10px;
 		}
 		> .tip {
 			color: #333;
 			margin-bottom: 20px;
 		}
 		> .buttons {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			> .link {
 				margin: 0 4px;
 				flex: 1;
 				text-decoration: none;
 			}
 		}
 	}
 </style>
--- a/src/pages/others/disclaimer.vue
+++ b/src/pages/others/disclaimer.vue
@@ -0,0 +1,49 @@
 <template>
 	<div class="disclaimer">
 		<OthersHeader :title="$t('MainFooter.Disclaimer')" />
 		<div class="content">
 			<p>
 				The contents of this marketing material are fully protected by copyright and nothing
 				may be reused without permission.
 			</p>
 			<p>
 				All information and contents contained in this marketing material are provided for
 				reference only and should not be relied on as the basis for any decision making.
 				Code Create Limited shall make no representation or warranty and accept no
 				responsibility, express or implied, for the accuracy, completeness, reliability or
 				timeliness of the information and contents, or any opinions, findings, conclusions
 				or recommendations contained in this marketing material. Code Create Limited shall
 				have no legal liability or responsibility (including liability for negligence) for
 				any loss, damage, or injury (including death) which may result, whether directly or
 				indirectly, from the supply or use of this information.
 			</p>
 			<p>
 				In the event of concerns or queries arising from any of the contents of this
 				marketing material, independent professional advice should be sought.
 			</p>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import OthersHeader from './others-header.vue'
 </script>
 <style scoped lang="less">
 	.disclaimer {
 		border-top: var(--main-header-height) solid #000;
 		background-color: #f9f9f9;
 		> .content {
 			max-width: 1230px;
 			width: 100%;
 			margin: 0 auto;
 			padding: 25px 15px 80px;
 			line-height: 1.6;
 			color: #333;
 			font-weight: 400;
 			> p {
 				margin-bottom: 20px;
 			}
 		}
 	}
 </style>
--- a/src/pages/others/not-found-404.vue
+++ b/src/pages/others/not-found-404.vue
@@ -0,0 +1,62 @@
 <template>
 	<div class="not-found-404">
 		<OthersHeader :title="$t('PageNotFound')" />
 		<div class="content">
 			<h2>404</h2>
 			<h1>{{ $t('PageNotFoundTitle') }}</h1>
 			<p>{{ $t('PageNotFoundDesc') }}</p>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import OthersHeader from './others-header.vue'
 </script>
 <style scoped lang="less">
 	.not-found-404 {
 		border-top: var(--main-header-height) solid #000;
 		background-color: #f9f9f9;
 		> .content {
 			max-width: 1230px;
 			width: 100%;
 			margin: 0 auto;
 			padding: 120px 15px;
 			line-height: 1.6;
 			color: #333;
 			font-weight: 400;
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			color: #222;
 			> h2 {
 				font-size: 100px;
 				font-weight: 600;
 				letter-spacing: 2px;
 				background-image: url('@/assets/images/404.png');
 				background-size: auto 100%;
 				background-clip: text;
 				-webkit-background-clip: text;
 				-webkit-text-fill-color: transparent;
 				animation: bgImageAnim 7s linear infinite;
 				@keyframes bgImageAnim {
 					0% {
 						background-position-y: 0;
 					}
 					100% {
 						background-position-y: -200px;
 					}
 				}
 			}
 			> h1 {
 				font-size: 24px;
 				margin-bottom: 5px;
 				text-transform: uppercase;
 			}
 			> p {
 				color: #333;
 				margin-bottom: 20px;
 			}
 		}
 	}
 </style>
--- a/src/pages/others/others-header.vue
+++ b/src/pages/others/others-header.vue
@@ -0,0 +1,42 @@
 <template>
 	<div class="others-header">
 		<router-link to="/">
 			<span>{{ $t('MainHeader.Home') }}</span>
 			<span class="iconfont icon-arrow-right-bold"></span>
 		</router-link>
 		<h1 class="title">{{ title }}</h1>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	const props = defineProps({
 		title: { type: String, required: true }
 	})
 </script>
 <style scoped lang="less">
 	.others-header {
 		padding: 50px 0;
 		background-color: #666;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		> a {
 			font-size: 14px;
 			font-weight: 400;
 			color: #ffffff;
 			text-decoration: none;
 			> .iconfont {
 				font-size: 10px;
 				margin-left: 5px;
 			}
 		}
 		> .title {
 			font-size: 40px;
 			font-weight: 400;
 			line-height: 2;
 			text-transform: none;
 			color: #ffffff;
 		}
 	}
 </style>
--- a/src/pages/others/privacy-policy.vue
+++ b/src/pages/others/privacy-policy.vue
@@ -0,0 +1,116 @@
 <template>
 	<div class="privacy-policy">
 		<OthersHeader :title="$t('MainFooter.PrivacyPolicy')" />
 		<div class="content">
 			<p>
 				Please read this Privacy Policy Statement (“PPS”) to understand our policy and
 				practices on the collection, use, transfer, storage and processing of your personal
 				data. By accessing this Website, you are consenting to this PPS.
 			</p>
 			<ol>
 				<li>
 					Code Create Limited (“we”, “us” or “our”) pledges to comply with the
 					requirements of the Personal Data (Privacy) Ordinance. In doing so, we will
 					ensure compliance by our staff with the highest security and confidentiality
 					standards.
 				</li>
 				<li>
 					We protect the privacy of users of our website. Any personal data collected from
 					you will only be used for the specific purposes mentioned at the time of
 					collection or for purposes directly related to those specific purposes and/or
 					that mentioned in the relevant Personal Information Collection Statement.
 				</li>
 				<li>
 					We will retain your personal data only for so long as necessary to fulfill the
 					purpose of collection; and will erase your personal data thereafter. We will
 					ensure the security of your personal data and protect them from unauthorised
 					access.
 				</li>
 				<li>
 					We will keep your personal data confidential. Your personal data will be used
 					(and disclosed) to third parties for the purposes for which they were collected,
 					and where we are required to do so by law and as specified in the relevant
 					Personal Information Collection Statement.
 				</li>
 				<li>
 					We may keep an activity log that does not identify you individually and cannot
 					be used to determine the particular user in order to measure traffic, gauge the
 					popularity of different parts of our websites, gain general knowledge about the
 					users, and facilitate the enhancement of our websites. This information may
 					include the IP address, operating system and version, the type of network, the
 					type and configuration of your browser, the geo-location information and
 					identifiers of the device you used.
 				</li>
 				<li>
 					We use cookies to enhance your experience on this website (<strong>code-</strong
 					><strong>create.com.hk</strong>). Cookies are small pieces of data stored on
 					your computer or other devices when websites are loaded in a browser. We use
 					cookies to analyse website traffic, personalise website content and to make
 					targeted advertisements on third party websites. We use Google Analytics to
 					analyze usage trends at its website. We also use cookies at this website and
 					cookies set by Google Analytics to collect information on how visitors use our
 					website. Third parties such as YouTube and Google may set cookies, for example,
 					relating to the use of YouTube video players and targeted advertising
 					respectively. For further information, users should refer to the relevant third
 					parties’ cookies policy which may be amended from time to time. By continuing to
 					use this website, you agree to the use of these cookies. If you do not accept
 					the cookies or withdraw your consent, you will not able to use some of the
 					functions on this website.
 				</li>
 				<li>
 					This PPS is subject to change. Any changes will be posted on this page. Your
 					continued use of our website after the posting of such changes indicates your
 					acceptance to the same. In case of any inconsistency between the English and
 					Chinese versions, the English version shall prevail. If you have any enquiries,
 					please send an email to&nbsp;<strong
 						><a href="mailto:info@code-create.com.hk"
 							>info@code-create.com.hk</a
 						></strong
 					>.
 				</li>
 			</ol>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import OthersHeader from './others-header.vue'
 </script>
 <style scoped lang="less">
 	.privacy-policy {
 		border-top: var(--main-header-height) solid #000;
 		background-color: #f9f9f9;
 		> .content {
 			max-width: 1230px;
 			width: 100%;
 			margin: 0 auto;
 			padding: 25px 15px 80px;
 			line-height: 1.6;
 			color: #333;
 			font-weight: 400;
 			> p {
 				margin-bottom: 20px;
 			}
 			> ol {
 				padding-left: 20px;
 				margin: 0;
 				> li {
 					margin-bottom: 8px;
 					a,
 					strong {
 						text-decoration: none;
 						color: #222;
 					}
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/others/site-map.vue
+++ b/src/pages/others/site-map.vue
@@ -0,0 +1,97 @@
 <template>
 	<div class="site-map">
 		<OthersHeader :title="$t('MainFooter.SiteMap')" />
 		<div class="content">
 			<div>
 				<div>
 					<router-link to="/about-us"
 						><h3>{{ $t('MainHeader.AboutUs') }}</h3></router-link
 					>
 				</div>
 				<div>
 					<router-link to="/our-solutions"
 						><h3>{{ $t('MainHeader.OurSolutions') }}</h3></router-link
 					>
 					<router-link to="/aida">{{ $t('MainHeader.AiDA') }}</router-link>
 					<router-link to="/mixi">{{ $t('MainHeader.Mixi') }}</router-link>
 				</div>
 				<div>
 					<router-link to="#"
 						><h3>{{ $t('MainHeader.Communities') }}</h3></router-link
 					>
 					<router-link to="/events">{{ $t('MainHeader.Events') }}</router-link>
 					<router-link to="/user-stories">{{ $t('MainHeader.UserStories') }}</router-link>
 					<router-link to="/help-centre">{{ $t('MainHeader.HelpCentre') }}</router-link>
 				</div>
 			</div>
 			<div>
 				<div>
 					<router-link to="/contact-us"
 						><h3>{{ $t('MainHeader.ContactUs') }}</h3></router-link
 					>
 				</div>
 				<div>
 					<router-link to="/media"
 						><h3>{{ $t('MainHeader.Media') }}</h3></router-link
 					>
 				</div>
 				<div>
 					<router-link to="#"
 						><h3>{{ $t('MainFooter.Others') }}</h3></router-link
 					>
 					<router-link to="/privacy-policy">{{
 						$t('MainFooter.PrivacyPolicy')
 					}}</router-link>
 					<router-link to="/terms-of-use">{{ $t('MainFooter.TermsOfUse') }}</router-link>
 					<router-link to="/disclaimer">{{ $t('MainFooter.Disclaimer') }}</router-link>
 					<router-link to="/site-map">{{ $t('MainFooter.SiteMap') }}</router-link>
 				</div>
 			</div>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import OthersHeader from './others-header.vue'
 </script>
 <style scoped lang="less">
 	.site-map {
 		border-top: var(--main-header-height) solid #000;
 		background-color: #f9f9f9;
 		> .content {
 			max-width: 1230px;
 			width: 100%;
 			margin: 0 auto;
 			padding: 25px 15px 80px;
 			display: flex;
 			> div {
 				flex: 1;
 				padding: 10px 40px;
 				> div {
 					margin-bottom: 20px;
 					display: flex;
 					flex-direction: column;
 					&:last-child {
 						margin-bottom: 0;
 					}
 					a {
 						color: #888;
 						font-size: 16px;
 						text-decoration: none;
 						padding: 8px 0;
 						transition: all 0.3s ease-in-out;
 						&:hover {
 							color: #222;
 						}
 					}
 					h3 {
 						padding: 2px 0;
 						color: #000;
 						font-size: 20px;
 					}
 				}
 			}
 		}
 	}
 </style>
--- a/src/pages/others/terms-of-use.vue
+++ b/src/pages/others/terms-of-use.vue
@@ -0,0 +1,139 @@
 <template>
 	<div class="terms-of-use">
 		<OthersHeader :title="$t('MainFooter.TermsOfUse')" />
 		<div class="content">
 			<p>
 				Please read these Terms of Use carefully.&nbsp; By accessing this Website, you are
 				consenting to these Terms of Use.&nbsp; If you do not accept these Terms of Use, do
 				not access this Website.
 			</p>
 			<p>1.<strong>Website Contents</strong></p>
 			<p>
 				This Website of the Code Create Limited (“we”, “us”, “our”) is for general
 				reference.&nbsp; We may, at our absolute discretion and at any time, without prior
 				notice to you, add to, amend or remove material from this Website, or alter the
 				presentation, substance, or functionality of this Website.
 			</p>
 			<p>2.<strong>Links to and from this Website</strong></p>
 			<p>
 				The links on this Website may take you to third-party websites or services that are
 				not owned or controlled by us.&nbsp; You acknowledge and agree that we have no
 				control over, and assume no responsibility for the content, privacy policies, or
 				practices of any third party websites or services.&nbsp; Links to other websites do
 				not constitute an endorsement by us of such websites or the information, products,
 				advertising, or other materials available on those websites.
 			</p>
 			<p>3.<strong>Intellectual Property Rights</strong></p>
 			<p>
 				All intellectual property rights subsisting in respect of this Website belong to us
 				or have been lawfully licensed to us for use on this Website. All rights under
 				applicable laws are hereby reserved. Except with our express written permission, you
 				are not allowed to upload, post, publish, reproduce, transmit or distribute in any
 				way any component of this Website itself or create derivative works with respect
 				thereto, as this Website is copyrighted under applicable laws.
 			</p>
 			<p>
 				You may only download such part of this Website as is expressly permitted to be
 				downloaded for the purposes specified.&nbsp; You have no rights in or to the
 				contents and you will not use them except as permitted under these Terms of Use.
 			</p>
 			<p>4.<strong>Limited Liability and Warranty</strong></p>
 			<p>
 				This Website is provided by us on an “as is” and “as available” basis.&nbsp; All
 				information is for your general reference only. We do not accept any responsibility
 				whatsoever in respect of such information.&nbsp; We do not guarantee or assume any
 				responsibility that:
 			</p>
 			<p>
 				∙this Website is available or will be uninterrupted or error-free, or that defects
 				will be corrected;
 			</p>
 			<p>
 				∙the information on this Website is accurate, adequate, current or reliable, or may
 				be used for any purpose other than for general reference;
 			</p>
 			<p>
 				∙the information on this Website is free of defect, error, omission, virus or
 				anything which may change, erase, add to or damage your software, data or equipment;
 				or
 			</p>
 			<p>
 				∙the messages sent through the internet will be free from interception, corruption
 				or loss.
 			</p>
 			<p>
 				We make no representation that the information on this Website is appropriate or
 				available for use in any other jurisdictions.&nbsp; Those who access this Website
 				from other locations do so at their discretion and are solely responsible for
 				compliance with their laws and rules.
 			</p>
 			<p>5.<strong>Privacy Policy</strong></p>
 			<p>
 				For information about our privacy policies and practices, please refer to
 				our&nbsp;<strong
 					><a href="/privacy-policy" data-type="URL" data-id="/privacy-policy"
 						>Privacy Policy Statement</a
 					></strong
 				>. Where personal data is collected, you should also have reference to the relevant
 				Personal Information Collection Statement in the form through which your personal
 				data is collected.
 			</p>
 			<p>6.<strong>Governing Law and Jurisdiction</strong></p>
 			<p>
 				These Terms of Use shall be governed by the law of the Hong Kong Special
 				Administrative Region of the People’s Republic of China (“Hong Kong”). You agree to
 				submit to the non-exclusive jurisdiction of the Hong Kong courts.
 			</p>
 			<p>7.<strong>General Matters</strong></p>
 			<p>
 				These Terms of Use are subject to change.&nbsp; Any changes will be posted on this
 				page. Your continued use of our website after the posting of such changes indicates
 				your acceptance to the changes. In case of any inconsistency between the English and
 				Chinese versions, the English version shall prevail.
 			</p>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import OthersHeader from './others-header.vue'
 </script>
 <style scoped lang="less">
 	.terms-of-use {
 		border-top: var(--main-header-height) solid #000;
 		background-color: #f9f9f9;
 		> .content {
 			max-width: 1230px;
 			width: 100%;
 			margin: 0 auto;
 			padding: 25px 15px 80px;
 			line-height: 1.6;
 			color: #333;
 			font-weight: 400;
 			> p {
 				margin-bottom: 20px;
 			}
 		}
 	}
 </style>
--- a/src/pages/user-stories/index.vue
+++ b/src/pages/user-stories/index.vue
@@ -0,0 +1,21 @@
 <script setup lang="ts">
 import UserList from './user-list.vue'
 defineExpose({})
 </script>
 <template>
 	<div class="user-stores">
 		<div class="placeholder"></div>
 		<UserList></UserList>
 	</div>
 </template>
 <style lang="less" scoped>
 	.user-stores{
 		.placeholder{
 			height: var(--main-header-height, 100px);
 			width: 100%;
 			position: sticky;
 			top: 0;
 			background-color: #000;
 		}
 	}
 </style>
--- a/src/pages/user-stories/user-list.vue
+++ b/src/pages/user-stories/user-list.vue
@@ -0,0 +1,337 @@
 <script setup lang="ts">
 	import { ref } from "vue";
 	import MyEvent from "@/directives/myEvents";
 	const playVideo = (item)=>{
 		MyEvent.emit("playVideo",{
 			url: item.videoUrl,
 			poster: item.imgUrl,
 		});
 	}
 	const list = ref([
 		{
 			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.png',
 			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XULULU.mp4',
 			name: 'XULULU',
 			textList: [
 				'AiDA is a very interesting and creatively inspiring system that showcases limitless potential in fashion design. Traditional designers can typically create only a handful of styles in a day, whereas AiDA can generate multiple designs in an instant, making its efficiency incomparable to that of humans.',
 				'This high level of productivity makes AiDA an invaluable tool for designers, and the vast array of designs it produces also provides valuable learning opportunities. By analyzing and appreciating these designs, designers can gain inspiration and enhance their own creative skills.',
 				'Therefore, I believe that in the future, AiDA has the potential to become an essential tool for designers, driving innovation and transformation in the fashion industry.'
 			],
 		},
 		{
 			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau.png',
 			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yiu-Ching-Yau1.mp4',
 			name: 'Yiu Ching Yau',
 			textList: [
 				'Throughout the process of using AiDA, I deeply felt the significant impact of artificial intelligence on the future society. AI has provided me with a lot of innovative ideas for clothing design, such as the use of different garments, the combination of silhouettes and the matching of materials. Because of the intelligence of AI, I have received a lot of inspiration. AI’s intelligence has provided me with a lot of inspiration that I never thought of, and its convenient and fast design methods have also greatly promoted my creative process.',
 			],
 		},
 		{
 			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT-scaled.png',
 			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/XIEYAUKIT.mp4',
 			name: 'XIEYAUKIT',
 			textList: [
 				'Using AiDA has been a transformative experience in my design journey. The integration of technology and creativity has allowed me to explore new dimensions in my work. One of the most significant advantages of AiDA is its ability to automate repetitive tasks, such as creating style sketches. This automation has freed up valuable time, enabling me to focus on the more creative aspects of my designs. ',
 				'Reflecting on my experience with AiDA, I feel a renewed sense of excitement about the future of design. It has not only improved my skills but also opened my eyes to the endless possibilities that lie ahead when creativity meets technology.',
 			],
 		},
 		{
 			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai-scaled.jpg',
 			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Yuzhi-Lai1.mp4',
 			name: 'Yuzhi Lai',
 			textList: [
 				'During the process of using AiDA for fashion design, I experienced unprecedented convenience and efficiency. Especially in the stages of color extraction and generating design sketches, as well as further developing them into fashion rendering image, the powerful capabilities of AI technology left me deeply impressed.',
 				'Using AiDA for fashion design is a highly enjoyable and innovative experience. Despite some limitations, I still believe that AiDA has brought revolutionary changes to the field of fashion design. Its efficiency and convenience have greatly shortened the design cycle. I look forward to future breakthroughs in AiDA and the emergence of more stunning design works.',
 			],
 		},
 		{
 			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.png',
 			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2025/04/Cheung-Tsz-Ching.mp4',
 			name: 'Cheung Tsz Ching（Bobo）',
 			textList: [
 				'Through this competition, I had the opportunity to explore many different features of AiDA. Using AiDA allows me to design a collection step by step, starting from a moodboard. It provides the ability to edit outfit details, such as prints and colors. This feature makes it easier for the designs to align with my desired outcomes. Once completed, AiDA can generate real-life versions of the designs, making my work feel more complete. ',
 			],
 		},
 		{
 			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_INJURY_thumb.jpg',
 			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory3.mp4',
 			name: 'INJURY from Australia',
 			textList: [
 				'Regarding the user experience of AiDA, we would like to use five keywords to describe, which are “Surprise” “Easy”, “Unlimited”, “Automatic” and “Fast”.',
 			],
 		},
 		{
 			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Jae_thumb.jpg',
 			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory2.mp4',
 			name: 'BESFXXK from Korea',
 			textList: [
 				'Those keywords that come to my mind when describing the systems are “Safe”, “Fast”, “Friendly”, “Smart” and “Futuristic”',
 			],
 		},
 		{
 			imgUrl: 'https://code-create.com.hk/wp-content/uploads/2023/01/Aidlab_interview02_Mountain_thumb.jpg',
 			videoUrl: 'https://code-create.com.hk/wp-content/uploads/2026/03/UserStory1.mp4',
 			name: 'Mountain Yam from Hong Kong',
 			textList: [
 				'The process is “Simple and user-friendly”, and the system is “Efficient”, “Fruitful”, “Innovative” and “Solidarity”.',
 			],
 		},
 	])
 	const userList = ref([
 		{
 			profile:'https://code-create.com.hk/wp-content/uploads/2025/04/WhatsApp-Image-2025-04-23-at-18.36.16_740726a9-794x1024.jpg',
 			name: 'Prof. Jung',
 			school: 'Hanyang University Department of Clothing and Textiles',
 			info: 'In the “Digital Fashion Content Development” course, I’ve integrated the AiDA system into a 4-week mini-project with the goal of designing a “My Own Capsule Collection.” The class included a diverse group of students. Even those without prior knowledge of fashion design were able to create fun and imaginative designs within just three weeks using AiDA. Most notably, AiDA’s powerful generative AI system stimulated students’ creativity, enabling them to produce designs beyond what they thought they were capable of. Based on this experience, I summarized the impact of AiDA through a short rhyme: “No barrier to begin — that’s for sure, Ready to use everywhere, Boosting designer’s flair to dare.”',
 		},
 		{
 			profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_irene_siu-1-150x150.jpg',
 			name: 'Irene Siu',
 			info: 'The concept of AiDA has many potential applications in the fashion industry, which are still waiting for us to discover and develop.',
 		},
 		{
 			profile:'https://code-create.com.hk/wp-content/uploads/2025/04/userstory_joyce_chow-150x150.jpg',
 			name: 'Joyce Chow',
 			info: 'AiDA lets the fashion industry go into a new generation. A successful AiDA can help to push – eco-friendliness, which is one of the most crucial worldwide topics in the fashion industry.',
 		},
 		{
 			profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_cheryl_ho-150x150.jpg',
 			name: 'Cheryl Ho',
 			info: 'Apart from providing new elements to inform my design process, AiDA also inspires me by offering much more variety of proportions and outfit combinations.',
 		},
 		{
 			profile:'https://code-create.com.hk/wp-content/uploads/2023/02/userstory_minna_n_polam-150x150.jpg',
 			name: 'Minna & Polam',
 			info: 'AiDA helps us mix and match each item and generate colours so we can quickly see what it will look like – all items match together, and the effects come with different colours and patterns. It also assists us at the design development stage by learning our style and taste.',
 		},
 	])
 	defineExpose({})
 </script>
 <template>
 	<section class="user-list">
 		<div class="content">
 			<h2>User Stories</h2>
 		</div>
 	</section>
 	<section class="user-item" v-for="item in list" :key="item.name">
 		<div class="content">
 			<div class="video-box">
 				<img :src="item.imgUrl" alt="">
 				<span class="iconfont icon-bofang" @click="playVideo(item)"></span>
 			</div>
 			<div class="text-box">
 				<div class="text-content">
 					<div class="icon">
 						<span class="iconfont icon-quotesUp-copy"></span>
 					</div>
 					<h2 v-tween="{opacity:0,y:'30px'}">{{item.name}}</h2>
 					<div v-tween="{opacity:0}">
 						<p v-for="text in item.textList" :key="text">{{text}}</p>
 					</div>
 				</div>
 			</div>
 		</div>
 	</section>
 	<section class="user2-type">
 		<div class="content">
 			<div class="item" v-for="item in userList" :key="item.name">
 				<div class="img-box">
 					<img :src="item.profile" alt="">
 				</div>
 				<div class="box">
 					<div class="icon">
 						<span class="iconfont icon-quotesUp-copy"></span>
 					</div>
 					<h2 class="name" v-tween="{opacity:0,y:'30px'}">{{item.name}}</h2>
 					<h2 class="school" v-tween="{opacity:0,y:'30px'}" v-if="item?.school">{{item?.school}}</h2>
 					<p v-tween="{opacity:0}">{{item.info}}</p>
 				</div>
 			</div>
 		</div>
 	</section>
 </template>
 <style lang="less" scoped>
 	.user-list{
 		width: 100%;
 		background-color: #f9f9f9;
 		> .content{
 			margin: 0 auto;
 			max-width: 1140px;
 			padding: 100px 0px 100px 0px;
 			> h2{
 				text-align: center;
 				width: 100%;
 				font-size: 40px;
 				font-weight: 600;
 				letter-spacing: 1px;
 				color: #000000;
 			}
 		}
 	}
 	.user-item{
 		background-color: #f9f9f9;
 		width: 100%;
 		&:nth-child(2n){
 			> .content{
 				flex-direction: row-reverse;
 			}
 		}
 		> .content{
 			margin: 0 auto;
 			max-width: 1140px;
 			padding: 40px 0;
 			display: flex;
 			> div{
 				width: 50%;
 				padding: 20px;
 			}
 			> .video-box{
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				position: relative;
 				> img{
 					aspect-ratio: 1.777 / 1;
 					width: 100%;
 					object-fit: cover;
 				}
 				> .icon-bofang{
 					font-size: 100px;
 					color: #fff;
 					position: absolute;
 					top: 50%;
 					left: 50%;
 					transform: translate(-50%,-50%);
 					// box-shadow: 0 0 10px #fff;
 					filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, .5));
 					cursor: pointer;
 				}
 			}
 			> .text-box{
 				display: flex;
 				align-items: center;
 				> .text-content{
 					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 					padding: 20px 20px 20px 20px;
 					border-radius: 20px;
 					text-align: center;
 					> .icon{
 						margin-bottom: 20px;
 						height: 25px;
 						width: 100%;
 						display: flex;
 						align-items: flex-end; 
 						justify-content: center;
 						> span{
 							width: 80px;
 							height: 80px;
 							display: flex;
 							justify-content: center;
 							align-items: center;
 							background-color: #86040e;
 							border-radius: 50%;
 							font-size: 40px;
 							color: #fff;
 						}
 					}
 					> h2{
 						margin-bottom: 20px;
 						font-size: 19px;
 						font-weight: 600;
 						line-height: 20px;
 						color: #222222;
 					}
 					> div{
 						> p{
 							margin-bottom: 20px;
 							font-size: 14px;
 							font-weight: 400;
 							color: #333333;
 							line-height: 20px;
 						}
 					}
 				}
 			}
 		}
 	}
 	.user2-type{
 		background-color: #f9f9f9;
 		width: 100%;
 		> .content{
 			margin: 0 auto;
 			max-width: 1140px;
 			padding: 20px;	
 		    display: flex;
 		    flex-wrap: wrap;
 			> .item{
 				margin: 40px 0;
 				width: 50%;
 				padding: 20px;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				&:nth-child(1){
 					width: 100%;
 				}
 				> .img-box{
 					width: 100%;
 					height: 40px;
 					margin-bottom: 20px;
 					text-align: start;
 					> img{
 						width: 100px;
 						height: 100px;
 						border-radius: 50%;
 						object-fit: cover;
 						object-position: top right;
 						box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
 					}
 				}
 				> .box{
 					border-radius: 20px;
 					box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
 					text-align: center;
 					padding: 20px;
 					> .icon{
 						width: 100%;
 						height: 15px;
 						display: flex;
 						align-items: flex-end; 
 						> span{
 							margin: -30px 0px 0px 60px;
 							width: 40px;
 							height: 40px;
 							display: flex;
 							justify-content: center;
 							align-items: center;
 							background-color: #86040e;
 							border-radius: 50%;
 							font-size: 20px;
 							color: #fff;
 						}
 					}
 					> h2{
 						margin-bottom: 20px;
 						font-size: 19px;
 						font-family: "Poppins", Sans-serif;
 						color: #222222;
 						line-height: 1;
 						font-weight: 600;
 						letter-spacing: 2px;
 						&.school{
 							font-size: 15px;
 						}
 					}
 					> p{
 						color: #333333;
 						font-size: 14px;
 						font-weight: 400;
 						line-height: 20px;
 						margin-bottom: 20px;
 					}
 				}
 			}
 		}
 	}
 </style>
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,33 +1,113 @@
 import type { RouteRecordRaw } from 'vue-router'
-import AboutView from './pages/AboutView.vue'
+import AboutView from './pages/about-us/index.vue'
 import ContactView from './pages/ContactView.vue'
 import HomeView from './pages/home/index.vue'
 import ProductsView from './pages/ProductsView.vue'
-
+import { LANGS } from './lang'
 export const routes: RouteRecordRaw[] = [
 	{
-		path: '/:lang?',
+		path: `/:lang(${LANGS.join('|')})?`,
 		children: [
 			{
 				path: '',
 				name: 'home',
 				component: HomeView,
 				alias: ['/:lang?', '/:lang?/home'],
 			},
 			{
-				path: 'about',
+				path: 'about-us',
-				component: AboutView,
+				name: 'about-us',
 				component: AboutView
 			},
 			{
 				path: 'products',
 				name: 'products',
-				component: ProductsView,
+				component: ProductsView
 			},
 			{
-				path: 'contact',
+				path: 'media',
-				name: 'contact',
+				name: 'media',
-				component: ContactView,
+				component: () => import('./pages/media/index.vue')
 			},
-		],
+			{
-	},
+				path: 'contact-us',
 				name: 'contact-us',
 				component: () => import('./pages/contact-us/index.vue')
 			},
 			{
 				path: 'aida',
 				name: 'Aida',
 				component: () => import('./pages/aida/index.vue')
 			},
 			{	path: 'events',
 				name: 'events',
 				component: () => import('./pages/events/index.vue')
 			},
 			{	path: 'user-stories',
 				name: 'user-stories',
 				component: () => import('./pages/user-stories/index.vue')
 			},
 			{	path: 'help-centre',
 				name: 'help-centre',
 				component: () => import('./pages/help-centre/index.vue')
 			},
 			{
 				path: 'my-account',
 				name: 'MyAccount',
 				component: () => import('./pages/my-account/index.vue'),
 				children: [
 					{
 						path: '',
 						name: 'welcome',
 						component: () => import('./pages/my-account/welcome.vue'),
 					},
 					{
 						path: 'orders',
 						name: 'orders',
 						component: () => import('./pages/my-account/orders.vue'),
 					},
 					{
 						path: 'subscriptions',
 						name: 'subscriptions',
 						component: () => import('./pages/my-account/subscriptions.vue'),
 					},
 					{
 						path: 'address',
 						name: 'address',
 						component: () => import('./pages/my-account/address.vue'),
 					},
 					{
 						path: 'payment-methods',
 						name: 'payment-methods',
 						component: () => import('./pages/my-account/payment-methods.vue'),
 					},
 					{
 						path: ':pathMatch(.*)*',
 						name: 'not-found-welcome',
 						component: () => import('./pages/my-account/welcome.vue'),
 					},
 				]
 			},
 			{	path: 'privacy-policy',
 				name: 'privacy-policy',
 				component: () => import('./pages/others/privacy-policy.vue')
 			},
 			{	path: 'terms-of-use',
 				name: 'terms-of-use',
 				component: () => import('./pages/others/terms-of-use.vue')
 			},
 			{	path: 'disclaimer',
 				name: 'disclaimer',
 				component: () => import('./pages/others/disclaimer.vue')
 			},
 			{	path: 'site-map',
 				name: 'site-map',
 				component: () => import('./pages/others/site-map.vue')
 			},
 			{
 				path: ':pathMatch(.*)*',
 				name: 'not-found-404',
 				component: () => import('./pages/others/not-found-404.vue'),
 			},
 		]
 	}
 ]
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -0,0 +1,14 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 export const useGlobalStore = defineStore('global', () => {
 	const state = ref({
 		loading: false,// 全局loading
 	})
 	const setLoading = (v: boolean) => { state.value.loading = v }
 	return {
 		state,
 		setLoading,
 	}
 })
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -0,0 +1,9 @@
 import { createPinia } from 'pinia'
 import { createPersistedState } from 'pinia-persistedstate-plugin'
 // 创建store实例
 const store = createPinia()
 // 使用持久化插件(全局持久化)
 store.use(createPersistedState())
 export default store
 export * from './global'
 export * from './userInfo'
--- a/src/stores/userInfo.ts
+++ b/src/stores/userInfo.ts
@@ -0,0 +1,30 @@
 // 每一个存储的模块，命名规则use开头，store结尾
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 export const useUserInfoStore = defineStore('userInfo', () => {
 	const state = ref({
 		userInfo: {},
 		token: '',
 	})
 	// actions
 	const setUserInfo = (data: any) => {
 		state.value.userInfo = data
 	}
 	const setToken = (data: string) => {
 		state.value.token = data
 	}
 	const logOut = async () => {
 	}
 	return {
 		state,
 		setToken,
 		setUserInfo,
 		logOut,
 	}
 })
--- a/src/style.css
+++ b/src/style.css
@@ -1,365 +1,34 @@
-:root {
+html,
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @media (max-width: 1024px) {
    font-size: 16px;
  }
 }
@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }
  #social .button-icon {
    filter: invert(1) brightness(2);
  }
 }
 body {
-  margin: 0;
+	margin: 0;
 	padding: 0;
 }
-h1,
+.flex {
-h2 {
+	display: flex;
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
 }
-h1 {
+.flex-col {
-  font-size: 56px;
+	flex-direction: column;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
 }
 h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
 }
 p {
  margin: 0;
 }
-code,
+.flex-center {
-.counter {
+	justify-content: center;
-  font-family: var(--mono);
+	align-items: center;
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
 }
-code {
+.flex-1 {
-  font-size: 15px;
+	flex: 1;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
 }
-.counter {
+.space-between {
-  font-size: 16px;
+	justify-content: space-between;
  padding: 5px 10px;
  border-radius: 5px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 24px;
  &:hover {
    border-color: var(--accent-border);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
 }
-.site-pages {
+.justify-center {
-  display: flex;
+	justify-content: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
 }
-.site-page-link {
+.align-center {
-  min-width: 92px;
+	align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-h);
  background: var(--social-bg);
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  &:hover,
  &:focus-visible,
  &.router-link-active {
    border-color: var(--accent-border);
    color: var(--accent);
  }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  @media (max-width: 480px) {
    flex: 1 1 calc(50% - 10px);
  }
 }
 .hero {
  position: relative;
  .base,
  .framework,
  .vite {
    inset-inline: 0;
    margin: 0 auto;
  }
  .base {
    width: 170px;
    position: relative;
    z-index: 0;
  }
  .framework,
  .vite {
    position: absolute;
  }
  .framework {
    z-index: 1;
    top: 34px;
    height: 28px;
    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
      scale(1.4);
  }
  .vite {
    z-index: 0;
    top: 107px;
    height: 26px;
    width: auto;
    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
      scale(0.8);
  }
 }
 #app {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  border-inline: 1px solid var(--border);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
 }
 #center {
  display: flex;
  flex-direction: column;
  gap: 25px;
  place-content: center;
  place-items: center;
  flex-grow: 1;
  @media (max-width: 1024px) {
    padding: 32px 20px 24px;
    gap: 18px;
  }
 }
 #next-steps {
  display: flex;
  border-top: 1px solid var(--border);
  text-align: left;
  & > div {
    flex: 1 1 0;
    padding: 32px;
    @media (max-width: 1024px) {
      padding: 24px 20px;
    }
  }
  .icon {
    margin-bottom: 16px;
    width: 22px;
    height: 22px;
  }
  @media (max-width: 1024px) {
    flex-direction: column;
    text-align: center;
  }
 }
 #docs {
  border-right: 1px solid var(--border);
  @media (max-width: 1024px) {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
 }
 #next-steps ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 8px;
  margin: 32px 0 0;
  .logo {
    height: 18px;
  }
  a {
    color: var(--text-h);
    font-size: 16px;
    border-radius: 6px;
    background: var(--social-bg);
    display: flex;
    padding: 6px 12px;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: var(--shadow);
    }
    .button-icon {
      height: 18px;
      width: 18px;
    }
  }
  @media (max-width: 1024px) {
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
    li {
      flex: 1 1 calc(50% - 8px);
    }
    a {
      width: 100%;
      justify-content: center;
      box-sizing: border-box;
    }
  }
 }
 #spacer {
  height: 88px;
  border-top: 1px solid var(--border);
  @media (max-width: 1024px) {
    height: 48px;
  }
 }
 .ticks {
  position: relative;
  width: 100%;
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: -4.5px;
    border: 5px solid transparent;
  }
  &::before {
    left: 0;
    border-left-color: var(--border);
  }
  &::after {
    right: 0;
    border-right-color: var(--border);
  }
 }
 .placeholder-page {
  min-height: 100svh;
  padding: 96px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  gap: 16px;
 }
 .placeholder-page p {
  max-width: 560px;
 }
 .placeholder-page a {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
 }
 .placeholder-kicker {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
 }
--- a/src/types/kagol-vue-carousel.d.ts
+++ b/src/types/kagol-vue-carousel.d.ts
@@ -0,0 +1,18 @@
 declare module '@kagol/vue-carousel' {
  import type { Component, Plugin } from 'vue'
  export const Carousel: Component
  export const CarouselIndicator: Component
  export const CarouselPrev: Component
  export const CarouselNext: Component
  export const usePage: (initialPage?: number) => {
    pageIndex: { value: number }
    setPageIndex: (pageIndex: number) => void
    jumpPage: (step: number) => void
    prevPage: () => void
    nextPage: () => void
  }
  const plugin: Plugin
  export default plugin
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,8 @@
 /// <reference types="vite/client" />
 declare module '*.vue' {
 	import type { DefineComponent } from 'vue'
 	const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>
 	export default component
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,28 @@
 {
-  "files": [],
+	// "files": [],
-  "references": [
+	"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/types/**/*.d.ts"],
-    { "path": "./tsconfig.app.json" },
+	"compilerOptions": {
-    { "path": "./tsconfig.node.json" }
+		"noUnusedLocals": false,  // 关闭未使用局部变量检查
-  ]
+		"noUnusedParameters": false,  // 关闭未使用参数检查
-}
+	  "forceConsistentCasingInFileNames": false, // ⚠️ 禁用大小写检查
 	  "allowJs": true,
 	  "types": ["node"],
 	  "paths": {
 		"@/*": ["./src/*"],
 		"_c/*": ["./src/components/*"]
 	  },
 	  "rootDirs": ["./src"],
 	  "skipLibCheck": true,
 	  "strict": false,
 	  "noEmit": true,
 	  "noImplicitAny": false,
 	  "noEmitOnError": false
 	}
 	// "references": [
 	// 	{ "path": "./tsconfig.app.json" },
 	//   {
 	// 	"path": "./tsconfig.node.json"
 	//   }
 	// ]
  }
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
 {"root":["./src/app.vue","./src/main.ts","./src/routes.ts","./src/vite-env.d.ts","./src/components/back-top.vue","./src/components/down-menu.vue","./src/components/main-footer.vue","./src/components/main-header.vue","./src/components/video-model.vue","./src/directives/custom-animation.js","./src/directives/index.ts","./src/directives/myevents.ts","./src/directives/scroll-progress.ts","./src/directives/tween-animation.ts","./src/lang/en.ts","./src/lang/index.ts","./src/lang/zh-cn.ts","./src/lang/zh-tw.ts","./src/pages/aboutview.vue","./src/pages/contactview.vue","./src/pages/productsview.vue","./src/pages/about-us/ecosystem.vue","./src/pages/about-us/index.vue","./src/pages/about-us/mission.vue","./src/pages/about-us/our-team.vue","./src/pages/about-us/strategic-partners.vue","./src/pages/about-us/title.vue","./src/pages/aida/index.vue","./src/pages/events/index.vue","./src/pages/events/swiper.vue","./src/pages/home/index.vue","./src/pages/home/components/carousel.vue","./src/pages/home/components/productfeature.vue","./src/pages/home/components/projectcta.vue","./src/pages/my-account/account-info.vue","./src/pages/my-account/index.vue","./src/pages/my-account/login.vue","./src/pages/my-account/orders.vue","./src/pages/my-account/register.vue","./src/pages/my-account/tip-box.vue","./src/pages/my-account/welcome.vue","./src/stores/global.ts","./src/stores/index.ts","./src/stores/userinfo.ts","./src/types/kagol-vue-carousel.d.ts"],"version":"6.0.3"}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,11 +7,31 @@ import { fileURLToPath, URL } from 'node:url'
 // https://vite.dev/config/
 const config = {
-	base: '/',
+	ssg: {
-	plugins: [vue()
+		// 静默所有警告
 		silent: true,
-	],
+		// 或者只忽略特定警告
 		onWarning: (warning, message) => {
 			// 忽略 ResizeObserver 和 localStorage 相关警告
 			if (message.includes('ResizeObserver')) {
 				return;
 			}
 			console.warn(warning);
 		}
 	},
 	// 全局定义模拟对象
 	define: {
 		'ResizeObserver': 'typeof ResizeObserver !== "undefined" ? ResizeObserver : class ResizeObserver { observe() {} unobserve() {} disconnect() {} }',
 	},
 	base: '/',
 	plugins: [vue()],
 	ssr: {
 		noExternal: ['@kagol/vue-carousel']
 	},
 	ssgOptions: {
 		mock: true,
 		dirStyle: 'nested',
 		script: 'defer',
 		onFinished() {
Author	SHA1	Message	Date
X1627315083@163.com	8ad8030f47	help-centre	2026-05-20 11:43:05 +08:00
李志鹏	8cf3a2177c	语言适配	2026-05-20 11:10:03 +08:00
X1627315083@163.com	ddd61ff22f	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-20 10:57:49 +08:00
X1627315083@163.com	a6ab3d9402	fix	2026-05-20 10:57:47 +08:00
李志鹏	e9a909b1db	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-20 10:55:55 +08:00
李志鹏	9f77810c9e	404和底部页面	2026-05-20 10:55:54 +08:00
X1627315083@163.com	fe205f4920	help-centre	2026-05-20 10:52:33 +08:00
李志鹏	9f079107f7	router	2026-05-19 17:03:28 +08:00
李志鹏	cfcb1bef21	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-19 15:55:52 +08:00
李志鹏	50ab3853f0	媒体报道&联系我们	2026-05-19 15:55:49 +08:00
X1627315083@163.com	4c515e1123	fix	2026-05-19 14:49:12 +08:00
X1627315083@163.com	7e8fdf315b	all-events页面	2026-05-19 14:48:36 +08:00
李志鹏	db73c58525	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-19 10:36:49 +08:00
李志鹏	9eeb29da31	111	2026-05-19 10:36:47 +08:00
X1627315083@163.com	55cc4cb40f	fix	2026-05-19 10:36:33 +08:00
李志鹏	bcaeda6217	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-19 10:05:57 +08:00
李志鹏	c72dd4a455	111	2026-05-19 10:05:55 +08:00
X1627315083@163.com	f75495564a	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-19 09:57:53 +08:00
X1627315083@163.com	0bc1bd79ed	fix	2026-05-19 09:57:24 +08:00
李志鹏	4254f291f4	登录注册	2026-05-18 16:46:55 +08:00
李志鹏	35df75d4ea	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-18 15:22:09 +08:00
李志鹏	d327797236	登录注册	2026-05-18 15:22:08 +08:00
X1627315083@163.com	6523c30d9f	about页面	2026-05-18 13:57:05 +08:00
X1627315083@163.com	4af58134fd	about页面	2026-05-18 11:33:26 +08:00
李志鹏	e36b17642f	头尾多语言	2026-05-18 11:13:48 +08:00
X1627315083@163.com	57835e6416	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-18 10:42:33 +08:00
X1627315083@163.com	892c568efc	fix	2026-05-18 10:42:24 +08:00
李志鹏	a92ceff8e4	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-18 10:42:22 +08:00
李志鹏	2cf20d1b81	1	2026-05-18 10:41:59 +08:00
X1627315083@163.com	27a280ab46	添加全局视频	2026-05-18 10:41:18 +08:00
李志鹏	1c84d3949f	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-18 10:39:53 +08:00
李志鹏	f282adfd87	多语言	2026-05-18 10:39:52 +08:00
X1627315083@163.com	09af83050a	fix	2026-05-18 09:28:36 +08:00
李志鹏	4587a59a89	Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create	2026-05-15 17:32:55 +08:00
李志鹏	d237dab098	aaa	2026-05-15 17:31:43 +08:00
zhangyahui	6fc1da2884	Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Code-Create	2026-05-15 16:42:08 +08:00
zhangyahui	5158b63ddd	feat: solutions/aida	2026-05-15 16:41:52 +08:00
李志鹏	85708bb5a4	custom-animation	2026-05-15 12:16:15 +08:00
李志鹏	99af8da607	动画	2026-05-15 11:09:36 +08:00
李志鹏	9235843f25	11	2026-05-15 10:50:25 +08:00
李志鹏	1153bce74e	阿里巴巴icon	2026-05-15 10:48:15 +08:00
zhangyahui	e797612de6	feat: 首页	2026-05-15 10:29:21 +08:00
zhangyahui	3edda93691	feat: 首页组件路径	2026-05-14 17:15:49 +08:00
zhangyahui	6c1452be4d	Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Code-Create	2026-05-14 17:14:39 +08:00
zhangyahui	9733a0dcd6	feat: 首页轮播图动画	2026-05-14 17:14:37 +08:00
X1627315083@163.com	1de788ccb7	fix	2026-05-14 16:18:17 +08:00
X1627315083@163.com	dfd566e389	fix	2026-05-14 15:31:34 +08:00
zhangyahui	d47d9535ee	Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Code-Create	2026-05-14 15:13:08 +08:00
zhangyahui	89ea954743	feat: 轮播图组件	2026-05-14 15:10:57 +08:00
X1627315083@163.com	56802ed210	fix	2026-05-14 14:56:46 +08:00
		`@@ -0,0 +1 @@`
							{"root":["./src/app.vue","./src/main.ts","./src/routes.ts","./src/vite-env.d.ts","./src/components/back-top.vue","./src/components/down-menu.vue","./src/components/main-footer.vue","./src/components/main-header.vue","./src/components/video-model.vue","./src/directives/custom-animation.js","./src/directives/index.ts","./src/directives/myevents.ts","./src/directives/scroll-progress.ts","./src/directives/tween-animation.ts","./src/lang/en.ts","./src/lang/index.ts","./src/lang/zh-cn.ts","./src/lang/zh-tw.ts","./src/pages/aboutview.vue","./src/pages/contactview.vue","./src/pages/productsview.vue","./src/pages/about-us/ecosystem.vue","./src/pages/about-us/index.vue","./src/pages/about-us/mission.vue","./src/pages/about-us/our-team.vue","./src/pages/about-us/strategic-partners.vue","./src/pages/about-us/title.vue","./src/pages/aida/index.vue","./src/pages/events/index.vue","./src/pages/events/swiper.vue","./src/pages/home/index.vue","./src/pages/home/components/carousel.vue","./src/pages/home/components/productfeature.vue","./src/pages/home/components/projectcta.vue","./src/pages/my-account/account-info.vue","./src/pages/my-account/index.vue","./src/pages/my-account/login.vue","./src/pages/my-account/orders.vue","./src/pages/my-account/register.vue","./src/pages/my-account/tip-box.vue","./src/pages/my-account/welcome.vue","./src/stores/global.ts","./src/stores/index.ts","./src/stores/userinfo.ts","./src/types/kagol-vue-carousel.d.ts"],"version":"6.0.3"}