Custom hero

Author: Folyd

package-lock.json

@@ -10,6 +10,9 @@
     "lint": "eslint .",
     "preview": "rspress preview"
   },
+  "dependencies": {
+    "@rstack-dev/doc-ui": "1.7.2"
+  },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@eslint/js": "^9.19.0",

package.json

@@ -0,0 +1,16 @@
+.landingPage {
+  position: relative;
+}
+
+.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/Landingpage/index.module.scss

@@ -0,0 +1,29 @@
+import { BackgroundImage } from '@rstack-dev/doc-ui/background-image';
+import { Hero } from '../hero';
+import styles from './index.module.scss';
+
+import { useCallback } from 'react';
+import { useNavigate } from 'rspress/runtime';
+
+const LandingPage = () => {
+    const navigate = useNavigate();
+    const onClickGetStarted = useCallback(() => {
+        navigate('/guide/start/quick-start');
+    }, [navigate]);
+
+    return (
+        <div className={styles.landingPage}>
+            <BackgroundImage />
+            <Hero
+                showStars
+                // title="AIScript"
+                subTitle="The next generation language for human and AI."
+                getStartedButtonText='getStarted'
+                githubURL="https://github.com/aiscriptdev/aiscript"
+                onClickGetStarted={onClickGetStarted}
+            />
+        </div>
+    );
+};
+
+export default LandingPage;

theme/components/Landingpage/index.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useRef, useState } from 'react';
+import styles from './index.module.scss';
+
+const BackgroundStar = ({
+  top,
+  left,
+  pageX,
+  pageY,
+  size,
+}: {
+  top: number | string;
+  left: number | string;
+  pageX: number | null;
+  pageY: number | null;
+  size: number;
+}) => {
+  const ref = useRef<any>();
+  const [transformX, setTransformX] = useState<number>(0);
+  const [transformY, setTransformY] = useState<number>(0);
+  useEffect(() => {
+    if (ref.current) {
+      const { x, y } = ref.current.getBoundingClientRect();
+
+      if (pageX && pageY) {
+        const distanceX = pageX - x;
+        const distanceY = pageY - y;
+        if (Math.abs(distanceX) < 100 && Math.abs(distanceY) < 100) {
+          setTransformX(distanceX);
+          setTransformY(distanceY);
+        } else {
+          setTransformX(0);
+          setTransformY(0);
+        }
+      }
+    }
+  }, [pageX, pageY]);
+
+  return (
+    <div
+      className={styles.backgroundStarContainer}
+      ref={ref}
+      style={{
+        top,
+        left,
+      }}
+    >
+      <svg
+        className={styles.backgroundStar}
+        style={{
+          width: size,
+          height: size,
+          transform: `translate(${transformX}px, ${transformY}px)`,
+        }}
+        xmlns="http://www.w3.org/2000/svg"
+        width="8"
+        height="9"
+        viewBox="0 0 8 9"
+        fill="none"
+        role="img"
+        aria-label="star"
+      >
+        <title />
+        <circle cx="4" cy="4.5" r="4" fill="url(#paint0_radial_2202_5618)" />
+        <defs>
+          <radialGradient
+            id="paint0_radial_2202_5618"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(4 4.49998) scale(3.77871 4.29149)"
+          >
+            <stop stopColor="#FF8B00" />
+            <stop offset="0.38" stopColor="#F2A65A" />
+            <stop offset="0.59" stopColor="#FFB966" />
+            <stop offset="0.92" stopColor="#FF8B00" />
+          </radialGradient>
+        </defs>
+      </svg>
+    </div>
+  );
+};
+
+export default BackgroundStar;