perf(website): perf homepage without styled-component

docusaurus not full support css-in-js solution

pnpm-lock.yaml

@@ -1400,13 +1400,15 @@ importers:
       '@types/styled-components': ^5.1.26
       clsx: ^1.2.1
       docusaurus-plugin-image-zoom: ^0.1.1
+      docusaurus-plugin-less: ^2.0.2
       file-loader: ^6.2.0
       fs-extra: ^10.1.0
       glob: ^7.2.3
+      less: ^4.1.3
+      less-loader: ^10.2.0
       prism-react-renderer: ^1.3.5
       react: ^17.0.2
       react-dom: ^17.0.2
-      styled-components: ^5.3.6
       ts-node: ^10.9.1
       typescript: ^4.9.5
       url-loader: ^4.1.1
@@ -1418,11 +1420,11 @@ importers:
       '@svgr/webpack': 5.5.0
       clsx: 1.2.1
       docusaurus-plugin-image-zoom: 0.1.1
+      docusaurus-plugin-less: 2.0.2_cry5vv7wixxq3wqbwkikkfe4le
       file-loader: 6.2.0
       prism-react-renderer: 1.3.5_react@17.0.2
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
-      styled-components: 5.3.6_sfoxds7t5ydpegc3knd667wn6m
       url-loader: 4.1.1_file-loader@6.2.0
     devDependencies:
       '@docusaurus/module-type-aliases': 2.3.1_sfoxds7t5ydpegc3knd667wn6m
@@ -1435,6 +1437,8 @@ importers:
       '@types/styled-components': 5.1.26
       fs-extra: 10.1.0
       glob: 7.2.3
+      less: 4.1.3
+      less-loader: 10.2.0_less@4.1.3
       ts-node: 10.9.1_typescript@4.9.5
       typescript: 4.9.5
 
@@ -7409,7 +7413,7 @@ packages:
     peerDependencies:
       react: '*'
     dependencies:
-      '@types/react': 17.0.53
+      '@types/react': 18.0.26
       prop-types: 15.8.1
       react: 17.0.2
 
@@ -15654,6 +15658,7 @@ packages:
     dependencies:
       webpack: 5.75.0_webpack-cli@4.10.0
       webpack-cli: 4.10.0_hdfrwtmlewz4o7kkfxfrhnzu24
+    dev: true
 
   /@webpack-cli/info/1.5.0_webpack-cli@4.10.0:
     resolution: {integrity: sha512-e8tSXZpw2hPl2uMJY6fsMswaok5FdlGNRTktvFk2sD8RjH0hE2+XistawJx1vmKteh4NmGmNUrp+Tb2w+udPcQ==}
@@ -15662,6 +15667,7 @@ packages:
     dependencies:
       envinfo: 7.8.1
       webpack-cli: 4.10.0_hdfrwtmlewz4o7kkfxfrhnzu24
+    dev: true
 
   /@webpack-cli/serve/1.7.0_ud4agclah7rahur6ntojouq57y:
     resolution: {integrity: sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==}
@@ -15674,6 +15680,7 @@ packages:
     dependencies:
       webpack-cli: 4.10.0_hdfrwtmlewz4o7kkfxfrhnzu24
       webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue
+    dev: true
 
   /@xobotyi/scrollbar-width/1.9.5:
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
@@ -17138,7 +17145,7 @@ packages:
       babel-plugin-syntax-jsx: 6.18.0
       lodash: 4.17.21
       picomatch: 2.3.1
-      styled-components: 5.3.6_7i5myeigehqah43i5u7wbekgba
+      styled-components: 5.3.6_sfoxds7t5ydpegc3knd667wn6m
 
   /babel-plugin-syntax-jsx/6.18.0:
     resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
@@ -19158,7 +19165,6 @@ packages:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
     dependencies:
       is-what: 3.14.1
-    dev: true
 
   /copy-anything/3.0.3:
     resolution: {integrity: sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==}
@@ -19210,7 +19216,7 @@ packages:
       normalize-path: 3.0.0
       schema-utils: 4.0.0
       serialize-javascript: 6.0.1
