update v3.10.1

Co-authored-by: Copilot <copilot@github.com>

src/components/HomepageFeatures.tsx

@@ -1,38 +1,87 @@
 import React from 'react';
-import clsx from 'clsx';
+import Link from '@docusaurus/Link';
 import styles from './HomepageFeatures.module.css';
 
 interface FeatureItem {
+  id: string;
   title: string;
   description: string;
+  icon: React.ReactNode;
+  link: string;
+  color: string;
+  gradient: string;
 }
 
 const FeatureList: FeatureItem[] = [
   {
-    title: '📚 系统化文档',
+    id: 'backend',
+    title: '后端技术',
     description:
-      '涵盖后端（Spring Boot/Cloud）、前端（React/Vue）和算法（LeetCode），分门别类，清晰索引。',
+      '深度讲解 Spring Boot / Spring Cloud 核心概念、最佳实践与微服务架构，含真实项目案例。',
+    icon: '⚙️',
+    link: '/docs/backend-doc/intro-docs',
+    color: '#2160fd',
+    gradient: 'from-blue-500/20 to-transparent',
   },
   {
-    title: '⚡ 快速检索',
+    id: 'frontend',
+    title: '前端开发',
     description:
-      '集成 Algolia DocSearch，毫秒级全文检索，快速定位任意知识点。',
+      '系统化学习 React / Vue 现代框架、状态管理、组件设计与性能优化，打造高质量前端应用。',
+    icon: '⚛️',
+    link: '/docs/frontend-doc/intro-docs',
+    color: '#06b6d4',
+    gradient: 'from-cyan-500/20 to-transparent',
   },
   {
-    title: '🌐 持续更新',
+    id: 'algorithms',
+    title: '算法与面试',
     description:
-      '由技术团队持续维护，定期同步最新技术栈实践和面试题解析。',
+      '精选 LeetCode 题目分类讲解、编程面试题库与数据结构深度分析，快速突破算法关卡。',
+    icon: '🧠',
+    link: '/docs/LeetCode/intro-docs',
+    color: '#ec4899',
+    gradient: 'from-pink-500/20 to-transparent',
   },
 ];
 
-function Feature({ title, description }: FeatureItem): JSX.Element {
+interface FeatureCardProps extends FeatureItem {}
+
+function FeatureCard({
+  title,
+  description,
+  icon,
+  link,
+  color,
+  gradient,
+}: FeatureCardProps): JSX.Element {
   return (
-    <div className={clsx('col col--4')}>
-      <div className="text--center padding-horiz--md">
-        <h3>{title}</h3>
-        <p>{description}</p>
+    <Link
+      to={link}
+      className={`${styles.featureCard} group`}
+      style={
+        {
+          '--card-color': color,
+        } as React.CSSProperties & { '--card-color': string }
+      }
+    >
+      <div className={styles.cardInner}>
+        {/* Icon */}
+        <div className={styles.cardIcon}>{icon}</div>
+
+        {/* Content */}
+        <div className={styles.cardContent}>
+          <h3 className={styles.cardTitle}>{title}</h3>
+          <p className={styles.cardDescription}>{description}</p>
+        </div>
+
+        {/* Gradient Background */}
+        <div className={`${styles.cardGradient} ${gradient}`}></div>
+
+        {/* Arrow Icon */}
+        <div className={styles.cardArrow}>→</div>
       </div>
-    </div>
+    </Link>
   );
 }
 
@@ -40,9 +89,9 @@ export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">
-        <div className="row">
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
+        <div className={styles.featureGrid}>
+          {FeatureList.map((props) => (
+            <FeatureCard key={props.id} {...props} />
           ))}
         </div>
       </div>