docs: improve homepage style (#6365)

website/package.json

@@ -13,7 +13,7 @@
     "check": "pnpm run check:format && pnpm run check:spell",
     "check:ci": "pnpm run check:format-ci && pnpm run check:spell"
   },
-  "license": "ISC",
+  "license": "MIT",
   "packageManager": "[email protected]",
   "dependencies": {
     "axios": "^1.6.1",
@@ -29,8 +29,8 @@
   },
   "devDependencies": {
     "@modern-js/tsconfig": "^2.46.1",
-    "@rspress/plugin-rss": "^1.18.3",
-    "@rspress/shared": "^1.18.3",
+    "@rspress/plugin-rss": "^1.18.4",
+    "@rspress/shared": "^1.18.4",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/semver": "^7.5.2",
@@ -41,7 +41,7 @@
     "prettier": "3.2.5",
     "rsbuild-plugin-google-analytics": "1.0.0",
     "rsbuild-plugin-open-graph": "1.0.0",
-    "rspress": "^1.18.3",
+    "rspress": "^1.18.4",
     "rspress-plugin-font-open-sans": "1.0.0",
     "typescript": "^5.0.4"
   }

website/theme/components/Benchmark/index.tsx

@@ -93,15 +93,15 @@ export function Benchmark() {
       animate={inView ? 'animate' : 'initial'}
       variants={variants}
       transition={{ duration: 1 }}
-      className="relative flex flex-col justify-center py-10 mt-15 h-auto"
+      className="relative flex flex-col justify-center pt-20 pb-10 mt-15 h-auto"
     >
       {inView && (
         <>
           <div className="flex flex-center flex-col">
             <h2 className={`${styles.title} font-bold text-2xl sm:text-4xl`}>
               {t('benchmarkTitle')}
             </h2>
-            <p className="mt-6 mx-6 text-center sm:text-lg text-gray-500 max-w-3xl">
+            <p className="mt-6 mb-3 mx-6 text-center sm:text-lg text-gray-500 max-w-3xl">
               {t('benchmarkDesc')}
             </p>
           </div>

website/theme/components/HomeFooter/index.tsx

@@ -90,7 +90,10 @@ function useFooterData() {
 export function HomeFooter() {
   const footerData = useFooterData();
   return (
-    <div className="flex flex-col border-t dark:border-dark-50 items-center mt-[80px]">
+    <div
+      className="flex flex-col border-t items-center mt-12"
+      style={{ borderColor: 'var(--rp-c-divider-light)' }}
+    >
       <div className="pt-8 pb-4 w-full justify-around max-w-6xl hidden sm:flex">
         {footerData.map(item => (
           <div key={item.title} className="flex flex-col items-start">

website/theme/index.css

@@ -20,9 +20,6 @@ summary {
   --rp-custom-block-info-border: rgba(250, 192, 61, 0.5);
 }
 
-:root {
-}
-
 .dark {
   --rp-code-title-bg: rgba(128, 128, 128, 0.2);
   --rp-code-block-bg: #242424;

website/theme/pages/index.tsx

@@ -1,5 +1,5 @@
-import { Hero, HomeHero } from '../components/HomeHero';
-import { HomeFeature, Feature } from '../components/HomeFeatures';
+import { type Hero, HomeHero } from '../components/HomeHero';
+import { HomeFeature, type Feature } from '../components/HomeFeatures';
 import { NoSSR, usePageData } from 'rspress/runtime';
 import { Benchmark } from '../components/Benchmark';
 import { HomeFooter } from '../components/HomeFooter/index';
@@ -11,11 +11,10 @@ export function HomeLayout() {
     <div>
       {/* Landing Page */}
       <div
-        className="relative border-b dark:border-dark-50"
+        className="relative border-b"
         style={{
-          background: 'var(--rp-home-bg)',
-          minHeight: 'calc(80rem - var(--rp-nav-height))',
           paddingBottom: '56px',
+          borderColor: 'var(--rp-c-divider-light)',
         }}
       >
         <div className="pt-14 pb-12">