-      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack: 5.75.0
 
   /core-js-compat/3.28.0:
     resolution: {integrity: sha512-myzPgE7QodMg4nnd3K1TDoES/nADRStM8Gpz0D6nhkwbmwEnE0ZGJgoWsvQ722FR8D7xS0n0LV556RcEicjTyg==}
@@ -20615,6 +20621,18 @@ packages:
       medium-zoom: 1.0.8
     dev: false
 
+  /docusaurus-plugin-less/2.0.2_cry5vv7wixxq3wqbwkikkfe4le:
+    resolution: {integrity: sha512-ez6WSSvGS8HoJslYHeG5SflyShWvHFXeTTHXPBd3H1T3zgq9wp6wD7scXm+rXyyfhFhP5VNiIqhYB78z4OLjwg==}
+    peerDependencies:
+      '@docusaurus/core': '>=2.0.0-beta.9'
+      less: '>=4.0.0'
+      less-loader: '>=10.0.0'
+    dependencies:
+      '@docusaurus/core': 2.3.1_jgxnvbe4faw3ohf4h6p42qq6oy
+      less: 4.1.3
+      less-loader: 10.2.0_less@4.1.3
+    dev: false
+
   /dom-accessibility-api/0.5.14:
     resolution: {integrity: sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==}
     dev: true
@@ -21042,6 +21060,7 @@ packages:
     resolution: {integrity: sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==}
     engines: {node: '>=4'}
     hasBin: true
+    dev: true
 
   /eol/0.9.1:
     resolution: {integrity: sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg==}
@@ -21053,7 +21072,6 @@ packages:
     requiresBuild: true
     dependencies:
       prr: 1.0.1
-    dev: true
 
   /error-ex/1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
@@ -22211,6 +22229,7 @@ packages:
   /fastest-levenshtein/1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
     engines: {node: '>= 4.9.1'}
+    dev: true
 
   /fastest-stable-stringify/2.0.2:
     resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==}
@@ -22364,7 +22383,7 @@ packages:
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.1.1
-      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack: 5.75.0
 
   /file-selector/0.5.0:
     resolution: {integrity: sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA==}
@@ -24072,7 +24091,7 @@ packages:
       lodash: 4.17.21
       pretty-error: 4.0.0
       tapable: 2.2.1
-      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack: 5.75.0
 
   /htmlparser2/6.1.0:
     resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
@@ -24391,7 +24410,6 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
     requiresBuild: true
-    dev: true
     optional: true
 
   /image-size/1.0.2:
@@ -24440,6 +24458,7 @@ packages:
     dependencies:
       pkg-dir: 4.2.0
       resolve-cwd: 3.0.0
+    dev: true
 
   /imurmurhash/0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -25390,7 +25409,6 @@ packages:
 
   /is-what/3.14.1:
     resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
-    dev: true
 
   /is-what/4.1.8:
     resolution: {integrity: sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==}
@@ -26722,6 +26740,16 @@ packages:
       flush-write-stream: 1.1.1
     dev: true
 
