feat: add Rstack title and desc

Author: chenjiahan

src/section-style/shared.module.scss

@@ -5,23 +5,13 @@
 // M 601 - 834
 // S < 601
 
-// XXL
-@media screen and (min-width: 1441px) {
-  .container {
-    padding: 96px 144px !important;
-  }
-  .titleAndDesc {
-    padding: 0px 144px 32px 144px !important;
-  }
-}
-
 // XL
-@media screen and (min-width: 1281px) and (max-width: 1440px) {
+@media screen and (min-width: 1281px) {
   .container {
     padding: 96px 144px !important;
   }
   .titleAndDesc {
-    padding: 0px 144px 32px 144px !important;
+    padding: 0px 144px 36px 144px !important;
   }
 }
 
@@ -31,24 +21,28 @@
     padding: 80px 80px !important;
   }
   .titleAndDesc {
-    padding: 0px 16px !important;
+    padding: 0px 16px 32px !important;
   }
 }
 
 // M
 @media screen and (min-width: 601px) and (max-width: 834px) {
   .container {
     padding: 64px 32px !important;
+
     .innerContainer {
       gap: 16px !important;
     }
   }
+
   .titleAndDesc {
-    padding: 0px 16px !important;
+    padding: 0px 16px 32px !important;
     gap: 16px !important;
+
     .title {
       font-size: 32px !important;
     }
+
     .desc {
       font-size: 16px !important;
       line-height: 28px !important;

src/tool-stack/index.module.scss

@@ -1,9 +1,10 @@
+// L - Large screens: three cards per row
 @media screen and (min-width: 1001px) {
   .tools {
     .tool {
-      min-width: calc(33.33% - 11px);
-      max-width: calc(33.33% - 11px);
-      flex: 0 0 calc(33.33% - 11px);
+      min-width: calc(33.33% - 21.33px);
+      max-width: calc(33.33% - 21.33px);
+      flex: 0 0 calc(33.33% - 21.33px);
     }
   }
 }
@@ -12,9 +13,9 @@
 @media screen and (min-width: 601px) and (max-width: 1000px) {
   .tools {
     .tool {
-      min-width: calc(50% - 8px);
-      max-width: calc(50% - 8px);
-      flex: 0 0 calc(50% - 8px);
+      min-width: calc(50% - 16px);
+      max-width: calc(50% - 16px);
+      flex: 0 0 calc(50% - 16px);
     }
   }
 }
@@ -60,7 +61,7 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 32px;
 }
 
 .tool {
@@ -69,7 +70,7 @@
 
   display: flex;
   flex: 1 1 0;
-  padding: 24px 16px;
+  padding: 24px;
   box-sizing: border-box;
 
   flex-direction: column;
@@ -110,5 +111,6 @@
     font-style: normal;
     font-weight: 400;
     line-height: 24px;
+    margin: 0;
   }
 }

src/tool-stack/index.tsx

@@ -1,5 +1,11 @@
 import type React from 'react';
 import { memo } from 'react';
+import {
+  descStyle,
+  innerContainerStyle,
+  titleAndDescStyle,
+  titleStyle,
+} from '../section-style';
 import styles from './index.module.scss';
 
 export const ToolStack: React.FC<{ lang: string }> = memo(({ lang }) => {
@@ -56,22 +62,37 @@ export const ToolStack: React.FC<{ lang: string }> = memo(({ lang }) => {
   ];
 
   return (
-    <div className={styles.tools}>
-      {tools.map(({ name, desc, logo, url }) => {
-        return (
-          <a
-            target="_blank"
-            rel="noreferrer"
-            className={styles.tool}
-            key={name}
-            href={url}
-          >
-            <img src={logo} alt={name} className={styles.logo} loading="lazy" />
-            <div className={styles.toolTitle}>{name}</div>
-            <p className={styles.toolDescription}>{desc}</p>
-          </a>
-        );
-      })}
+    <div className={innerContainerStyle}>
+      <div className={titleAndDescStyle}>
+        <h1 className={titleStyle}>Rstack</h1>
+        <p className={descStyle}>
+          {isEn
+            ? 'A unified JavaScript toolchain built around Rspack, with consistent architecture and ultimate performance'
+            : '围绕 Rspack 打造的统一 JavaScript 工具链，一致的底层架构，极致的性能体验'}
+        </p>
+      </div>
+      <div className={styles.tools}>
+        {tools.map(({ name, desc, logo, url }) => {
+          return (
+            <a
+              target="_blank"
+              rel="noreferrer"
+              className={styles.tool}
+              key={name}
+              href={url}
+            >
+              <img
+                src={logo}
+                alt={name}
+                className={styles.logo}
+                loading="lazy"
+              />
+              <div className={styles.toolTitle}>{name}</div>
+              <p className={styles.toolDescription}>{desc}</p>
+            </a>
+          );
+        })}
+      </div>
     </div>
   );
 });