docs: update

6 months ago · 75ff8c5885
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,6 @@

 # Dist
 node_modules
 dist/
 doc_build/

 # IDE
--- a/rstack-doc-ui/.gitignore
+++ b/rstack-doc-ui/.gitignore
@@ -15,7 +15,6 @@ node_modules/
 .eslintcache
 .changeset/pre.json

 dist/
 coverage/
 release/
 output/
--- a/rstack-doc-ui/dist/announcement/close.d.ts
+++ b/rstack-doc-ui/dist/announcement/close.d.ts
@@ -0,0 +1,3 @@
 import type { SVGProps } from 'react';
 declare function IconClose(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
 export default IconClose;
--- a/rstack-doc-ui/dist/announcement/index.css
+++ b/rstack-doc-ui/dist/announcement/index.css
@@ -0,0 +1,39 @@
 .bar-qLU0v0 {
  color: #fff;
  background-image: linear-gradient(279deg, #ff8b00 35.21%, #fb6d5b 63.34%);
  justify-content: center;
  align-items: center;
  height: 36px;
  display: flex;
  position: relative;
 }

 .link-O5NRCk {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
 }

 .link-O5NRCk:hover {
  opacity: .9;
  text-decoration: underline;
 }

 .link-O5NRCk:active {
  opacity: .7;
 }

 .close-UqNfF6 {
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 5px;
  font-size: 28px;
  position: absolute;
  right: 1.5rem;
 }

 .close-UqNfF6:hover {
  background-color: rgba(255, 255, 255, .3);
 }

--- a/rstack-doc-ui/dist/announcement/index.d.ts
+++ b/rstack-doc-ui/dist/announcement/index.d.ts
@@ -0,0 +1,7 @@
 export declare function Announcement({ href, message, localStorageKey, display, barClassName, }: {
    href: string;
    message: string | React.ReactNode;
    localStorageKey: string;
    display?: boolean;
    barClassName?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
--- a/rstack-doc-ui/dist/announcement/index.js
+++ b/rstack-doc-ui/dist/announcement/index.js
@@ -0,0 +1,50 @@
 import './index.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 function IconClose(props) {
    return /*#__PURE__*/ jsxs("svg", {
        viewBox: "0 0 1024 1024",
        fill: "currentColor",
        height: "1em",
        width: "1em",
        ...props,
        children: [
            /*#__PURE__*/ jsx("title", {
                children: "IconClose"
            }),
            /*#__PURE__*/ jsx("path", {
                d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
            })
        ]
    });
 }
 const announcement_close = IconClose;
 const index_module = {
    bar: "bar-qLU0v0",
    link: "link-O5NRCk",
    close: "close-UqNfF6"
 };
 function Announcement({ href, message, localStorageKey, display = true, barClassName }) {
    if (!display) return null;
    var _window_localStorage_getItem;
    const [disable, setDisable] = useState(null != (_window_localStorage_getItem = window.localStorage.getItem(localStorageKey)) ? _window_localStorage_getItem : false);
    if (disable) return null;
    return /*#__PURE__*/ jsxs("div", {
        className: `${index_module.bar} ${barClassName}`,
        children: [
            /*#__PURE__*/ jsx("a", {
                href: href,
                className: index_module.link,
                children: message
            }),
            /*#__PURE__*/ jsx(announcement_close, {
                onClick: ()=>{
                    setDisable(true);
                    window.localStorage.setItem(localStorageKey, 'true');
                },
                className: index_module.close
            })
        ]
    });
 }
 export { Announcement };
--- a/rstack-doc-ui/dist/antd/index.d.ts
+++ b/rstack-doc-ui/dist/antd/index.d.ts
@@ -0,0 +1,4 @@
 import Collapse from 'antd/es/collapse/Collapse';
 import ConfigProvider from 'antd/es/config-provider';
 import Tag from 'antd/es/tag';
 export { Collapse, ConfigProvider, Tag };
--- a/rstack-doc-ui/dist/antd/index.js
+++ b/rstack-doc-ui/dist/antd/index.js
--- a/rstack-doc-ui/dist/antd/index.js.LICENSE.txt
+++ b/rstack-doc-ui/dist/antd/index.js.LICENSE.txt
@@ -0,0 +1,31 @@
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */

 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

 /**
 * @license React
 * react-is.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

 /**
 * @license React
 * react-is.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

 /**![close](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdmlld0JveD0iNjQgNjQgODk2IDg5NiIgZm9jdXNhYmxlPSJmYWxzZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNzk5Ljg2IDE2Ni4zMWMuMDIgMCAuMDQuMDIuMDguMDZsNTcuNjkgNTcuN2MuMDQuMDMuMDUuMDUuMDYuMDhhLjEyLjEyIDAgMDEwIC4wNmMwIC4wMy0uMDIuMDUtLjA2LjA5TDU2OS45MyA1MTJsMjg3LjcgMjg3LjdjLjA0LjA0LjA1LjA2LjA2LjA5YS4xMi4xMiAwIDAxMCAuMDdjMCAuMDItLjAyLjA0LS4wNi4wOGwtNTcuNyA1Ny42OWMtLjAzLjA0LS4wNS4wNS0uMDcuMDZhLjEyLjEyIDAgMDEtLjA3IDBjLS4wMyAwLS4wNS0uMDItLjA5LS4wNkw1MTIgNTY5LjkzbC0yODcuNyAyODcuN2MtLjA0LjA0LS4wNi4wNS0uMDkuMDZhLjEyLjEyIDAgMDEtLjA3IDBjLS4wMiAwLS4wNC0uMDItLjA4LS4wNmwtNTcuNjktNTcuN2MtLjA0LS4wMy0uMDUtLjA1LS4wNi0uMDdhLjEyLjEyIDAgMDEwLS4wN2MwLS4wMy4wMi0uMDUuMDYtLjA5TDQ1NC4wNyA1MTJsLTI4Ny43LTI4Ny43Yy0uMDQtLjA0LS4wNS0uMDYtLjA2LS4wOWEuMTIuMTIgMCAwMTAtLjA3YzAtLjAyLjAyLS4wNC4wNi0uMDhsNTcuNy01Ny42OWMuMDMtLjA0LjA1LS4wNS4wNy0uMDZhLjEyLjEyIDAgMDEuMDcgMGMuMDMgMCAuMDUuMDIuMDkuMDZMNTEyIDQ1NC4wN2wyODcuNy0yODcuN2MuMDQtLjA0LjA2LS4wNS4wOS0uMDZhLjEyLjEyIDAgMDEuMDcgMHoiIC8+PC9zdmc+) */

 /**![right](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9IiNjYWNhY2EiIHZpZXdCb3g9IjY0IDY0IDg5NiA4OTYiIGZvY3VzYWJsZT0iZmFsc2UiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTc2NS43IDQ4Ni44TDMxNC45IDEzNC43QTcuOTcgNy45NyAwIDAwMzAyIDE0MXY3Ny4zYzAgNC45IDIuMyA5LjYgNi4xIDEyLjZsMzYwIDI4MS4xLTM2MCAyODEuMWMtMy45IDMtNi4xIDcuNy02LjEgMTIuNlY4ODNjMCA2LjcgNy43IDEwLjQgMTIuOSA2LjNsNDUwLjgtMzUyLjFhMzEuOTYgMzEuOTYgMCAwMDAtNTAuNHoiIC8+PC9zdmc+) */
--- a/rstack-doc-ui/dist/background-image/index.css
+++ b/rstack-doc-ui/dist/background-image/index.css
@@ -0,0 +1,12 @@
 .background-k7Kx8T {
  width: 100%;
  top: calc(-1 * var(--rp-nav-height));
  z-index: -1;
  filter: blur(2px);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  left: 0;
 }

--- a/rstack-doc-ui/dist/background-image/index.d.ts
+++ b/rstack-doc-ui/dist/background-image/index.d.ts
@@ -0,0 +1,5 @@
 import { type FC } from 'react';
 export type BackgroundProps = {
    navBarTopArrived?: boolean;
 };
 export declare const BackgroundImage: FC<BackgroundProps>;
--- a/rstack-doc-ui/dist/background-image/index.js
+++ b/rstack-doc-ui/dist/background-image/index.js
@@ -0,0 +1,49 @@
 import './index.css';
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 const index_module = {
    background: "background-k7Kx8T"
 };
 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 BackgroundImage = ({ 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 /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx("style", {
                children: ':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;}'
            }),
            /*#__PURE__*/ jsx("img", {
                className: index_module.background,
                src: "https://assets.rspack.rs/rspack/assets/landingpage-background-compressed.png",
                alt: "background"
            })
        ]
    });
 };
 export { BackgroundImage };
--- a/rstack-doc-ui/dist/benchmark/ProgressBar.d.ts
+++ b/rstack-doc-ui/dist/benchmark/ProgressBar.d.ts
@@ -0,0 +1,7 @@
 export declare function formatTime(time: number, totalTime: number): string;
 export declare function ProgressBar({ value, max, desc, inView, }: {
    value: number;
    max: number;
    desc: string;
    inView: boolean;
 }): import("react/jsx-runtime").JSX.Element;
--- a/rstack-doc-ui/dist/benchmark/index.css
+++ b/rstack-doc-ui/dist/benchmark/index.css
@@ -0,0 +1,122 @@
 .container-FuNiZu {
  box-sizing: content-box;
  border-radius: 10px;
  justify-content: space-between;
  align-self: stretch;
  align-items: center;
  width: 100%;
  height: 18px;
  display: flex;
 }

@media screen and (max-width: 1060px) {
  .container-FuNiZu {
    width: 85vw;
  }
 }

 .innerContainer-Fc0J9Z {
  background: var(--rp-c-gray-light-5);
  border-radius: 5px;
  justify-content: space-between;
  width: 100%;
  height: 8px;
  display: flex;
 }

 .dark .innerContainer-Fc0J9Z {
  background: var(--rp-c-bg-soft);
 }

 .bar-WHFMsk {
  background: var(--rs-benchmark-bar-background, linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%));
  border-radius: 5px;
  height: 100%;
 }

 .desc-lTD7cf {
  min-width: 100px;
  color: var(--rp-c-text-2);
  width: 100px;
  margin-left: 16px;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
  font-size: 12px;
 }

 .time-JXJR1M {
  text-align: left;
  width: 38px;
  display: inline-block;
 }

 .root-Ollge_ {
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
 }

 .title-JepjCS {
  color: var(--rp-c-text-1);
 }

 .desc-npKeId {
  color: var(--rp-c-text-2);
 }

 .bottomLink-pzbjuT {
  color: var(--rp-c-text-2);
  margin-top: 16px;
  font-size: 16px;
  display: block;
 }

 .bottomLink-pzbjuT:hover {
  color: var(--rp-c-link);
 }

 .progressName-Ke8hc2 {
  color: var(--rp-c-text-1);
  min-width: 170px;
  font-size: 17px;
  font-weight: 600;
 }

 .item-sOpi_3 {
  justify-content: center;
  align-self: stretch;
  align-items: center;
  width: 100%;
  padding: 1.25rem;
  display: flex;
 }

 .metricItem-YxRN9U {
  flex-direction: column;
  flex: 1 0;
  justify-content: center;
  align-items: center;
  display: flex;
 }