+  /less-loader/10.2.0_less@4.1.3:
+    resolution: {integrity: sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      less: ^3.5.0 || ^4.0.0
+      webpack: ^5.0.0
+    dependencies:
+      klona: 2.0.6
+      less: 4.1.3
+
   /less-loader/10.2.0_less@4.1.3+webpack@5.75.0:
     resolution: {integrity: sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==}
     engines: {node: '>= 12.13.0'}
@@ -26769,7 +26797,6 @@ packages:
       source-map: 0.6.1
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /leven/2.1.0:
     resolution: {integrity: sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==}
@@ -28086,7 +28113,7 @@ packages:
       webpack: ^5.0.0
     dependencies:
       schema-utils: 4.0.0
-      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack: 5.75.0
 
   /mini-star/1.3.1:
     resolution: {integrity: sha512-u9Rw8mPZibaAkEVXBsOQJ1irAURTgjqdKoITFd24+KxIGVXCDK+RYR8KjKRF99VLaCbK6TwTqiJ6iNsqq0G+wA==}
@@ -29019,7 +29046,6 @@ packages:
       sax: 1.2.4
     transitivePeerDependencies:
       - supports-color
-    dev: true
     optional: true
 
   /negotiator/0.6.3:
@@ -30155,7 +30181,6 @@ packages:
   /parse-node-version/1.0.1:
     resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
     engines: {node: '>= 0.10'}
-    dev: true
 
   /parse-numeric-range/1.3.0:
     resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
@@ -31865,7 +31890,6 @@ packages:
 
   /prr/1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
-    dev: true
 
   /psl/1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
@@ -34054,6 +34078,7 @@ packages:
     engines: {node: '>= 0.10'}
     dependencies:
       resolve: 1.22.1
+    dev: true
 
   /rechoir/0.8.0:
     resolution: {integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==}
@@ -34620,6 +34645,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       resolve-from: 5.0.0
+    dev: true
 
   /resolve-dir/1.0.1:
     resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
@@ -34640,6 +34666,7 @@ packages:
   /resolve-from/5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
+    dev: true
 
   /resolve-global/1.0.0:
     resolution: {integrity: sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==}
@@ -36522,6 +36549,7 @@ packages:
       react-is: 18.2.0
       shallowequal: 1.1.0
       supports-color: 5.5.0
+    dev: false
 
   /styled-components/5.3.6_mdz3marskokvq6744hhidi3r5a:
     resolution: {integrity: sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==}
@@ -36590,7 +36618,6 @@ packages:
       react-dom: 17.0.2_react@17.0.2
       shallowequal: 1.1.0
       supports-color: 5.5.0
-    dev: false
 
   /styled-system/5.1.5:
     resolution: {integrity: sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A==}
@@ -37170,7 +37197,7 @@ packages:
       schema-utils: 3.1.1
       serialize-javascript: 6.0.1
       terser: 5.16.5
-      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack: 5.75.0
 
   /terser/4.8.1:
     resolution: {integrity: sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==}
@@ -38885,7 +38912,7 @@ packages:
       loader-utils: 2.0.4
       mime-types: 2.1.35
       schema-utils: 3.1.1
-      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack: 5.75.0
 
   /url-parse-lax/3.0.0:
     resolution: {integrity: sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==}
@@ -39520,6 +39547,7 @@ packages:
       webpack-bundle-analyzer: 4.8.0
       webpack-dev-server: 4.11.1_pda42hcaj7d62cr262fr632kue
       webpack-merge: 5.8.0
+    dev: true
 
   /webpack-dev-middleware/3.7.3_webpack@4.46.0:
     resolution: {integrity: sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==}
@@ -39546,7 +39574,7 @@ packages:
       mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 4.0.0
-      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack: 5.75.0
 
   /webpack-dev-server/4.11.1_pda42hcaj7d62cr262fr632kue:
     resolution: {integrity: sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==}
@@ -39595,6 +39623,7 @@ packages:
       - debug
       - supports-color
       - utf-8-validate
+    dev: true
 
   /webpack-dev-server/4.11.1_webpack@5.75.0:
     resolution: {integrity: sha512-lILVz9tAUy1zGFwieuaQtYiadImb5M3d+H+L1zDYalYoDl0cksAB1UNyuE5MMWJrG6zR1tXkCP2fitl7yoUJiw==}
@@ -39875,6 +39904,7 @@ packages:
       - '@swc/core'
       - esbuild
       - uglify-js
+    dev: true
 
   /webpackbar/5.0.2_webpack@5.75.0:
     resolution: {integrity: sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==}
@@ -39886,7 +39916,7 @@ packages:
       consola: 2.15.3
       pretty-time: 1.1.0
       std-env: 3.3.2
-      webpack: 5.75.0_webpack-cli@4.10.0
+      webpack: 5.75.0
 
   /websocket-driver/0.7.4:
     resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}

website/docusaurus.config.js

@@ -122,5 +122,8 @@ module.exports = {
     locales: ['en', 'zh-Hans'],
   },
   presets: [['@docusaurus/preset-classic', presetClassicOptions]],
