From 786cd1d4f8440ac0460d61c5ef012dd4abefbb36 Mon Sep 17 00:00:00 2001
From: knoxnoe <gknoxnoe@gmail.com>
Date: Mon, 10 Mar 2025 14:39:33 +0800
Subject: [PATCH] fix(style): text visibility issue in english i18n

---
 apps/docs/src/en/guide/introduction.mdx | 89 ++++++++++++++++---------
 1 file changed, 57 insertions(+), 32 deletions(-)

diff --git a/apps/docs/src/en/guide/introduction.mdx b/apps/docs/src/en/guide/introduction.mdx
index 47a8af36..5e9d7145 100644
--- a/apps/docs/src/en/guide/introduction.mdx
+++ b/apps/docs/src/en/guide/introduction.mdx
@@ -5,38 +5,45 @@ FlowGram is a node-based flow building engine that helps developers quickly crea
 In today's AI-driven era, we are focusing more on how to empower workflows with AI, hence the AI suffix in our name.
 
 <div className="rs-highlight">
-  FlowGram = Flow + Program, suggesting that flows are like programs, with Condition, Loop, and even TryCatch nodes.
+  FlowGram = Flow + Program, suggesting that flows are like programs, with
+  Condition, Loop, and even TryCatch nodes.
 </div>
 
-
 ## Official Demo
 
-
-<div style={{marginTop: 16, display: 'flex', gap: 8 }}>
+<div style={{ marginTop: 16, display: "flex", gap: 8 }}>
   <div>
     <div>
-      <a className="rs-link" href="/en/examples/fixed-layout/fixed-feature-overview.html">
+      <a
+        className="rs-link"
+        href="/en/examples/fixed-layout/fixed-feature-overview.html"
+      >
         Fixed Layout
       </a>
     </div>
-    <div className="rs-tip" style={{ height: 54 }}>
-      Fixed layout with nodes/branches supporting specified position drag and drop, offering compound nodes like branches and loops
+    <div className="rs-tip" style={{ height: 84 }}>
+      Fixed layout with nodes/branches supporting specified position drag and
+      drop, offering compound nodes like branches and loops
     </div>
     <div>
-      <img loading="lazy" src="/fixed-layout/fixed-layout-demo.gif"/>
+      <img loading="lazy" src="/fixed-layout/fixed-layout-demo.gif" />
     </div>
   </div>
   <div>
     <div>
-      <a className="rs-link" href="/en/examples/free-layout/free-feature-overview.html">
+      <a
+        className="rs-link"
+        href="/en/examples/free-layout/free-feature-overview.html"
+      >
         Free Connection Layout
       </a>
     </div>
-    <div className="rs-tip" style={{ height: 54 }}>
-      Free layout where nodes can be moved to any position and connected through free connections
+    <div className="rs-tip" style={{ height: 84 }}>
+      Free layout where nodes can be moved to any position and connected through
+      free connections
     </div>
     <div>
-      <img loading="lazy" src="/free-layout/free-layout-demo.gif"/>
+      <img loading="lazy" src="/free-layout/free-layout-demo.gif" />
     </div>
   </div>
 </div>
@@ -50,7 +57,11 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>Motion Transitions</td>
     <td>
       <p>
-        Motion animations in web applications can be traced back to Material Design, which suggests that element changes in width, height, or position need a transition process. The canvas engine separates the drawing of lines and nodes, greatly reducing the cost of implementing motion transitions
+        Motion animations in web applications can be traced back to Material
+        Design, which suggests that element changes in width, height, or
+        position need a transition process. The canvas engine separates the
+        drawing of lines and nodes, greatly reducing the cost of implementing
+        motion transitions
       </p>
       <div className="rs-center">
         <img loading="lazy" src="/common/motion.gif" />
@@ -61,10 +72,12 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>Touchpad Gesture Zoom + Space Key Canvas Drag</td>
     <td>
       <p>
-        Gestures refer to Mac touchpad two-finger spread/pinch for canvas zoom in/out, or holding space to drag the canvas, interactions inspired by Sketch and Figma
+        Gestures refer to Mac touchpad two-finger spread/pinch for canvas zoom
+        in/out, or holding space to drag the canvas, interactions inspired by
+        Sketch and Figma
       </p>
       <div className="rs-center">
