feat: add tool image for the index page

Signed-off-by: peefy <xpf6677@163.com>

Author: Peefy

i18n/en/code.json

@@ -494,8 +494,14 @@
   "Trusted By": {
     "message": "Trusted By"
   },
-  "Integrate with Your Favorite Tools": {
-    "message": "Integrate with Your Favorite Tools"
+  "Integrate with Your Favorite Projects": {
+    "message": "Integrate with Your Favorite Projects"
+  },
+  "Tools for Experience": {
+    "message": "Tools for Experience"
+  },
+  "IDEs, SDKs, Sharing, Formatting, Testing, Documents": {
+    "message": "IDEs, SDKs, Sharing, Formatting, Testing, Documents"
   },
   "KCL is in": {
     "message": "KCL is in"

i18n/zh-CN/code.json

@@ -323,8 +323,14 @@
   "Trusted By": {
     "message": "工程师信赖的技术产品"
   },
-  "Integrate with Your Favorite Tools": {
-    "message": "与您最喜欢的工具集成"
+  "Integrate with Your Favorite Projects": {
+    "message": "与您最喜欢的项目集成"
+  },
+  "Tools for Experience": {
+    "message": "使用工具提升体验"
+  },
+  "IDEs, SDKs, Sharing, Formatting, Testing, Documents": {
+    "message": "IDEs, SDKs, Sharing, Formatting, Testing, Documents"
   },
   "KCL is in": {
     "message": "KCL 已经加入"

src/pages/index.module.css

@@ -192,3 +192,16 @@
     height: 64px;
   }
 }
+
+.toolLogo {
+  display: block;
+  margin: 20 auto;
+  max-width: 100%;
+  max-height: 840px;
+}
+
+@media screen and (max-width: 768px) {
+  .toolLogo {
+    max-height: 700px;
+  }
+}

src/pages/index.tsx

@@ -199,6 +199,37 @@ function ExampleSection() {
   );
 }
 
+function ToolSection() {
+  return (
+    <section>
+      <div className="container">
+        <div className="container text--center">
+          <h2
+            className={clsx("text--center")}
+            style={{ color: "var(--ifm-color-primary)" }}
+          >
+            <Translate>Tools for Experience</Translate>
+          </h2>
+          <p className={clsx("text--center", styles.description)}>
+            <Translate>IDEs, SDKs, Sharing, Formatting, Testing, Documents</Translate>
+          </p>
+
+          <div>
+            <ThemedImage
+              className={styles.toolLogo}
+              alt="Tool image"
+              sources={{
+                light: useBaseUrl("/img/registry-and-ide.png"),
+                dark: useBaseUrl("/img/registry-and-ide.png"),
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function IntegrationSection() {
   const integrations = [
     {
@@ -242,7 +273,7 @@ function IntegrationSection() {
           className={clsx("text--center")}
           style={{ color: "var(--ifm-color-primary)" }}
         >
-          <Translate>Integrate with Your Favorite Tools</Translate>
+          <Translate>Integrate with Your Favorite Projects</Translate>
         </h2>
         <div className={styles.whiteboard}>
           <div className="row">
@@ -387,6 +418,8 @@ export default function Home(): JSX.Element {
       <BreakSection />
       <ExampleSection />
       <BreakSection />
+      <ToolSection />
+      <BreakSection />
       <IntegrationSection />
       <BreakSection />
       <PartnerSection />