Add background-image component

Author: Folyd

package-lock.json

@@ -11,7 +11,6 @@
     "preview": "rspress preview"
   },
   "dependencies": {
-    "@rstack-dev/doc-ui": "1.7.2"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",

package.json

@@ -1,4 +1,4 @@
-import { BackgroundImage } from '@rstack-dev/doc-ui/background-image';
+import { BackgroundImage } from '../background-image';
 import { Hero } from '../hero';
 import styles from './index.module.scss';
 
@@ -8,7 +8,7 @@ import { useNavigate } from 'rspress/runtime';
 const LandingPage = () => {
     const navigate = useNavigate();
     const onClickGetStarted = useCallback(() => {
-        navigate('/guide/start/quick-start');
+        navigate('/guide');
     }, [navigate]);
 
     return (

theme/components/Landingpage/index.tsx

@@ -0,0 +1,12 @@
+.background {
+  width: 100%;
+  position: absolute;
+  top: calc(-1 * var(--rp-nav-height));
+  left: 0;
+
+  z-index: -1;
+  filter: blur(2px);
+
+  pointer-events: none;
+  user-select: none;
+}

theme/components/background-image/index.module.scss

@@ -0,0 +1,70 @@
+import { type FC, useEffect, useState } from 'react';
+import styles from './index.module.scss';
+
+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,
+  };
+};
+
+export type BackgroundProps = {
+  navBarTopArrived?: boolean;
+};
+
+export const BackgroundImage: FC<BackgroundProps> = ({
+  navBarTopArrived = true,
+}) => {
+  const { topArrived } = useTopArrived();
+
+  useEffect(() => {
+    if (!navBarTopArrived) {
+      return;
+    }
+    if (topArrived) {
+      document.body.classList.remove('notTopArrived');
+    } else {
+      document.body.classList.add('notTopArrived');
+    }
+  }, [topArrived, navBarTopArrived]);
+
+  return (
+    <>
+      <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>
+      <img
+        className={styles.background}
+        src="https://assets.rspack.dev/rspack/assets/landingpage-background-compressed.png"
+        alt="background"
+      />
+    </>
+  );
+};