-        <img loading="lazy" src="/common/touch-pad.gif"  />
+        <img loading="lazy" src="/common/touch-pad.gif" />
       </div>
     </td>
   </tr>
@@ -72,7 +85,7 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>Minimap</td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/fixed-layout/minimap.gif"  />
+        <img loading="lazy" src="/fixed-layout/minimap.gif" />
       </div>
     </td>
   </tr>
@@ -80,7 +93,7 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>Undo/Redo</td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/fixed-layout/redo-undo.gif"  />
+        <img loading="lazy" src="/fixed-layout/redo-undo.gif" />
       </div>
     </td>
   </tr>
@@ -88,7 +101,7 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>Copy/Paste (Shortcut Support)</td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/fixed-layout/copypaste.gif"  />
+        <img loading="lazy" src="/fixed-layout/copypaste.gif" />
       </div>
     </td>
   </tr>
@@ -102,7 +115,7 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>
       <div className="rs-center">
         <div className="rs-center">
-          <img loading="lazy" src="/fixed-layout/dragdrop.gif"  />
+          <img loading="lazy" src="/fixed-layout/dragdrop.gif" />
         </div>
       </div>
     </td>
@@ -114,7 +127,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/fixed-layout/layout-change.gif"  />
+        <img loading="lazy" src="/fixed-layout/layout-change.gif" />
       </div>
     </td>
   </tr>
@@ -125,7 +138,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/fixed-layout/fold.gif"  />
+        <img loading="lazy" src="/fixed-layout/fold.gif" />
       </div>
     </td>
   </tr>
@@ -136,7 +149,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/fixed-layout/group.gif"  />
+        <img loading="lazy" src="/fixed-layout/group.gif" />
       </div>
     </td>
   </tr>
@@ -147,7 +160,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/free-layout/autolayout.gif"  />
+        <img loading="lazy" src="/free-layout/autolayout.gif" />
       </div>
     </td>
   </tr>
@@ -158,7 +171,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/free-layout/snap.gif"  />
+        <img loading="lazy" src="/free-layout/snap.gif" />
       </div>
     </td>
   </tr>
@@ -169,7 +182,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img loading="lazy" src="/free-layout/loop.gif"  />
+        <img loading="lazy" src="/free-layout/loop.gif" />
       </div>
     </td>
   </tr>
@@ -177,31 +190,43 @@ Providing a set of interactive best practices for smoother workflow operations
 
 ## Online Applications
 
-<div style={{marginTop: 16, display: 'flex', gap: 8 }}>
+<div style={{ marginTop: 16, display: "flex", gap: 8 }}>
   <div>
     <div>
-      <a className="rs-link" href="https://www.coze.com/open/docs/guides/workflow" target="_blank">
+      <a
+        className="rs-link"
+        href="https://www.coze.com/open/docs/guides/workflow"
+        target="_blank"
+      >
         Coze Workflow
       </a>
     </div>
     <div>
-      <img loading="lazy" src="/ref-coze-en.png"/>
+      <img loading="lazy" src="/ref-coze-en.png" />
     </div>
   </div>
   <div>
-    <a className="rs-link" href="https://ae.feishu.cn/hc/zh-CN/articles/120610822514" target="_blank" >
+    <a
+      className="rs-link"
+      href="https://ae.feishu.cn/hc/zh-CN/articles/120610822514"
+      target="_blank"
+    >
       Lark Low-code Platform Workflow
     </a>
     <div>
-      <img loading="lazy" src="/ref-apaas-en.png"/>
+      <img loading="lazy" src="/ref-apaas-en.png" />
     </div>
   </div>
   <div>
-    <a className="rs-link" href="https://www.feishu.cn/hc/en-US/articles/908751305974-overview-of-workflow-in-base" target="_blank" >
+    <a
+      className="rs-link"
+      href="https://www.feishu.cn/hc/en-US/articles/908751305974-overview-of-workflow-in-base"
+      target="_blank"
+    >
       Lark Base Workflow
     </a>
     <div>
-      <img loading="lazy" src="/ref-bitable-en.png"/>
+      <img loading="lazy" src="/ref-bitable-en.png" />
     </div>
   </div>
 </div>