refactor(site): redesign home page with library components and improve responsiveness

- Replace manual HTML elements with Typography, Card, Row/Col, Flex, Statistic components
- Dynamically compute component stats and categories from router config
- Fix feature icons to use solid primary background with white icons
- Fix stats layout to show value above label using column-reverse
- Use CSS grid for category cards matching original design
- Override Typography heading specificity for custom sizing
- Make sidebar a full-height drawer with elevated background
- Keep nav links visible on small screens, hide secondary controls
- Spread otherProps on Card for onClick support
- Raise header z-index above sidebar drawer

Author: wangdicoder

components/card/card.tsx

@@ -20,6 +20,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     className,
     style,
     children,
+    ...otherProps
   } = props;
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('card', configContext.prefixCls, customisedCls);
@@ -81,7 +82,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   };
 
   return (
-    <div ref={ref} className={cls} style={style}>
+    <div ref={ref} {...otherProps} className={cls} style={style}>
       {renderHeader()}
       {renderChildren()}
       {renderFooter()}

site/src/components/header/header.scss

@@ -5,7 +5,7 @@
   width: 100%;
   top: 0;
   left: 0;
-  z-index: 100;
+  z-index: 101;
   height: $header-height;
   background: var(--ty-color-bg-elevated);
   border-bottom: 1px solid var(--ty-color-border-secondary);
@@ -164,7 +164,15 @@
   }
 
   @media (max-width: $size-xs) {
-    &__nav {
+    &__nav-item {
+      margin-left: 12px;
+      font-size: 14px;
+    }
+
+    &__version,
+    &__locale-toggle,
+    &__color-swatch,
+    &__theme-toggle {
       display: none;
     }
   }

site/src/components/sidebar-menu/sidebar-menu.scss

@@ -2,9 +2,12 @@
 
 .sidebar-menu {
   width: 250px;
-  height: calc(100% - #{$header-height});
   position: fixed;
+  top: $header-height;
+  bottom: 0;
+  left: 0;
   overflow-y: auto;
+  background: var(--ty-color-bg-elevated);
   border-right: 1px solid var(--ty-color-border);
   padding: 20px 0;
   z-index: 99;
@@ -98,9 +101,7 @@
   @media (max-width: $size-md) {
     transform: translateX(-100%);
     transition: transform 0.3s ease;
-    background: var(--ty-color-bg-elevated);
     z-index: 101;
-    top: $header-height;
 
     &_open {
       transform: translateX(0);

site/src/containers/home/home.scss

@@ -26,11 +26,6 @@
     background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ty-color-primary) 8%, transparent) 0%, transparent 70%);
   }
 
-  &__logo-container {
-    position: relative;
-    margin-right: 40px;
-  }
-
   &__react-login-container {
     position: absolute;
     left: 50%;
@@ -49,22 +44,25 @@
     width: 200px;
   }
 
-  &__title {
+  &__title.ty-typography {
     font-weight: 600;
     font-size: 45px;
     margin: 30px 0 0;
   }
 
-  &__subtitle {
+  &__subtitle.ty-typography {
     font-weight: 400;
-    margin: 10px 0 0 0;
     font-size: 24px;
     color: var(--ty-color-text-secondary);
   }
 
+  // Override Typography's adjacent sibling margin rules
+  &__slider .ty-typography + .ty-typography {
+    margin: 10px 0 0 0;
+  }
+
   &__btn-group {
     margin: 30px 0 0 0;
-    display: flex;
   }
 
   &__btn {
@@ -77,47 +75,79 @@
     padding: 70px 0;
   }
 
-  &__feature-title {
+  &__feature-title.ty-typography {
     text-align: center;
     font-weight: 500;
-    margin: 0px 0 40px;
+    margin: 0 0 40px;
   }
 
   &__features {
-    display: flex;
     padding: 0 40px;
-    flex-wrap: wrap;
   }
 
-  // Stats ribbon
-  &__stats {
+  &__feature-card {
+    text-align: center;
+    height: 100%;
+    background: transparent;
+    animation: fadeInUp 0.5s ease both;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: translateY(-4px);
+    }
+
+    h3.ty-typography {
+      margin: 0;
+      font-weight: 600;
+      font-size: 1.25rem;
+    }
+
+    p.ty-typography {
+      margin: 0;
+      color: var(--ty-color-text-secondary);
+      font-size: 15px;
+      line-height: 1.5;
+    }
+  }
+
+  &__feature-icon {
     display: flex;
+    align-items: center;
     justify-content: center;
-    gap: 60px;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: var(--ty-color-primary);
+    color: #fff;
+  }
+
+  // Stats ribbon
+  &__stats {
     padding: 50px 40px;
     background: color-mix(in srgb, var(--ty-color-primary) 4%, transparent);
     border-top: 1px solid var(--ty-color-border-secondary);
-  }
 
-  &__stat {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    animation: fadeInUp 0.5s ease both;
-  }
+    .ty-statistic {
+      display: flex;
+      flex-direction: column-reverse;
+      align-items: center;
+      animation: fadeInUp 0.5s ease both;
+    }
 
-  &__stat-value {
-    font-size: 36px;
-    font-weight: 700;
-    color: var(--ty-color-primary);
-  }
+    .ty-statistic__content {
+      color: var(--ty-color-primary);
+      font-size: 36px;
+      font-weight: 700;
+    }
 
-  &__stat-label {
-    margin-top: 6px;
-    font-size: 14px;
-    color: var(--ty-color-text-secondary);
-    text-transform: uppercase;
-    letter-spacing: 1px;
+    .ty-statistic__title {
+      margin-bottom: 0;
+      margin-top: 6px;
+      font-size: 14px;
+      color: var(--ty-color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
   }
 
   // Categories grid
@@ -128,20 +158,24 @@
     padding: 0 60px;
     max-width: 1000px;
     margin: 0 auto;
+
+    .ty-card + .ty-card {
+      margin-top: 0;
+    }
   }
 
   &__category {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 32px 16px;
-    border-radius: 12px;
-    border: 1px solid var(--ty-color-border-secondary);
-    background: var(--ty-color-bg-elevated);
     color: var(--ty-color-primary);
     cursor: pointer;
-    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
     animation: fadeInUp 0.5s ease both;
+    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+    padding: 32px 16px;
+    border-radius: 12px;
+
+    .ty-typography strong {
+      font-size: 16px;
+      color: var(--ty-color-text);
+    }
 
     &:hover {
       transform: translateY(-4px);
@@ -150,13 +184,6 @@
     }
   }
 
-  &__category-name {
-    margin: 14px 0 4px;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--ty-color-text);
-  }
-
   &__category-count {
     font-size: 13px;
     color: var(--ty-color-text-tertiary);
@@ -173,7 +200,6 @@
     }
 
     &__stats {
-      gap: 40px;
       padding: 40px 20px;
     }
 
@@ -187,12 +213,14 @@
       padding: 50px 0;
     }
 
-    &__title {
+    &__title.ty-typography {
       font-size: 32px;
     }
 
-    &__subtitle {
+    &__subtitle.ty-typography {
       font-size: 18px;
+      padding: 0 20px;
+      text-align: center;
     }
 
     &__react-logo {
@@ -205,31 +233,26 @@
     }
 
     &__stats {
-      flex-wrap: wrap;
       gap: 24px 40px;
-    }
 
-    &__stat-value {
-      font-size: 28px;
+      .ty-statistic__content {
+        font-size: 28px;
+      }
     }
 
     &__categories {
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       gap: 16px;
       padding: 0 20px;
     }
-
-    &__category {
-      padding: 24px 12px;
-    }
   }
 
   @media (max-width: $size-xs) {
-    &__title {
+    &__title.ty-typography {
       font-size: 26px;
     }
 
-    &__subtitle {
+    &__subtitle.ty-typography {
       font-size: 16px;
     }