chore(deps): upgrade @rstack-dev/doc-ui 1.4.0 (#7765)

feat: new landingpage

website/package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "packageManager": "pnpm@9.3.0",
   "dependencies": {
-    "@rstack-dev/doc-ui": "1.3.2",
+    "@rstack-dev/doc-ui": "1.4.0",
     "antd": "5.19.3",
     "axios": "^1.6.1",
     "date-fns": "^2.29.3",

website/theme/components/Landingpage/index.tsx

@@ -1,3 +1,4 @@
+import { BackgroundImage } from '@rstack-dev/doc-ui/background-image';
 import { useEffect, useState } from 'react';
 import { Benchmark } from './Benchmark';
 import BuiltWithRspack from './BuiltWithRspack';
@@ -7,66 +8,10 @@ import ToolStack from './ToolStack';
 import WhyRspack from './WhyRspack';
 import styles from './index.module.scss';
 
-const Background = () => {
-  return (
-    <img
-      className={styles.background}
-      src="https://assets.rspack.dev/rspack/assets/landingpage-background-compressed.png"
-      alt="background"
-    />
-  );
-};
-
-const useTopArrived = () => {
-  const [scrollY, setScrollY] = useState(0);
-  const topArrived = scrollY < 100;
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setScrollY(window.scrollY);
-    };
-    window.addEventListener('scroll', handleScroll, {
-      capture: false,
-      passive: true,
-    });
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
-  return {
-    topArrived,
-  };
-};
-
 const LandingPage = () => {
-  const { topArrived } = useTopArrived();
-  useEffect(() => {
-    if (topArrived) {
-      document.body.classList.remove('notTopArrived');
-    } else {
-      document.body.classList.add('notTopArrived');
-    }
-  }, [topArrived]);
-
   return (
     <div className={styles.landingPage}>
-      <style>
-        {`:root {
-              --rp-c-bg: #0b0c0e;
-          }
-          :root:not(.dark) {
-              --rp-c-bg: #fff;
-          }
-          .rspress-nav {
-            transition: background 0.4s;
-          }
-          body:not(.notTopArrived) .rspress-nav {
-            background: transparent !important;
-          }
-          `}
-      </style>
-      <Background />
+      <BackgroundImage />
       <Hero />
       <WhyRspack />
       <Benchmark />