@media screen and (min-width: 1060px) {
  .item-sOpi_3 {
    flex-direction: row;
  }
 }

@media screen and (max-width: 1060px) {
  .item-sOpi_3 {
    flex-direction: column;
    align-items: flex-start;
  }

  .progressName-Ke8hc2 {
    width: 180px;
    margin-bottom: 8px;
  }
 }

--- a/rstack-doc-ui/dist/benchmark/index.d.ts
+++ b/rstack-doc-ui/dist/benchmark/index.d.ts
@@ -0,0 +1,11 @@
 export type BenchmarkData = Record<string, {
    label: string;
    metrics: Array<{
        time: number;
        desc: string;
    }>;
 }>;
 export interface BenchmarkProps {
    data: BenchmarkData;
 }
 export declare function Benchmark({ data }: BenchmarkProps): import("react/jsx-runtime").JSX.Element;
--- a/rstack-doc-ui/dist/benchmark/index.js
+++ b/rstack-doc-ui/dist/benchmark/index.js
@@ -0,0 +1,240 @@
 import './index.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { motion } from "framer-motion";
 "use client";
 var observerMap = /* @__PURE__ */ new Map();
 var RootIds = /* @__PURE__ */ new WeakMap();
 var rootId = 0;
 var unsupportedValue = void 0;
 function getRootId(root) {
    if (!root) return "0";
    if (RootIds.has(root)) return RootIds.get(root);
    rootId += 1;
    RootIds.set(root, rootId.toString());
    return RootIds.get(root);
 }
 function optionsToId(options) {
    return Object.keys(options).sort().filter((key)=>void 0 !== options[key]).map((key)=>`${key}_${"root" === key ? getRootId(options.root) : options[key]}`).toString();
 }
 function createObserver(options) {
    const id = optionsToId(options);
    let instance = observerMap.get(id);
    if (!instance) {
        const elements = /* @__PURE__ */ new Map();
        let thresholds;
        const observer = new IntersectionObserver((entries)=>{
            entries.forEach((entry)=>{
                var _a;
                const inView = entry.isIntersecting && thresholds.some((threshold)=>entry.intersectionRatio >= threshold);
                if (options.trackVisibility && void 0 === entry.isVisible) entry.isVisible = inView;
                null == (_a = elements.get(entry.target)) || _a.forEach((callback)=>{
                    callback(inView, entry);
                });
            });
        }, options);
        thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [
            options.threshold || 0
        ]);
        instance = {
            id,
            observer,
            elements
        };
        observerMap.set(id, instance);
    }
    return instance;
 }
 function observe(element, callback, options = {}, fallbackInView = unsupportedValue) {
    if (void 0 === window.IntersectionObserver && void 0 !== fallbackInView) {
        const bounds = element.getBoundingClientRect();
        callback(fallbackInView, {
            isIntersecting: fallbackInView,
            target: element,
            intersectionRatio: "number" == typeof options.threshold ? options.threshold : 0,
            time: 0,
            boundingClientRect: bounds,
            intersectionRect: bounds,
            rootBounds: bounds
        });
        return ()=>{};
    }
    const { id, observer, elements } = createObserver(options);
    const callbacks = elements.get(element) || [];
    if (!elements.has(element)) elements.set(element, callbacks);
    callbacks.push(callback);
    observer.observe(element);
    return function() {
        callbacks.splice(callbacks.indexOf(callback), 1);
        if (0 === callbacks.length) {
            elements.delete(element);
            observer.unobserve(element);
        }
        if (0 === elements.size) {
            observer.disconnect();
            observerMap.delete(id);
        }
    };
 }
 function useInView({ threshold, delay, trackVisibility, rootMargin, root, triggerOnce, skip, initialInView, fallbackInView, onChange } = {}) {
    var _a;
    const [ref, setRef] = useState(null);
    const callback = useRef(onChange);
    const [state, setState] = useState({
        inView: !!initialInView,
        entry: void 0
    });
    callback.current = onChange;
    useEffect(()=>{
        if (skip || !ref) return;
        let unobserve;
        unobserve = observe(ref, (inView, entry)=>{
            setState({
                inView,
                entry
            });
            if (callback.current) callback.current(inView, entry);
            if (entry.isIntersecting && triggerOnce && unobserve) {
                unobserve();
                unobserve = void 0;
            }
        }, {
            root,
            rootMargin,
            threshold,
            trackVisibility,
            delay
        }, fallbackInView);
        return ()=>{
            if (unobserve) unobserve();
        };
    }, [
        Array.isArray(threshold) ? threshold.toString() : threshold,
        ref,
        root,
        rootMargin,
        triggerOnce,
        skip,
        trackVisibility,
        fallbackInView,
        delay
    ]);
    const entryTarget = null == (_a = state.entry) ? void 0 : _a.target;
    const previousEntryTarget = useRef(void 0);
    if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {
        previousEntryTarget.current = entryTarget;
        setState({
            inView: !!initialInView,
            entry: void 0
        });
    }
    const result = [
        setRef,
        state.inView,
        state.entry
    ];
    result.ref = result[0];
    result.inView = result[1];
    result.entry = result[2];
    return result;
 }
 const ProgressBar_module = {
    container: "container-FuNiZu",
    innerContainer: "innerContainer-Fc0J9Z",
    bar: "bar-WHFMsk",
    desc: "desc-lTD7cf",
    time: "time-JXJR1M"
 };
 function formatTime(time, totalTime) {
    if (totalTime < 1000) return `${time.toFixed(0)}ms`;
    return `${(time / 1000).toFixed(2)}s`;
 }
 function ProgressBar({ value, max, desc, inView }) {
    const [elapsedTime, setElapsedTime] = useState(0);
    const TOTAL_TIME = 1000 * value;
    const variants = {
        initial: {
            width: 0
        },
        animate: {
            width: `${value / max * 100}%`
        }
    };
    const formattedTime = formatTime(elapsedTime, TOTAL_TIME);
    return /*#__PURE__*/ jsxs("div", {
        className: ProgressBar_module.container,
        children: [
            /*#__PURE__*/ jsx("div", {
                className: ProgressBar_module.innerContainer,
                children: inView ? /*#__PURE__*/ jsx(motion.div, {
                    className: ProgressBar_module.bar,
                    initial: "initial",
                    animate: "animate",
                    variants: variants,
                    onUpdate: (latest)=>{
                        const width = Number.parseFloat(latest.width);
                        setElapsedTime(width * max * 10);
                    },
                    transition: {
                        duration: value,
                        ease: 'linear'
                    }
                }) : null
            }),
            /*#__PURE__*/ jsxs("div", {
                className: ProgressBar_module.desc,
                children: [
                    /*#__PURE__*/ jsx("span", {
                        className: ProgressBar_module.time,
                        children: formattedTime
                    }),
                    " ",
                    desc
                ]
            })
        ]
    });
 }
 const index_module = {
    root: "root-Ollge_",
    title: "title-JepjCS",
    desc: "desc-npKeId",
    bottomLink: "bottomLink-pzbjuT",
    progressName: "progressName-Ke8hc2",
    item: "item-sOpi_3",
    metricItem: "metricItem-YxRN9U"
 };
 const findMaxTime = (data)=>{
    let max = 0;
    for (const item of Object.values(data))for (const metric of item.metrics)if (metric.time > max) max = metric.time;
    return max;
 };
 function Benchmark({ data }) {
    const maxTime = findMaxTime(data);
    const { ref, inView } = useInView({
        triggerOnce: true
    });
    return /*#__PURE__*/ jsx("div", {
        className: index_module.root,
        ref: ref,
        children: Object.values(data).map((item)=>/*#__PURE__*/ jsxs("div", {
                className: index_module.item,
                children: [
                    /*#__PURE__*/ jsx("p", {
                        className: index_module.progressName,
                        children: item.label
                    }),
                    /*#__PURE__*/ jsx("div", {
                        className: index_module.metricItem,
                        children: item.metrics.map((metric)=>/*#__PURE__*/ jsx(ProgressBar, {
                                value: metric.time,
                                max: maxTime,
                                desc: metric.desc,
                                inView: inView
                            }, metric.desc))
                    })
                ]
            }, item.label))
    });
 }
 export { Benchmark };
