docs: update homepage feature cards

website/i18n.json

@@ -27,21 +27,13 @@
     "en": "Configure the whole toolchain from a single rstack.config.ts file.",
     "zh": "在一份 rstack.config.ts 中配置完整工具链。"
   },
-  "fullWorkflow": {
-    "en": "Full Workflow",
-    "zh": "完整工作流"
-  },
-  "fullWorkflowDesc": {
-    "en": "Cover applications, libraries, tests, linting, docs, and staged files.",
-    "zh": "覆盖应用、库、测试、代码检查、文档和暂存文件。"
-  },
   "ecosystemPowered": {
     "en": "Rstack Powered",
     "zh": "Rstack 驱动"
   },
   "ecosystemPoweredDesc": {
-    "en": "Built on Rsbuild, Rslib, Rstest, Rslint, Rspress, and Oxfmt.",
-    "zh": "基于 Rsbuild、Rslib、Rstest、Rslint、Rspress 和 Oxfmt。"
+    "en": "Built on Rsbuild, Rslib, Rstest, Rslint, and Rspress.",
+    "zh": "基于 Rsbuild、Rslib、Rstest、Rslint 和 Rspress。"
   },
   "workflowFriendly": {
     "en": "Workflow Friendly",
@@ -51,14 +43,6 @@
     "en": "Keep using your preferred runtime, package manager, and task runner.",
     "zh": "继续使用你熟悉的运行时、包管理器和任务编排工具。"
   },
-  "composable": {
-    "en": "Composable",
-    "zh": "灵活组合"
-  },
-  "composableDesc": {
-    "en": "Adopt the commands you need while retaining access to the underlying tools.",
-    "zh": "按需采用不同命令，同时保留底层工具的完整能力。"
-  },
   "guide": {
     "en": "Guide",
     "zh": "指南"

website/theme/components/Features.tsx

@@ -1,48 +1,60 @@
 import { useI18n } from '@rspress/core/runtime';
-import { HomeFeature } from '@rspress/core/theme-original';
+import { Link } from '@rspress/core/theme-original';
 import { containerStyle, innerContainerStyle } from '@rstack-dev/doc-ui/section-style';
-import './Features.module.scss';
+import { type Feature, WhyRspack as BaseFeatures } from '@rstack-dev/doc-ui/why-rspack';
+import { memo, useMemo } from 'react';
+import CompatibleJson from './Features/assets/Compatible.json';
+import Compatible from './Features/assets/Compatible.svg';
+import FrameCheckJson from './Features/assets/FrameCheck.json';
+import FrameCheck from './Features/assets/FrameCheck.svg';
+import LightningJson from './Features/assets/Lightning.json';
+import Lightning from './Features/assets/Lightning.svg';
+import SpeedometerJson from './Features/assets/Speedometer.json';
+import Speedometer from './Features/assets/Speedometer.svg';
+import { useI18nUrl } from './utils';
 
-export function Features() {
+export const Features = memo(() => {
   const t = useI18n<typeof import('i18n')>();
-  const features = [
-    {
-      title: t('unifiedCli'),
-      details: t('unifiedCliDesc'),
-      icon: '⌨️',
-    },
-    {
-      title: t('oneConfig'),
-      details: t('oneConfigDesc'),
-      icon: '🧭',
-    },
-    {
-      title: t('fullWorkflow'),
-      details: t('fullWorkflowDesc'),
-      icon: '🧰',
-    },
-    {
-      title: t('ecosystemPowered'),
-      details: t('ecosystemPoweredDesc'),
-      icon: '⚡',
-    },
-    {
-      title: t('workflowFriendly'),
-      details: t('workflowFriendlyDesc'),
-      icon: '🤝',
-    },
-    {
-      title: t('composable'),
-      details: t('composableDesc'),
-      icon: '🧩',
-    },
-  ];
+  const tUrl = useI18nUrl();
+  const features: Feature[] = useMemo(
+    () => [
+      {
+        img: Speedometer,
+        url: tUrl('/guide/quick-start#cli-commands'),
+        title: t('unifiedCli'),
+        description: t('unifiedCliDesc'),
+        lottieJsonData: SpeedometerJson,
+      },
+      {
+        img: Lightning,
+        url: tUrl('/guide/configuration'),
+        title: t('oneConfig'),
+        description: t('oneConfigDesc'),
+        lottieJsonData: LightningJson,
+      },
+      {
+        img: FrameCheck,
+        url: tUrl('/guide/configuration'),
+        title: t('ecosystemPowered'),
+        description: t('ecosystemPoweredDesc'),
+        lottieJsonData: FrameCheckJson,
+      },
+      {
+        img: Compatible,
+        url: tUrl('/guide/quick-start'),
+        title: t('workflowFriendly'),
+        description: t('workflowFriendlyDesc'),
+        lottieJsonData: CompatibleJson,
+      },
+    ],
+    [t, tUrl],
+  );
 
   return (
     <section className={containerStyle}>
       <div className={innerContainerStyle}>
-        <HomeFeature features={features} />
+        <BaseFeatures features={features} LinkComp={Link} />
       </div>
     </section>
   );
-}
+});