docs: docs rewite

.dumi/component/Animation.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import { ZoomProps, Zoom as ZoomReveal } from 'react-awesome-reveal';
+
+export const Zoom = ({
+  children,
+  ...restProps
+}: ZoomProps & { children: any }) => {
+  return (
+    <ZoomReveal triggerOnce {...restProps}>
+      {children}
+    </ZoomReveal>
+  );
+};
+
+export default Zoom;

.dumi/component/Hero/TextWrap/index.tsx

@@ -1,7 +1,5 @@
+import { Zoom } from '@components/Animation';
 import React from 'react';
-// import Zoom from 'react-reveal/Zoom';
-
-const Zoom = ({ children }: { children: any }) => <>{children}</>;
 
 export const TextWrap = ({
   style,

.dumi/pages/index.tsx

@@ -9,7 +9,11 @@ import React from 'react';
 // import Zoom from 'react-reveal/Zoom';
 import { useLocalFormat } from 'useLocalFormat';
 
-const Zoom = ({ children }: { children: any }) => <>{children}</>;
+import { Zoom } from '@components/Animation';
+
+import { baseModelImg } from './const';
+
+// const Zoom = ({ children }: { children: any }) => <>{children}</>;
 
 // import Demo from '@components/Hero/Gif/Demo';
 
@@ -64,8 +68,30 @@ export default function App() {
         </div>
       </Zoom>
       <TextWrap
+        style={{ width: '100%' }}
         title={format({ id: 'hero.text.modelUI.desc' })}
-        content={format({ id: 'hero.text.modelUI.content' })}
+        content={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span style={{ flex: 1 }}>
+              {format({ id: 'hero.text.modelUI.content' })}
+            </span>
+            <span style={{ flex: 1, marginLeft: '10px' }}>
+              <img src={baseModelImg} alt="" style={{ width: '100%' }} />
+            </span>
+          </div>
+        }
+      />
+
+      <TextWrap
+        style={{ width: '50%' }}
+        title={format({ id: 'hero.text.watch.title.desc' })}
+        content={format({ id: 'hero.text.watch.content.desc' })}
+      />
+
+      <TextWrap
+        style={{ width: '80%' }}
+        title={format({ id: 'hero.text.watch.area.title.desc' })}
+        content={format({ id: 'hero.text.watch.area.content.desc' })}
       />
 
       <TextWrap

.dumi/theme/locales/en-US.json

@@ -16,7 +16,11 @@
   "hero.feature.type": "Provide complete type inference and form model data inference.",
   "hero.feature.sandPackage": "Online quiz",
   "hero.text.modelUI.desc": "Separation of data and UI.",
-  "hero.text.modelUI.content": "Data and UI should not be tied to each other, they should be independent. You can place rendered form controls anywhere without worrying about the impact and dependencies of handling data.",
+  "hero.text.modelUI.content": "Data and UI should not be tied to each other, they should be independent. React Form Simple provides a solution based on MVVM architecture design. By using the render function as a bridge, it binds the view to the model and realizes the separation of data and UI. You can place the rendered form controls anywhere without worrying about the impact and dependency issues brought by processing data.",
+  "hero.text.watch.title.desc": "Powerful data Observation",
+  "hero.text.watch.content.desc": "Improve the responsiveness of your form by listening to changes in individual input values. Subscribe to changes in field values ​​where needed without re-rendering the entire form.",
+  "hero.text.watch.area.title.desc": "Region Isolation Rendering",
+  "hero.text.watch.area.content.desc": "Have you considered how many times a user will trigger a component re-render? And have you optimized the performance issues after multiple renderings? React Form Simple uses regional isolation rendering of form items to reduce unnecessary performance loss.",
   "hero.text.try.desc": "Try it?",
   "hero.footer.source": "Related Resources",
   "hero.footer.useCase": "Use Cases",

.dumi/theme/locales/zh-CN.json

@@ -15,7 +15,11 @@
   "hero.feature.typeTitle": "类型推断",
   "hero.feature.type": "提供完整的类型推断, 表单模型数据推断。",
   "hero.text.modelUI.desc": "数据与UI的分离。",
-  "hero.text.modelUI.content": "数据和 UI 不应该相互捆绑，它们应该是独立的。您可以将渲染的表单控件放置在任何地方，而不必担心处理数据所带来的影响和依赖的问题。",
+  "hero.text.modelUI.content": "数据和 UI 不应该相互捆绑，它们应该是独立的。React Form Simple 提供了基于 MVVM 架构设计的解决方案。通过 render 函数作为桥梁，它将视图与模型绑定，实现了数据与 UI 的分离。您可以将渲染的表单控件放置在任何地方，而不必担心处理数据所带来的影响和依赖的问题。",
+  "hero.text.watch.title.desc": "强大的数据观测",
+  "hero.text.watch.content.desc": "监听独立的输入值变化提升表单的动态响应能力。在需要的地方订阅字段值的变化而无须重渲染整个表单。",
+  "hero.text.watch.area.title.desc": "区域隔离渲染",
+  "hero.text.watch.area.content.desc": "你是否考虑过用户会触发多少次组件的重渲染？以及是否优化过多次渲染后的性能问题？React Form Simple 采用表单项的区域隔离渲染，以减少不必要的性能损耗。",
   "hero.text.try.desc": "尝试一下?",
   "hero.feature.sandPackage": "在线小试",
   "hero.footer.source": "相关资源",

package.json

@@ -102,6 +102,7 @@
     "prettier-plugin-organize-imports": "^3.0.0",
     "prettier-plugin-packagejson": "^2.2.18",
     "react": "^18.0.0",
+    "react-awesome-reveal": "^4.2.12",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.0.0",
     "simplebar-react": "^3.2.4",