--- a/rstack-doc-ui/dist/built-with-rspack/index.css
+++ b/rstack-doc-ui/dist/built-with-rspack/index.css
@@ -0,0 +1,129 @@
@media screen and (min-width: 601px) and (max-width: 1050px) {
  .title-yh_kQ7 {
    font-size: 40px !important;
    line-height: 48px !important;
  }

  .innerContainer-z6bHq_ {
    background-size: 100% 100% !important;
  }

  .logo-vQfE2V {
    transform: scale(.8);
    flex: 1 0 !important;
    min-width: 180px !important;
  }
 }

@media screen and (max-width: 600px) {
  .title-yh_kQ7 {
    font-size: 30px !important;
    line-height: 48px !important;
  }

  .innerContainer-z6bHq_ {
    background-size: 100% 100% !important;
    padding: 48px 0 0 !important;
  }

  .innerContainer-z6bHq_:before, .innerContainer-z6bHq_:after {
    width: 300px !important;
    height: 300px !important;
  }

  .logo-vQfE2V {
    transform: scale(.8);
    flex: 1 0 50% !important;
    max-width: 50% !important;
  }
 }

 .innerContainer-z6bHq_ {
  box-sizing: border-box;
  background-size: 100% 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 64px 48px;
  display: flex;
  position: relative;
 }

 .innerContainer-z6bHq_:before {
  content: "";
  -webkit-user-select: none;
  user-select: none;
  z-index: -1;
  background: url("https://assets.rspack.rs/rspack/assets/landingpage-who-is-using-left-border.png") 0 0 / 100% 100% no-repeat;
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
 }

 .innerContainer-z6bHq_:after {
  content: "";
  -webkit-user-select: none;
  user-select: none;
  z-index: -1;
  background: url("https://assets.rspack.rs/rspack/assets/landingpage-who-is-using-right-border.png") 0 0 / 100% 100% no-repeat;
  width: 400px;
  height: 400px;
  position: absolute;
  bottom: 0;
  right: 0;
 }

 .title-yh_kQ7 {
  text-align: center;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: linear-gradient(279deg, #ff8b00 27.12%, #f93920 72.56%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
 }

 .logos-razs4s {
  filter: var(--rs-built-with-rspack-invert-filter, none);
  flex-wrap: wrap;
  align-self: stretch;
  align-items: flex-start;
  display: flex;
 }

 .logos-razs4s .logo-vQfE2V {
  flex: 250px;
  justify-content: center;
  align-self: stretch;
  align-items: center;
  gap: 8px;
  min-height: 100px;
  padding-left: 8px;
  padding-right: 8px;
  text-decoration: none;
  display: flex;
 }

 .logos-razs4s .logoText-ZwEAa5 {
  color: #0b0c0e;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
 }

 html:not(.dark) {
  --rs-built-with-rspack-invert-filter: none;
 }

 html.dark {
  --rs-built-with-rspack-invert-filter: invert(1);
 }

--- a/rstack-doc-ui/dist/built-with-rspack/index.d.ts
+++ b/rstack-doc-ui/dist/built-with-rspack/index.d.ts
@@ -0,0 +1,14 @@
 import { type LinkComp } from '../shared';
 export type Company = {
    name: string;
    logo: string;
    url: string;
    text?: string;
    width?: string | number;
 };
 export type BuiltWithRspackProps = {
    title: string;
    LinkComp?: LinkComp;
    companyList: Company[];
 };
 export declare const BuiltWithRspack: React.FC<BuiltWithRspackProps>;
--- a/rstack-doc-ui/dist/built-with-rspack/index.js
+++ b/rstack-doc-ui/dist/built-with-rspack/index.js
@@ -0,0 +1,57 @@
 import './index.css';
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const ALink = ({ className, href, children, style })=>/*#__PURE__*/ jsx("a", {
        href: href,
        className: className,
        style: style,
        children: children
    });
 const index_module = {
    title: "title-yh_kQ7",
    innerContainer: "innerContainer-z6bHq_",
    logo: "logo-vQfE2V",
    logos: "logos-razs4s",
    logoText: "logoText-ZwEAa5"
 };
 const CompanyItem = ({ item, LinkComp })=>{
    const { logo, name, url, text, width } = item;
    const Link = LinkComp;
    return /*#__PURE__*/ jsxs(Link, {
        className: index_module.logo,
        href: url,
        children: [
            /*#__PURE__*/ jsx("img", {
                src: logo,
                alt: name,
                style: {
                    width
                },
                loading: "lazy"
            }),
            void 0 !== text ? /*#__PURE__*/ jsx("span", {
                className: index_module.logoText,
                children: text
            }) : /*#__PURE__*/ jsx(Fragment, {})
        ]
    });
 };
 const BuiltWithRspack = ({ title, LinkComp, companyList })=>{
    const Link = null != LinkComp ? LinkComp : ALink;
    return /*#__PURE__*/ jsxs("div", {
        className: index_module.innerContainer,
        children: [
            /*#__PURE__*/ jsx("h2", {
                className: index_module.title,
                children: title
            }),
            /*#__PURE__*/ jsx("div", {
                className: index_module.logos,
                children: companyList.map((i)=>/*#__PURE__*/ jsx(CompanyItem, {
                        item: i,
                        LinkComp: Link
                    }, i.name))
            })
        ]
    });
 };
 export { BuiltWithRspack };
--- a/rstack-doc-ui/dist/fully-featured/index.css
+++ b/rstack-doc-ui/dist/fully-featured/index.css
@@ -0,0 +1,121 @@
@media screen and (min-width: 601px) and (max-width: 1000px) {
  .features-oTi3lz {
    flex-wrap: wrap !important;
    gap: 32px 16px !important;
  }

  .featureCard-bEvKlm {
    flex: 1 0 45% !important;
    max-width: 50% !important;
  }

  .main-tfEqLf {
    gap: 32px !important;
  }
 }

@media screen and (max-width: 600px) {
  .features-oTi3lz {
    flex-wrap: wrap;
  }

  .featureCard-bEvKlm {
    flex-direction: column !important;
    flex: 1 0 40% !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 50% !important;
  }

  .featureCard-bEvKlm .featureTitle-uGAlGf {
    text-align: center !important;
  }

  .featureCard-bEvKlm .featureDescription-gXsRi0 {
    display: none !important;
  }

  .main-tfEqLf {
    gap: 16px !important;
  }
 }

 .main-tfEqLf {
  flex-direction: column;
  align-items: center;
  gap: 32px;
  display: flex;
 }

 .features-oTi3lz {
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  display: flex;
 }

 .features-oTi3lz .featureCard-bEvKlm {
  flex: 25%;
  align-items: flex-start;
  gap: 16px;
  min-height: 110px;
  text-decoration: none;
  display: flex;
 }

 .features-oTi3lz .featureCard-bEvKlm h2, .features-oTi3lz .featureCard-bEvKlm p {
  margin: 0;
 }

 .features-oTi3lz .featureCard-bEvKlm:hover {
  opacity: .8;
  transition: all .2s ease-out;
  transform: scale(1.04);
 }

 .features-oTi3lz .featureCard-bEvKlm .icon-BFb1eH {
  filter: var(--rs-fully-featured-invert-filter, none);
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
 }

 .features-oTi3lz .featureCard-bEvKlm .featureContent-Uhsfzs {
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  display: flex;
 }

 .features-oTi3lz .featureCard-bEvKlm .featureContent-Uhsfzs .featureTitle-uGAlGf {
  color: var(--rs-fully-featured-title-color, #0b0c0e);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
 }

 .features-oTi3lz .featureCard-bEvKlm .featureContent-Uhsfzs .featureDescription-gXsRi0 {
  color: var(--rs-fully-featured-desc-color, #6b7075);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 23.8px;
 }

 html:not(.dark) {
  --rs-fully-featured-title-color: #0b0c0e;
  --rs-fully-featured-desc-color: #6b7075;
  --rs-fully-featured-invert-filter: none;
 }

 html.dark {
  --rs-fully-featured-title-color: white;
  --rs-fully-featured-desc-color: #c6cacd;
  --rs-fully-featured-invert-filter: invert(1);
 }

--- a/rstack-doc-ui/dist/fully-featured/index.d.ts
+++ b/rstack-doc-ui/dist/fully-featured/index.d.ts
@@ -0,0 +1,16 @@
 import type { FC } from 'react';
 import { type LinkComp } from '../shared';
 export type Feature = {
    icon: string;
    title: string;
    description: string;
    link: string;
 };
 export type FullyFeaturedProps = {
    LinkComp?: LinkComp;
    /**
     * 8 or 12 or 16
     */
    featureRows: Feature[][];
 };
 export declare const FullyFeatured: FC<FullyFeaturedProps>;
--- a/rstack-doc-ui/dist/fully-featured/index.js
+++ b/rstack-doc-ui/dist/fully-featured/index.js
@@ -0,0 +1,52 @@
 import './index.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 const ALink = ({ className, href, children, style })=>/*#__PURE__*/ jsx("a", {
        href: href,
        className: className,
        style: style,
        children: children
    });
 const index_module = {
    features: "features-oTi3lz",
    featureCard: "featureCard-bEvKlm",
    main: "main-tfEqLf",
    featureTitle: "featureTitle-uGAlGf",
    featureDescription: "featureDescription-gXsRi0",
    icon: "icon-BFb1eH",
    featureContent: "featureContent-Uhsfzs"
 };
 const FullyFeatured = ({ LinkComp, featureRows })=>{
    const Link = null != LinkComp ? LinkComp : ALink;
    return /*#__PURE__*/ jsx("div", {
        className: index_module.main,
        children: featureRows.map((row, index)=>/*#__PURE__*/ jsx("div", {
                className: index_module.features,
                children: row.map(({ icon, description, link, title }, index)=>/*#__PURE__*/ jsxs(Link, {
                        className: index_module.featureCard,
                        href: link,
                        children: [
                            /*#__PURE__*/ jsx("img", {
                                src: icon,
                                alt: index.toString(),
                                className: index_module.icon,
                                loading: "lazy"
                            }),
                            /*#__PURE__*/ jsxs("div", {
                                className: index_module.featureContent,
                                children: [
                                    /*#__PURE__*/ jsx("h2", {
                                        className: index_module.featureTitle,
                                        children: title
                                    }),
                                    /*#__PURE__*/ jsx("p", {
                                        className: index_module.featureDescription,
                                        children: description
                                    })
                                ]
                            })
                        ]
                    }, index))
            }, index))
    });
 };
 export { FullyFeatured };
--- a/rstack-doc-ui/dist/hero/BackgroundStar.d.ts
+++ b/rstack-doc-ui/dist/hero/BackgroundStar.d.ts
@@ -0,0 +1,8 @@
 declare const BackgroundStar: ({ top, left, pageX, pageY, size, }: {
    top: number | string;
    left: number | string;
    pageX: number | null;
    pageY: number | null;
    size: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default BackgroundStar;
--- a/rstack-doc-ui/dist/hero/index.css
+++ b/rstack-doc-ui/dist/hero/index.css
@@ -0,0 +1,204 @@
@media screen and (max-width: 600px) {
  .logoImg-jmnjG_ {
    height: 100px !important;
  }

  .buttonGroup-n4F2Ri {
    flex-direction: column;
    align-self: stretch;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    display: flex;
  }

  .button-J07D5g {
    width: 100% !important;
  }

  .innerHero-WcJ046 {
    height: auto !important;
    padding: 24px !important;
  }

  .title-ba4Gs7 {
    font-size: 32px !important;
    line-height: normal !important;
  }

  .subtitle-R5khYQ {
    font-size: 20px !important;
    line-height: normal !important;
  }

  .description-lQO4Vm {
    line-height: 20px;
    font-size: 16px !important;
  }

  .backgroundStarContainer-d5mYjB {
    display: none !important;
  }
 }

 html:not(.dark) {
  --rs-hero-title-color: #0b0c0e;
  --rstack-hero-desc-color: #6b7075;
 }

 html.dark {
  --rs-hero-title-color: white;
  --rstack-hero-desc-color: #c6cacd;
 }

 .hero-xzxNT7 {
  background-size: cover;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
 }

 .hero-xzxNT7 p, .hero-xzxNT7 h1 {
  margin: 0;
 }

 .innerHero-WcJ046 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 646px;
  padding: 64px 0;
  display: flex;
  position: relative;
 }

 .logo-kdns6B {
  -webkit-user-select: none;
  user-select: none;
  position: relative;
 }

 .logo-kdns6B .logoImg-jmnjG_ {
  height: 180px;
 }

 .logo-kdns6B .ovalBg-uD285_ {
  z-index: -1;
  background: var(--rs-hero-oval-background, #dfc228);
  width: 80%;
  height: 80%;
  filter: var(--rs-hero-oval-filter, blur(40px));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 50%;
  position: absolute;
  top: calc(50% + 5px);
  left: calc(50% + 5px);
  transform: translate(-50%, -50%);
 }

 .title-ba4Gs7 {
  text-align: center;
  background: var(--rs-hero-title-gradient, linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%));
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: 93.6px;
 }

 .subtitle-R5khYQ {
  color: var(--rs-hero-title-color, #0b0c0e);
  text-align: center;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: 72px;
 }

 .description-lQO4Vm {
  color: var(--rstack-hero-desc-color, #6b7075);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
 }

 .buttonGroup-n4F2Ri {
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  display: flex;
 }

 .button-J07D5g {
  text-align: center;
  text-transform: capitalize;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  padding: 12px 28px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
  transition: all .2s ease-in-out;
  display: flex;
 }

 .button-J07D5g:hover {
  opacity: .75;
  transform: translate3d(0, -2px, 0);
 }

 .button-J07D5g:active {
  opacity: .5;
 }

 .buttonPrimary-EUkFUR {
  background: var(--rs-hero-button-gradient, linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%));
  color: #fff;
  border: none;
 }

 .githubIcon-mAtLrO {
  color: currentColor;
  width: 22px;
  height: 22px;
  margin-right: 8px;
 }

 .buttonSecondary-OEOpVR {
  border: 1.5px solid var(--rs-hero-button-border, #ff8b00);
  color: var(--rs-hero-title-color, #0b0c0e);
  background: none;
 }

 .backgroundStarContainer-d5mYjB {
  z-index: -1;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
 }

 .backgroundStarContainer-d5mYjB .backgroundStar-t65ruH {
  filter: blur(2px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  transition: all .2s;
 }

--- a/rstack-doc-ui/dist/hero/index.d.ts
+++ b/rstack-doc-ui/dist/hero/index.d.ts
@@ -0,0 +1,16 @@
 import type { FC } from 'react';
 type HeroProps = {
    onClickGetStarted: () => void;
    onClickLearnMore?: () => void;
    showStars?: boolean;
    showOvalBg?: boolean;
    logoUrl?: string;
    title?: string;
    subTitle?: string;
    description?: string;
    getStartedButtonText?: string;
    learnMoreButtonText?: string;
    githubURL?: string;
 };
 export declare const Hero: FC<HeroProps>;
 export {};
--- a/rstack-doc-ui/dist/hero/index.js
+++ b/rstack-doc-ui/dist/hero/index.js
@@ -0,0 +1,349 @@
 import './index.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 const index_module = {
    logoImg: "logoImg-jmnjG_",
    buttonGroup: "buttonGroup-n4F2Ri",
    button: "button-J07D5g",
    innerHero: "innerHero-WcJ046",
    title: "title-ba4Gs7",
    subtitle: "subtitle-R5khYQ",
    description: "description-lQO4Vm",
    backgroundStarContainer: "backgroundStarContainer-d5mYjB",
    hero: "hero-xzxNT7",
    logo: "logo-kdns6B",
    ovalBg: "ovalBg-uD285_",
    buttonPrimary: "buttonPrimary-EUkFUR",
    githubIcon: "githubIcon-mAtLrO",
    buttonSecondary: "buttonSecondary-OEOpVR",
    backgroundStar: "backgroundStar-t65ruH"
 };
 const BackgroundStar_BackgroundStar = ({ top, left, pageX, pageY, size })=>{
    const ref = useRef();
    const [transformX, setTransformX] = useState(0);
    const [transformY, setTransformY] = useState(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 /*#__PURE__*/ jsx("div", {
        className: index_module.backgroundStarContainer,
        ref: ref,
        style: {
            top,
            left
        },
        children: /*#__PURE__*/ jsxs("svg", {
            className: index_module.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",
            children: [
                /*#__PURE__*/ jsx("title", {}),
                /*#__PURE__*/ jsx("circle", {
                    cx: "4",
                    cy: "4.5",
                    r: "4",
                    fill: "url(#paint0_radial_2202_5618)"
                }),
                /*#__PURE__*/ jsx("defs", {
                    children: /*#__PURE__*/ jsxs("radialGradient", {
                        id: "paint0_radial_2202_5618",
                        cx: "0",
                        cy: "0",
                        r: "1",
                        gradientUnits: "userSpaceOnUse",
                        gradientTransform: "translate(4 4.49998) scale(3.77871 4.29149)",
                        children: [
                            /*#__PURE__*/ jsx("stop", {
                                stopColor: "#FF8B00"
                            }),
                            /*#__PURE__*/ jsx("stop", {
                                offset: "0.38",
                                stopColor: "#F2A65A"
                            }),
                            /*#__PURE__*/ jsx("stop", {
                                offset: "0.59",
                                stopColor: "#FFB966"
                            }),
                            /*#__PURE__*/ jsx("stop", {
                                offset: "0.92",
                                stopColor: "#FF8B00"
                            })
                        ]
                    })
                })
            ]
        })
    });
 };
 const BackgroundStar = BackgroundStar_BackgroundStar;
 const positions = [
    [
        91.4,
        22.9
    ],
    [
        36,
        67.6
    ],
    [
        94.1,
        47.7
    ],
    [
        33.8,
        32.5
    ],
    [
        43.1,
        77.6
    ],
    [
        9.8,
        73.4
    ],
    [
        16.1,
        17.1
    ],
    [
        1,
        10
    ],
    [
        88.3,
        44.9
    ],
    [
        19.3,
        79
    ],
    [
        28.5,
        11.8
    ],
    [
        94.6,
        44.9
    ],
    [
        53.8,
        3.4
    ],
    [
        41.7,
        20
    ],
    [
        56.9,
        80.6
    ],
    [
        16.4,
        83.4
    ],
    [
        39.4,
        66.8
    ],
    [
        19,
        18.4
    ],
    [
        25.1,
        28.1
    ],
    [
        18.9,
        35.6
    ],
    [
        32.9,
        12.3
    ],
    [
        21.2,
        72.8
    ],
    [
        83.3,
        79.8
    ],
    [
        71.4,
        36.8
    ],
    [
        62.2,
        50.4
    ],
    [
        45.4,
        13.7
    ],
    [
        61.1,
        28.5
    ],
    [
        18.2,
        64.1
    ],
    [
        40.7,
        34.7
    ],
    [
        87.6,
        20.7
    ],
    [
        78.3,
        30.8
    ],
    [
        84.4,
        58.2
    ],
    [
        74.2,
        74.5
    ],
    [
        12.4,
        66.4
    ],
    [
        68.2,
        41.6
    ]
 ];
 const useMouseMove = ()=>{
    const ref = useRef();
    const [pageX, setPageX] = useState(null);
    const [pageY, setPageY] = useState(null);
    const handleMove = ({ pageX, pageY })=>{
        setPageX(pageX);
        setPageY(pageY);
    };
    return {
        ref,
        pageX,
        pageY,
        onMouseMove: handleMove
    };
 };
 const Hero = ({ onClickGetStarted, onClickLearnMore, showStars = false, showOvalBg = true, logoUrl = 'https://assets.rspack.rs/rspack/rspack-logo.svg', title = 'Rspack', subTitle = 'The fast Rust-based web bundler', description = 'Seamlessly replace webpack with compatible API', getStartedButtonText = 'Get Started', learnMoreButtonText = 'Learn More', githubURL })=>{
    const { pageX, pageY, ref, onMouseMove } = useMouseMove();
    return /*#__PURE__*/ jsx("section", {
        className: index_module.hero,
        ref: ref,
        onMouseMove: onMouseMove,
        children: /*#__PURE__*/ jsxs("div", {
            className: index_module.innerHero,
            children: [
                showStars ? positions.map(([top, left], i)=>/*#__PURE__*/ jsx(BackgroundStar, {
                        top: `${top}%`,
                        left: `${left}%`,
                        size: i / 20 + 3,
                        pageX: pageX,
                        pageY: pageY
                    }, i)) : null,
                /*#__PURE__*/ jsxs("div", {
                    className: index_module.logo,
                    children: [
                        /*#__PURE__*/ jsx("img", {
                            src: logoUrl,
                            className: `${index_module.logoImg} rs-logo`,
                            alt: "logo"
                        }),
                        showOvalBg ? /*#__PURE__*/ jsx("div", {
                            className: `${index_module.ovalBg} rs-oval`
                        }) : null
                    ]
                }),
                /*#__PURE__*/ jsx("h1", {
                    className: index_module.title,
                    children: /*#__PURE__*/ jsx("span", {
                        children: title
                    })
                }),
                /*#__PURE__*/ jsx("p", {
                    className: index_module.subtitle,
                    children: subTitle
                }),
                /*#__PURE__*/ jsx("p", {
                    className: index_module.description,
                    children: description
                }),
                /*#__PURE__*/ jsxs("div", {
                    className: index_module.buttonGroup,
                    children: [
                        /*#__PURE__*/ jsx("button", {
                            className: `${index_module.button} ${index_module.buttonPrimary}`,
                            type: "button",
                            onClick: onClickGetStarted,
                            children: getStartedButtonText
                        }),
                        githubURL ? /*#__PURE__*/ jsxs("a", {
                            href: githubURL,
                            target: "_blank",
                            rel: "noopener noreferrer",
                            className: `${index_module.button} ${index_module.buttonSecondary}`,
                            children: [
                                /*#__PURE__*/ jsxs("svg", {
                                    xmlns: "http://www.w3.org/2000/svg",
                                    width: "100%",
                                    viewBox: "0 0 24 24",
                                    className: index_module.githubIcon,
                                    children: [
                                        /*#__PURE__*/ jsx("title", {
                                            children: "GitHub"
                                        }),
                                        /*#__PURE__*/ jsx("path", {
                                            fill: "currentColor",
                                            d: "M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
                                        })
                                    ]
                                }),
                                "GitHub"
                            ]
                        }) : /*#__PURE__*/ jsx("button", {
                            className: `${index_module.button} ${index_module.buttonSecondary}`,
                            type: "button",
                            onClick: onClickLearnMore,
                            children: learnMoreButtonText
                        })
                    ]
                })
            ]
        })
    });
 };
 export { Hero };
--- a/rstack-doc-ui/dist/nav-icon/components/Link.d.ts
+++ b/rstack-doc-ui/dist/nav-icon/components/Link.d.ts
@@ -0,0 +1,14 @@
 import type { Lang } from '../utils';
 export type LinkInfo = {
    name: string;
    desc: string;
    descEn?: string;
    url: string;
    urlEn?: string;
    logo: string;
    logoScale?: number;
 };
 export type LinkProps = LinkInfo & {
    lang: Lang;
 };
 export declare const Link: (props: LinkProps) => import("react/jsx-runtime").JSX.Element;
--- a/rstack-doc-ui/dist/nav-icon/components/LinkGroup.d.ts
+++ b/rstack-doc-ui/dist/nav-icon/components/LinkGroup.d.ts
@@ -0,0 +1,8 @@
 import type { Lang } from '../utils';
 import { type LinkInfo } from './Link';
 export declare const LinkGroup: (props: {
    title: string;
    titleEn: string;
    lang: Lang;
    links: LinkInfo[];
 }) => import("react/jsx-runtime").JSX.Element;
--- a/rstack-doc-ui/dist/nav-icon/components/PopoverContent.d.ts
+++ b/rstack-doc-ui/dist/nav-icon/components/PopoverContent.d.ts
@@ -0,0 +1,5 @@
 import type { Lang, NavConfig } from '../utils';
 export declare const PopoverContent: ({ lang, config, }: {
    config: NavConfig;
    lang: Lang;
 }) => import("react/jsx-runtime").JSX.Element;
--- a/rstack-doc-ui/dist/nav-icon/index.css
+++ b/rstack-doc-ui/dist/nav-icon/index.css
@@ -0,0 +1,123 @@
 .root-M0JNBp {
  box-sizing: border-box;
  border-radius: 12px;
  align-items: center;
  width: 240px;
  margin-bottom: 12px;
  padding: 8px 0 8px 8px;
  text-decoration: none;
  transition: background-color .2s ease-in-out;
  display: inline-flex;
 }

 .root-M0JNBp:nth-child(odd) {
  margin-right: 16px;
 }

 .root-M0JNBp:hover {
  background-color: var(--rp-c-bg-mute);
 }

 .name-EwJVMq {
  color: var(--rp-c-text-1);
  font-size: 15px;
  font-weight: 500;
 }

 .desc-xLJBeI {
  color: rgba(60, 60, 60, .5);
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
 }

 .dark .desc-xLJBeI {
  color: rgba(255, 255, 255, .6);
 }

 .logo-rzjMA6 {
  object-fit: contain;
  width: 52px;
  height: 52px;
  margin-right: 20px;
 }

 .dark .logo-rzjMA6 {
  opacity: .9;
 }

 .root-PRenbw:not(:last-child) {
  margin-bottom: 12px;
 }

@media (min-width: 1600px) {
  .root-PRenbw:not(:last-child) {
    margin-bottom: 16px;
  }
 }

 .title-z0QBpw {
  color: var(--rp-c-text-1);
  margin: 0 0 8px 6px;
  font-size: 15px;
  font-weight: 500;
 }

 .root-nhoLZk {
  margin-right: 20px;
  padding-right: 20px;
  display: inline-block;
  position: relative;
 }

 .root-nhoLZk:after {
  content: " ";
  background-color: var(--rp-c-divider-light);
  width: 1px;
  height: 24px;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
 }

 .popover-fmVcBt {
  z-index: 999;
 }

 .popover-fmVcBt .ant-popover-inner {
  box-sizing: border-box;
  background-color: var(--rp-c-bg);
  border-radius: 24px;
  width: 552px;
  padding: 24px 28px 14px;
  font-family: Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  overflow: hidden;
 }

 .dark .popover-fmVcBt .ant-popover-inner {
  background-color: var(--rp-c-bg-soft);
 }

@media (max-width: 600px) {
  .popover-fmVcBt .ant-popover-inner {
    width: 80vw;
  }
 }

 .wrapper-u2FzAf {
  cursor: pointer;
  border-radius: 99px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transition: background-color .2s ease-in-out;
  display: flex;
 }

 .wrapper-u2FzAf:hover {
  background-color: var(--rp-c-bg-mute);
 }

--- a/rstack-doc-ui/dist/nav-icon/index.d.ts
+++ b/rstack-doc-ui/dist/nav-icon/index.d.ts
@@ -0,0 +1,6 @@
 import { type Lang } from './utils';
 export interface NavIconProps {
    lang?: Lang;
    trigger?: 'hover' | 'focus' | 'click';
 }
 export declare const NavIcon: (props?: NavIconProps) => import("react/jsx-runtime").JSX.Element;
--- a/rstack-doc-ui/dist/nav-icon/index.js
+++ b/rstack-doc-ui/dist/nav-icon/index.js
--- a/rstack-doc-ui/dist/nav-icon/index.js.LICENSE.txt
+++ b/rstack-doc-ui/dist/nav-icon/index.js.LICENSE.txt
@@ -0,0 +1,27 @@
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
 	http://jedwatson.github.io/classnames
 */

 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

 /**
 * @license React
 * react-is.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

 /**
 * @license React
 * react-is.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
--- a/rstack-doc-ui/dist/nav-icon/utils.d.ts
+++ b/rstack-doc-ui/dist/nav-icon/utils.d.ts
@@ -0,0 +1,8 @@
 import type { LinkInfo } from './components/Link';
 export type Lang = 'zh' | 'en';
 export declare function getLang(): Lang;
 export type NavConfig = Array<{
    title: string;
    titleEn: string;
    links: LinkInfo[];
 }>;
--- a/rstack-doc-ui/dist/section-style/index.css
+++ b/rstack-doc-ui/dist/section-style/index.css
@@ -0,0 +1,121 @@
@media screen and (min-width: 1281px) {
  .container-cRbIB3 {
    padding: 96px 144px !important;
  }

  .titleAndDesc-ubxR_3 {
    padding: 0 144px 28px !important;
  }
 }

@media screen and (min-width: 835px) and (max-width: 1280px) {
  .container-cRbIB3 {
    padding: 80px !important;
  }

  .titleAndDesc-ubxR_3 {
    padding: 0 16px 28px !important;
  }
 }

@media screen and (min-width: 601px) and (max-width: 834px) {
  .container-cRbIB3 {
    padding: 64px 32px !important;
  }

  .container-cRbIB3 .innerContainer-d_raLU {
    gap: 16px !important;
  }

  .titleAndDesc-ubxR_3 {
    gap: 16px !important;
    padding: 0 16px 28px !important;
  }

  .titleAndDesc-ubxR_3 .title-DiGDhG {
    font-size: 32px !important;
  }

  .titleAndDesc-ubxR_3 .desc-jYXnyt {
    font-size: 16px !important;
  }
 }

@media screen and (max-width: 600px) {
  .container-cRbIB3 {
    padding: 64px 24px 24px !important;
  }

  .container-cRbIB3 .innerContainer-d_raLU {
    gap: 16px !important;
  }

  .titleAndDesc-ubxR_3 {
    gap: 16px !important;
    padding: 0 16px !important;
  }

  .titleAndDesc-ubxR_3 .title-DiGDhG {
    font-size: 24px !important;
  }

  .titleAndDesc-ubxR_3 .desc-jYXnyt {
    font-size: 15px !important;
  }
 }

 .container-cRbIB3 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  display: flex;
 }

 .container-cRbIB3 .innerContainer-d_raLU {
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1296px;
  display: flex;
 }

 .titleAndDesc-ubxR_3 {
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  gap: 24px;
  padding: 0 144px 32px;
  display: flex;
 }

 .titleAndDesc-ubxR_3 .title-DiGDhG {
  color: var(--landingpage-title-color, #0b0c0e);
  text-align: center;
  margin: 0;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
 }

 .titleAndDesc-ubxR_3 .desc-jYXnyt {
  color: var(--landingpage-desc-color, #6b7075);
  text-align: center;
  max-width: 760px;
  margin: 0;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
 }

 html:not(.dark) {
  --landingpage-title-color: #0b0c0e;
  --landingpage-desc-color: #6b7075;
 }

 html.dark {
  --landingpage-title-color: white;
  --landingpage-desc-color: #c6cacd;
 }

--- a/rstack-doc-ui/dist/section-style/index.d.ts
+++ b/rstack-doc-ui/dist/section-style/index.d.ts
@@ -0,0 +1,6 @@
 declare const containerStyle: string;
 declare const innerContainerStyle: string;
 declare const titleAndDescStyle: string;
 declare const titleStyle: string;
 declare const descStyle: string;
 export { containerStyle, innerContainerStyle, titleAndDescStyle, titleStyle, descStyle, };
--- a/rstack-doc-ui/dist/section-style/index.js
+++ b/rstack-doc-ui/dist/section-style/index.js
@@ -0,0 +1,14 @@
 import './index.css';
 const shared_module = {
    container: "container-cRbIB3",
    titleAndDesc: "titleAndDesc-ubxR_3",
    innerContainer: "innerContainer-d_raLU",
    title: "title-DiGDhG",
    desc: "desc-jYXnyt"
 };
 const containerStyle = shared_module.container;
 const innerContainerStyle = shared_module.innerContainer;
 const titleAndDescStyle = shared_module.titleAndDesc;
 const titleStyle = shared_module.title;
 const descStyle = shared_module.desc;
 export { containerStyle, descStyle, innerContainerStyle, titleAndDescStyle, titleStyle };
--- a/rstack-doc-ui/dist/shared.d.ts
+++ b/rstack-doc-ui/dist/shared.d.ts
@@ -0,0 +1,13 @@
 import type { CSSProperties, ReactNode } from 'react';
 type LinkProps = {
    className: string;
    href: string;
    children: ReactNode;
    style?: CSSProperties;
 };
 export type LinkComp = (props: LinkProps) => JSX.Element;
 /**
 * A backup link component, import { Link } from 'rspress/theme' to replace it
 */
 export declare const ALink: LinkComp;
 export {};
--- a/rstack-doc-ui/dist/tool-stack/index.css
+++ b/rstack-doc-ui/dist/tool-stack/index.css
@@ -0,0 +1,247 @@
@media screen and (min-width: 1281px) {
  .container-cRbIB3 {
    padding: 96px 144px !important;
  }

  .titleAndDesc-ubxR_3 {
    padding: 0 144px 28px !important;
  }
 }

@media screen and (min-width: 835px) and (max-width: 1280px) {
  .container-cRbIB3 {
    padding: 80px !important;
  }

  .titleAndDesc-ubxR_3 {
    padding: 0 16px 28px !important;
  }
 }

@media screen and (min-width: 601px) and (max-width: 834px) {
  .container-cRbIB3 {
    padding: 64px 32px !important;
  }

  .container-cRbIB3 .innerContainer-d_raLU {
    gap: 16px !important;
  }

  .titleAndDesc-ubxR_3 {
    gap: 16px !important;
    padding: 0 16px 28px !important;
  }

  .titleAndDesc-ubxR_3 .title-DiGDhG {
    font-size: 32px !important;
  }

  .titleAndDesc-ubxR_3 .desc-jYXnyt {
    font-size: 16px !important;
  }
 }

@media screen and (max-width: 600px) {
  .container-cRbIB3 {
    padding: 64px 24px 24px !important;
  }

  .container-cRbIB3 .innerContainer-d_raLU {
    gap: 16px !important;
  }

  .titleAndDesc-ubxR_3 {
    gap: 16px !important;
    padding: 0 16px !important;
  }

  .titleAndDesc-ubxR_3 .title-DiGDhG {
    font-size: 24px !important;
  }

  .titleAndDesc-ubxR_3 .desc-jYXnyt {
    font-size: 15px !important;
  }
 }

 .container-cRbIB3 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px;
  display: flex;
 }

 .container-cRbIB3 .innerContainer-d_raLU {
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1296px;
  display: flex;
 }

 .titleAndDesc-ubxR_3 {
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  gap: 24px;
  padding: 0 144px 32px;
  display: flex;
 }

 .titleAndDesc-ubxR_3 .title-DiGDhG {
  color: var(--landingpage-title-color, #0b0c0e);
  text-align: center;
  margin: 0;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
 }

 .titleAndDesc-ubxR_3 .desc-jYXnyt {
  color: var(--landingpage-desc-color, #6b7075);
  text-align: center;
  max-width: 760px;
  margin: 0;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
 }

 html:not(.dark) {
  --landingpage-title-color: #0b0c0e;
  --landingpage-desc-color: #6b7075;
 }

 html.dark {
  --landingpage-title-color: white;
  --landingpage-desc-color: #c6cacd;
 }

@media screen and (min-width: 1101px) {
  .tools-DsyWdq .tool-_seSD7 {
    flex: 0 0 calc(33.33% - 21.33px);
    min-width: calc(33.33% - 21.33px);
    max-width: calc(33.33% - 21.33px);
  }
 }

@media screen and (min-width: 601px) and (max-width: 1100px) {
  .tools-DsyWdq .tool-_seSD7 {
    flex: 0 0 calc(50% - 16px);
    min-width: calc(50% - 16px);
    max-width: calc(50% - 16px);
  }
 }

@media screen and (max-width: 600px) {
  .tools-DsyWdq {
    flex-direction: column;
  }

  .tools-DsyWdq .tool-_seSD7 {
    width: 100%;
  }
 }

 html:not(.dark) {
  --rs-tool-stack-shadow-color: #f9f9f9;
  --rs-tool-stack-title-color: #0b0c0e;
  --rs-tool-stack-desc-color: #8fa1b9;
  --rs-tool-stack-card-stroke: rgba(143, 161, 185, .3);
  --rs-tool-stack-card-gradient: linear-gradient(135deg, #fff, rgba(249, 249, 249, .5));
  --rs-tools-stack-url-color: #f93920;
 }

 html.dark {
  --rs-tool-stack-shadow-color: #23272f;
  --rs-tool-stack-title-color: white;
  --rs-tool-stack-desc-color: #8fa1b9;
  --rs-tool-stack-card-stroke: #23272f;
  --rs-tool-stack-card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .03));
  --rs-tools-stack-url-color: #ff704d;
 }

 .tools-DsyWdq {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  display: flex;
 }

 .tool-_seSD7 {
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid var(--rs-tool-stack-card-stroke);
  background: var(--rs-tool-stack-card-gradient);
  border-radius: 10px;
  flex-direction: column;
  flex: 1 1 0;
  align-self: stretch;
  align-items: start;
  gap: 8px;
  padding: 24px;
  text-decoration: none;
  transition: all .2s ease-out;
  display: flex;
 }

 .tool-_seSD7:hover {
  transform: scale3d(1.03, 1.03, 1.03);
 }

 .tool-_seSD7 .logo-axzrU9 {
  object-fit: contain;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
 }

 .tool-_seSD7 .toolContent-c31Vj4 {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  display: flex;
 }

 .tool-_seSD7 .toolTitle-Q9zuUy {
  color: var(--rs-tool-stack-title-color);
  text-align: center;
  margin-top: 4px;
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
 }

 .tool-_seSD7 .toolDescription-taMfup {
  color: var(--rs-tool-stack-desc-color);
  text-align: left;
  height: 48px;
  margin: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
 }

 .tool-_seSD7 .toolUrl-GuRrnE {
  color: var(--rs-tools-stack-url-color);
  text-align: left;
  width: 100%;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  display: block;
 }

@keyframes rotate-Z9EF9r {
  100% {
    transform: rotate(1turn);
  }
 }

--- a/rstack-doc-ui/dist/tool-stack/index.d.ts
+++ b/rstack-doc-ui/dist/tool-stack/index.d.ts
@@ -0,0 +1,4 @@
 import type React from 'react';
 export declare const ToolStack: React.FC<{
    lang: string;
 }>;
--- a/rstack-doc-ui/dist/tool-stack/index.js
+++ b/rstack-doc-ui/dist/tool-stack/index.js
@@ -0,0 +1,123 @@
 import './index.css';
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 const shared_module = {
    container: "container-cRbIB3",
    titleAndDesc: "titleAndDesc-ubxR_3",
    innerContainer: "innerContainer-d_raLU",
    title: "title-DiGDhG",
    desc: "desc-jYXnyt"
 };
 shared_module.container;
 const innerContainerStyle = shared_module.innerContainer;
 const titleAndDescStyle = shared_module.titleAndDesc;
 const titleStyle = shared_module.title;
 const descStyle = shared_module.desc;
 const index_module = {
    tools: "tools-DsyWdq",
    tool: "tool-_seSD7",
    logo: "logo-axzrU9",
    toolContent: "toolContent-c31Vj4",
    toolTitle: "toolTitle-Q9zuUy",
    toolDescription: "toolDescription-taMfup",
    toolUrl: "toolUrl-GuRrnE",
    rotate: "rotate-Z9EF9r"
 };
 const ToolStack = /*#__PURE__*/ memo(({ lang })=>{
    const isEn = 'en' === lang;
    const tools = [
        {
            name: 'Rspack',
            desc: isEn ? 'A high performance JavaScript bundler written in Rust, with webpack-compatible API' : "\u57FA\u4E8E Rust \u7F16\u5199\u7684\u9AD8\u6027\u80FD JavaScript \u6253\u5305\u5DE5\u5177\uFF0C\u5177\u5907\u4E0E webpack \u517C\u5BB9\u7684 API",
            logo: 'https://assets.rspack.rs/rspack/rspack-logo.svg',
            url: 'https://rspack.rs',
            urlText: 'rspack.rs'
        },
        {
            name: 'Rsbuild',
            desc: isEn ? 'An Rspack-based build tool that provides out-of-the-box setup' : "\u57FA\u4E8E Rspack \u7684\u6784\u5EFA\u5DE5\u5177\uFF0C\u5305\u542B\u5F00\u7BB1\u5373\u7528\u7684\u9884\u8BBE\u914D\u7F6E\uFF0C\u5E26\u6765\u6109\u60A6\u7684\u5F00\u53D1\u4F53\u9A8C",
            logo: 'https://assets.rspack.rs/rsbuild/rsbuild-logo.svg',
            url: 'https://rsbuild.rs',
            urlText: 'rsbuild.rs'
        },
        {
            name: 'Rslib',
            desc: isEn ? 'A Rsbuild-based library development tool for creating libraries and UI components' : "\u57FA\u4E8E Rsbuild \u7684\u5E93\u5F00\u53D1\u5DE5\u5177\uFF0C\u4EE5\u7B80\u5355\u7684\u65B9\u5F0F\u521B\u5EFA JavaScript \u5E93\u548C UI \u7EC4\u4EF6\u5E93",
            logo: 'https://assets.rspack.rs/rslib/rslib-logo.svg',
            url: 'https://rslib.rs',
            urlText: 'rslib.rs'
        },
        {
            name: 'Rspress',
            desc: isEn ? 'An Rsbuild-based static site generator for creating documentation sites' : "\u57FA\u4E8E Rsbuild \u7684\u9759\u6001\u7AD9\u70B9\u751F\u6210\u5668\uFF0C\u7528\u4E8E\u521B\u5EFA\u4F18\u96C5\u7684\u6587\u6863\u7AD9\u70B9",
            logo: 'https://assets.rspack.rs/rspress/rspress-logo-480x480.png',
            url: 'https://rspress.rs',
            urlText: 'rspress.rs'
        },
        {
            name: 'Rsdoctor',
            desc: isEn ? 'A one-stop build analyzer that makes the build process transparent' : "\u4E00\u7AD9\u5F0F\u7684\u6784\u5EFA\u5206\u6790\u5DE5\u5177\uFF0C\u4F7F\u6784\u5EFA\u6D41\u7A0B\u53D8\u5F97\u900F\u660E\u3001\u53EF\u9884\u6D4B\u548C\u53EF\u4F18\u5316",
            logo: 'https://assets.rspack.rs/rsdoctor/rsdoctor-logo-480x480.png',
            url: 'https://rsdoctor.rs',
            urlText: 'rsdoctor.rs'
        },
        {
            name: 'Rstest',
            desc: isEn ? 'An testing framework that provides first-class support for Rspack ecosystem' : "\u57FA\u4E8E Rspack \u7684\u6D4B\u8BD5\u6846\u67B6\uFF0C\u4E3A Rspack \u751F\u6001\u63D0\u4F9B\u5168\u9762\u3001\u4E00\u6D41\u7684\u652F\u6301",
            logo: 'https://assets.rspack.rs/rstest/rstest-logo.svg',
            url: 'https://rstest.rs/',
            urlText: 'rstest.rs'
        }
    ];
    return /*#__PURE__*/ jsxs("div", {
        className: innerContainerStyle,
        children: [
            /*#__PURE__*/ jsxs("div", {
                className: titleAndDescStyle,
                children: [
                    /*#__PURE__*/ jsx("h1", {
                        className: titleStyle,
                        children: "Rstack"
                    }),
                    /*#__PURE__*/ jsx("p", {
                        className: descStyle,
                        children: isEn ? 'A unified JavaScript toolchain built around Rspack, with high performance and consistent architecture' : "\u56F4\u7ED5 Rspack \u6253\u9020\u7684 JavaScript \u7EDF\u4E00\u5DE5\u5177\u94FE\uFF0C\u5177\u6709\u4F18\u79C0\u7684\u6027\u80FD\u548C\u4E00\u81F4\u7684\u67B6\u6784"
                    })
                ]
            }),
            /*#__PURE__*/ jsx("div", {
                className: index_module.tools,
                children: tools.map(({ name, desc, logo, url, urlText })=>/*#__PURE__*/ jsxs("a", {
                        target: "_blank",
                        rel: "noreferrer",
                        className: [
                            index_module.tool,
                            index_module.rainbow
                        ].join(' '),
                        href: url,
                        children: [
                            /*#__PURE__*/ jsx("img", {
                                src: logo,
                                alt: name,
                                className: index_module.logo,
                                loading: "lazy"
                            }),
                            /*#__PURE__*/ jsx("div", {
                                className: index_module.toolTitle,
                                children: name
                            }),
                            /*#__PURE__*/ jsx("p", {
                                className: index_module.toolDescription,
                                children: desc
                            }),
                            /*#__PURE__*/ jsx("div", {
                                className: index_module.toolUrl,
                                children: urlText
                            })
                        ]
                    }, name))
            })
        ]
    });
 });
 export { ToolStack };
--- a/rstack-doc-ui/dist/why-rspack/index.css
+++ b/rstack-doc-ui/dist/why-rspack/index.css
@@ -0,0 +1,173 @@
@media screen and (min-width: 1281px) {
  .featureCard-pszTrm {
    flex: 1 0 20% !important;
  }
 }

@media screen and (min-width: 835px) and (max-width: 1280px) {
  .featureCard-pszTrm {
    min-width: 40% !important;
    max-width: 50% !important;
  }
 }

@media screen and (min-width: 601px) and (max-width: 834px) {
  .whyRspack-A_WTpz {
    padding: 16px !important;
  }

  .whyRspack-A_WTpz .whyRspackTitle-tp0mrZ {
    letter-spacing: -1.28px !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: normal !important;
  }

  .whyRspack-A_WTpz .whyRspackDescription-j70toO {
    font-size: 19px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
  }

  .featureCard-pszTrm {
    min-width: 45% !important;
    max-width: 50% !important;
  }

  .featureCard-pszTrm .featureCardInner-X8DiWy {
    padding: 16px !important;
  }

  .featureCard-pszTrm .featureDescription-yPv0tv {
    font-size: 14px !important;
  }
 }

@media screen and (max-width: 600px) {
  .whyRspack-A_WTpz {
    min-width: 100% !important;
    padding: 16px !important;
  }

  .whyRspack-A_WTpz .whyRspackTitle-tp0mrZ {
    letter-spacing: -.96px !important;
    font-size: 24px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
  }

  .whyRspack-A_WTpz .whyRspackDescription-j70toO {
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
  }

  .featureCard-pszTrm {
    min-width: 100% !important;
  }

  .featureCard-pszTrm .featureCardInner-X8DiWy {
    padding: 16px !important;
  }

  .featureCard-pszTrm .featureDescription-yPv0tv {
    font-size: 14px !important;
  }

  .whyRspackBg-DglQGL {
    max-width: 50% !important;
    max-height: 50% !important;
  }
 }

 html:not(.dark) {
  --rs-why-rspack-shadow-color: #f9f9f9;
  --rs-why-rspack-title-color: #0b0c0e;
  --rs-why-rspack-desc-color: #6b7075;
  --rs-why-rspack-card-stroke: rgba(226, 232, 240, .5);
  --rs-why-rspack-card-gradient: linear-gradient(135deg, #fff, rgba(249, 249, 249, .5));
  --rs-why-rspack-description-bg: linear-gradient(90deg, #0b0c0e 0%, rgba(11, 12, 14, .4) 100%);
 }

 html.dark {
  --rs-why-rspack-shadow-color: #23272f;
  --rs-why-rspack-title-color: white;
  --rs-why-rspack-desc-color: #c6cacd;
  --rs-why-rspack-card-stroke: #23272f;
  --rs-why-rspack-card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .03));
  --rs-why-rspack-description-bg: linear-gradient(87deg, #fff -2.53%, rgba(255, 255, 255, .4) 103.84%);
 }

 .features-VP6Ici {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  display: flex;
 }

 .features-VP6Ici .featureCard-pszTrm {
  flex: 1 0 30%;
  align-self: stretch;
  display: flex;
 }

 .features-VP6Ici .featureCard-pszTrm .featureCardInner-X8DiWy {
  border: 1px solid var(--rs-why-rspack-card-stroke);
  background: var(--rs-why-rspack-card-gradient);
  border-radius: 20px;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 16px;
  padding: 28px;
  text-decoration: none;
  display: flex;
 }

 .features-VP6Ici .featureCard-pszTrm .featureCardInner-X8DiWy .featureIcon-_1CaCl {
  -webkit-user-select: none;
  user-select: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
 }

 .features-VP6Ici .featureCard-pszTrm .featureCardInner-X8DiWy .featureIcon-_1CaCl .featureIconImg-XGmAIS {
  width: 150px;
  height: 110px;
 }

 .features-VP6Ici .featureCard-pszTrm .featureCardInner-X8DiWy .featureContent-DPzQJp {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  display: flex;
 }

 .features-VP6Ici .featureCard-pszTrm .featureCardInner-X8DiWy .featureContent-DPzQJp .featureTitle-WlHG0x {
  color: var(--rs-why-rspack-title-color);
  margin: 0;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
 }

 .features-VP6Ici .featureCard-pszTrm .featureCardInner-X8DiWy .featureContent-DPzQJp .featureDescription-yPv0tv {
  color: var(--rs-why-rspack-desc-color);
  margin: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
 }

--- a/rstack-doc-ui/dist/why-rspack/index.d.ts
+++ b/rstack-doc-ui/dist/why-rspack/index.d.ts
@@ -0,0 +1,15 @@
 import { type FC } from 'react';
 import { type LinkComp } from '../shared';
 export type Feature = {
    img: string;
    url: string;
    title: string;
    description: string;
    lottieJsonData?: any;
 };
 export type FeatureListProps = {
    features: Feature[];
    LinkComp?: LinkComp;
 };
 export type WhyRspackProps = FeatureListProps;
 export declare const WhyRspack: FC<WhyRspackProps>;
--- a/rstack-doc-ui/dist/why-rspack/index.js
+++ b/rstack-doc-ui/dist/why-rspack/index.js
--- a/rstack-doc-ui/dist/why-rspack/index.js.LICENSE.txt
+++ b/rstack-doc-ui/dist/why-rspack/index.js.LICENSE.txt
@@ -0,0 +1,8 @@
 /*!
   Transformation Matrix v2.0
   (c) Epistemex 2014-2015
   www.epistemex.com
   By Ken Fyrstenberg
   Contributions by leeoniya.
   License: MIT, header required.
   */
--- a/rstack-doc-ui/dist/why-rspack/useCardAnimation.d.ts
+++ b/rstack-doc-ui/dist/why-rspack/useCardAnimation.d.ts
@@ -0,0 +1,17 @@
 export declare const useCardAnimation: () => {
    ref: import("react").MutableRefObject<HTMLElement | undefined>;
    isHovering: boolean;
    shine: string;
    shineBg: string;
    container: string;
    outerContainer: string;
    onMouseEnter: () => void;
    onMouseLeave: () => void;
    onMouseMove: ({ pageX, pageY }: {
        pageX: number;
        pageY: number;
    }) => void;
    onTouchMove: (evt: any) => void;
    onTouchStart: () => void;
    onTouchEnd: () => void;
 };
--- a/rstack-doc-ui/dist/why-rspack/useLottieAnimation.d.ts
+++ b/rstack-doc-ui/dist/why-rspack/useLottieAnimation.d.ts
@@ -0,0 +1,3 @@
 export declare const useLottieAnimation: (isHovering: boolean, lottieJsonData?: string) => {
    ref: import("react").MutableRefObject<undefined>;
 };