chore: docs add ref (#850)

* chore: docs add ref

* style: display

apps/docs/src/en/guide/introduction.mdx

@@ -190,8 +190,8 @@ Providing a set of interactive best practices for smoother workflow operations
 
 ## Online Applications
 
-<div style={{ marginTop: 16, display: "flex", gap: 8 }}>
-  <div>
+<div style={{ marginTop: 16, display: "flex", gap: 8, flexWrap: 'wrap' }}>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
     <div>
       <a
         className="rs-link"
@@ -205,7 +205,7 @@ Providing a set of interactive best practices for smoother workflow operations
       <img loading="lazy" src="/ref-coze-en.png" />
     </div>
   </div>
-  <div>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
     <a
       className="rs-link"
       href="https://ae.feishu.cn/hc/zh-CN/articles/120610822514"
@@ -217,7 +217,7 @@ Providing a set of interactive best practices for smoother workflow operations
       <img loading="lazy" src="/ref-apaas-en.png" />
     </div>
   </div>
-  <div>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
     <a
       className="rs-link"
       href="https://www.feishu.cn/hc/en-US/articles/908751305974-overview-of-workflow-in-base"
@@ -229,4 +229,20 @@ Providing a set of interactive best practices for smoother workflow operations
       <img loading="lazy" src="/ref-bitable-en.png" />
     </div>
   </div>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
+    <a className="rs-link" href="https://github.com/NNDeploy/nndeploy" target="_blank" >
+      nndeploy
+    </a>
+    <div>
+      <img loading="lazy" src="/ref-nndeploy.png"/>
+    </div>
+  </div>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
+    <a className="rs-link" href="https://github.com/certimate-go/certimate" target="_blank" >
+      Certimate
+    </a>
+    <div>
+      <img loading="lazy" src="/ref-certimate.png"/>
+    </div>
+  </div>
 </div>

apps/docs/src/en/index.md

@@ -22,4 +22,8 @@ features:
     details: <div class="rspress-doc" style="height&#58 180px; min-height&#58 0px"><img class="medium-zoom-image" style="border-radius&#58 8px;" src="https://flowgram.ai/ref-apaas-en.png"/></div>
   - title: Feishu Base
     details: <div class="rspress-doc" style="height&#58 180px; min-height&#58 0px"><img class="medium-zoom-image" style="border-radius&#58 8px;" src="https://flowgram.ai/ref-bitable-en.png"/></div>
+  - title: nndeploy
+    details: <div class="rspress-doc" style="height&#58 180px; min-height&#58 0px"><img class="medium-zoom-image" style="border-radius&#58 8px;" src="https://flowgram.ai/ref-nndeploy.png"/></div>
+  - title: Certimate
+    details: <div class="rspress-doc" style="height&#58 180px; min-height&#58 0px"><img class="medium-zoom-image" style="border-radius&#58 8px;" src="https://flowgram.ai/ref-certimate.png"/></div>
 ---

apps/docs/src/zh/guide/introduction.mdx

@@ -177,8 +177,8 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
 
 ## 线上应用
 
-<div style={{marginTop: 16, display: 'flex', gap: 8 }}>
-  <div>
+<div style={{marginTop: 16, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
     <div>
       <a className="rs-link" href="https://www.coze.cn/open/docs/guides/workflow" target="_blank">
         扣子工作流
@@ -188,7 +188,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
       <img loading="lazy" src="/ref-coze.png"/>
     </div>
   </div>
-  <div>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
     <a className="rs-link" href="https://ae.feishu.cn/hc/zh-CN/articles/120610822514" target="_blank" >
       飞书低代码平台工作流
     </a>
@@ -196,7 +196,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
       <img loading="lazy" src="/ref-apaas.png"/>
     </div>
   </div>
-  <div>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
     <a className="rs-link" href="https://www.feishu.cn/hc/zh-CN/articles/908751305974-%E4%BB%80%E4%B9%88%E6%98%AF%E5%A4%9A%E7%BB%B4%E8%A1%A8%E6%A0%BC%E5%B7%A5%E4%BD%9C%E6%B5%81" target="_blank" >
       飞书多维表格工作流
     </a>
@@ -204,6 +204,22 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
       <img loading="lazy" src="/ref-bitable.png"/>
     </div>
   </div>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
+    <a className="rs-link" href="https://github.com/NNDeploy/nndeploy" target="_blank" >
+      nndeploy
+    </a>
+    <div>
+      <img loading="lazy" src="/ref-nndeploy.png"/>
+    </div>
+  </div>
+  <div style={{flex: '0 0 30%', boxSizing: 'border-box'}}>
+    <a className="rs-link" href="https://github.com/certimate-go/certimate" target="_blank" >
+      Certimate
+    </a>
+    <div>
+      <img loading="lazy" src="/ref-certimate.png"/>
+    </div>
+  </div>
 </div>
 
 

apps/docs/src/zh/index.md

@@ -22,4 +22,8 @@ features:
     details: <div class="rspress-doc" style="height&#58 180px; min-height&#58 0px"><img class="medium-zoom-image" style="border-radius&#58 8px;" src="https://flowgram.ai/ref-apaas.png"/></div>
   - title: 飞书多维表格
     details: <div class="rspress-doc" style="height&#58 180px; min-height&#58 0px"><img class="medium-zoom-image" style="border-radius&#58 8px;" src="https://flowgram.ai/ref-bitable.png"/></div>
+  - title: nndeploy
+    details: <div class="rspress-doc" style="height&#58 180px; min-height&#58 0px"><img class="medium-zoom-image" style="border-radius&#58 8px;" src="https://flowgram.ai/ref-nndeploy.png"/></div>
+  - title: Certimate
+    details: <div class="rspress-doc" style="height&#58 180px; min-height&#58 0px"><img class="medium-zoom-image" style="border-radius&#58 8px;" src="https://flowgram.ai/ref-certimate.png"/></div>
 ---