-  plugins: [require.resolve('docusaurus-plugin-image-zoom')],
+  plugins: [
+    require.resolve('docusaurus-plugin-image-zoom'),
+    require.resolve('docusaurus-plugin-less'),
+  ],
 };

website/package.json

@@ -24,11 +24,11 @@
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.2.1",
     "docusaurus-plugin-image-zoom": "^0.1.1",
+    "docusaurus-plugin-less": "^2.0.2",
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.6",
     "url-loader": "^4.1.1"
   },
   "browserslist": {
@@ -54,6 +54,8 @@
     "@types/styled-components": "^5.1.26",
     "fs-extra": "^10.1.0",
     "glob": "^7.2.3",
+    "less": "^4.1.3",
+    "less-loader": "^10.2.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5"
   }

website/src/components/HomepageHeader.less

@@ -0,0 +1,71 @@
+.homepage-header {
+  padding: 4rem 1rem 0;
+
+  @media (min-width: 997px) {
+    font-size: 3.75rem;
+    height: 540px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .main {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 80rem;
+
+    @media (min-width: 997px) {
+      flex-direction: row;
+    }
+
+    .header {
+      flex: 1;
+      text-align: center;
+
+      @media (min-width: 997px) {
+        text-align: left;
+      }
+
+      .title {
+        margin-bottom: 24px;
+        font-size: 2.25rem;
+        line-height: 1;
+        font-weight: 700;
+
+        @media (min-width: 997px) {
+          font-size: 3.75rem;
+        }
+      }
+
+      .desc {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        color: rgb(153, 153, 153);
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+
+        @media (min-width: 997px) {
+          font-size: 1rem;
+          line-height: 1.5rem;
+          max-width: 32rem;
+        }
+      }
+
+      .btns {
+        margin-bottom: 32px;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        @media (min-width: 997px) {
+          flex-direction: row;
+        }
+      }
+    }
+
+    .screenshot {
+      flex: 1;
+    }
+  }
+}

website/src/components/HomepageHeader.tsx

@@ -1,89 +1,17 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import Head from '@docusaurus/Head';
-import styled from 'styled-components';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Translate from '@docusaurus/Translate';
 import { useColorMode } from '@docusaurus/theme-common';
-
-const Root = styled.div`
-  padding: 4rem 1rem 0;
-
-  @media (min-width: 997px) {
-    font-size: 3.75rem;
-    height: 540px;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .main {
-    margin: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 80rem;
-
-    @media (min-width: 997px) {
-      flex-direction: row;
-    }
-
-    .header {
-      flex: 1;
-      text-align: center;
-
-      @media (min-width: 997px) {
-        text-align: left;
-      }
-
-      .title {
-        margin-bottom: 24px;
-        font-size: 2.25rem;
-        line-height: 1;
-        font-weight: 700;
-
-        @media (min-width: 997px) {
-          font-size: 3.75rem;
-        }
-      }
-
-      .desc {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        color: rgb(153, 153, 153);
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-
-        @media (min-width: 997px) {
-          font-size: 1rem;
-          line-height: 1.5rem;
-          max-width: 32rem;
-        }
-      }
-
-      .btns {
-        margin-bottom: 32px;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-
-        @media (min-width: 997px) {
-          flex-direction: row;
-        }
-      }
-    }
-
-    .screenshot {
-      flex: 1;
-    }
-  }
-`;
+import './HomepageHeader.less';
 
 export const HomepageHeader: React.FC = React.memo(() => {
   const { siteConfig } = useDocusaurusContext();
   const { colorMode } = useColorMode();
 
   return (
-    <Root className="hero hero--primary">
+    <div className="homepage-header hero hero--primary">
       <Head>
         <link rel="prefetch" href="/img/hero-light.png" />
         <link rel="prefetch" href="/img/hero-dark.png" />
@@ -114,7 +42,7 @@ export const HomepageHeader: React.FC = React.memo(() => {
           <img src={`/img/hero-${colorMode}.png`} alt="Preview of Tailchat" />
         </div>
       </div>
-    </Root>
+    </div>
   );
 });
 HomepageHeader.displayName = 'HomepageHeader';