diff --git a/src/feature/home/Home.tsx b/src/feature/home/Home.tsx
index fc2c982..80e44eb 100644
--- a/src/feature/home/Home.tsx
+++ b/src/feature/home/Home.tsx
@@ -1,12 +1,116 @@
+import { NavLink } from 'react-router';
+import filmImg from '../../assets/categories/film.jpg';
+import musicImg from '../../assets/categories/music.jpg';
+import gameImg from '../../assets/categories/game.jpg';
+import otherImg from '../../assets/categories/other.jpg';
+// 假设你有排行榜数据，这里模拟一下，实际根据接口等替换
+const filmRankList = [
+  { id: 1, name: '影视作品1', view: '1.2万' },
+  { id: 2, name: '影视作品2', view: '1.1万' },
+  { id: 3, name: '影视作品3', view: '1.0万' },
+];
+const musicRankList = [
+  { id: 1, name: '音乐作品1', view: '1.5万' },
+  { id: 2, name: '音乐作品2', view: '1.3万' },
+  { id: 3, name: '音乐作品3', view: '1.2万' },
+];
+const gameRankList = [
+  { id: 1, name: '游戏作品1', view: '2.0万' },
+  { id: 2, name: '游戏作品2', view: '1.8万' },
+  { id: 3, name: '游戏作品3', view: '1.6万' },
+];
+const otherRankList = [
+  { id: 1, name: '其他作品1', view: '0.8万' },
+  { id: 2, name: '其他作品2', view: '0.7万' },
+  { id: 3, name: '其他作品3', view: '0.6万' },
+];
+
 function Home() {
+  const categories = [
+    { id: 'film', name: '影视', image: filmImg, rankList: filmRankList },
+    { id: 'music', name: '音乐', image: musicImg, rankList: musicRankList },
+    { id: 'game', name: '游戏', image: gameImg, rankList: gameRankList },
+    { id: 'other', name: '其他', image: otherImg, rankList: otherRankList },
+  ];
 
   return (
-    <>
-      主页
-    </>
-  )
+    <div className="max-w-7xl mx-auto px-4 py-16 flex flex-col items-center">
+      {/* 页面标题 */}
+      <h1 className="text-[clamp(2rem,5vw,3.5rem)] font-bold text-center mb-12 text-gray-800 tracking-tight">
+        欢迎访问创意协作平台
+      </h1>
+
+      {/* 分区 + 排行榜 容器，改为 flex 布局 */}
+      <div className="w-full flex max-w-6xl mx-auto">
+        {/* 分区卡片容器 - 响应式网格布局 */}
+        <div className="grid grid-cols-4 gap-6 w-3/4">
+          {categories.map((category) => (
+            <div 
+              key={category.id}
+              className="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
+            >
+              <NavLink to={`/categories/${category.id}`} className="block">
+                {/* 图片容器 */}
+                <div className="aspect-[4/3] relative overflow-hidden">
+                  {/* 背景图片 - 带模糊和亮度调整 */}
+                  <img 
+                    src={category.image}
+                    alt={category.name}
+                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                    style={{ filter: 'blur(1px) brightness(0.85)' }}
+                  />
+
+                  {/* 渐变遮罩层 - 增强文字可读性 */}
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>
+
+                  {/* 文字内容 */}
+                  <div className="absolute inset-0 flex flex-col items-center justify-center p-4 z-20">
+                    {/* 分类标题 - 艺术字体 */}
+                    <h2 className="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white text-center mb-2" style={{
+                      fontFamily: '"Playfair Display", serif',
+                      textShadow: '0 4px 12px rgba(0,0,0,0.8)',
+                      transform: 'translateY(10px)',
+                      transition: 'transform 0.3s ease-out',
+                      letterSpacing: '2px',
+                      borderBottom: '2px solid rgba(255,255,255,0.6)',
+                      paddingBottom: '4px'
+                    }}>
+                      {category.name}
+                    </h2>
+
+                    {/* 描述文本 - 悬停显示 */}
+                    <p className="text-indigo-100 text-center opacity-0 transform translate-y-4 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0 mt-2" style={{
+                      fontFamily: '"Merriweather", serif',
+                      textShadow: '0 2px 6px rgba(0,0,0,0.6)'
+                    }}>
+                      探索{category.name}创意项目
+                    </p>
+                  </div>
+                </div>
+              </NavLink>
+            </div>
+          ))}
+        </div>
+
+        {/* 排行榜区域 - 右侧 */}
+        <div className="w-1/4 pl-6">
+          {categories.map((category) => (
+            <div key={category.id} className="mb-8">
+              <h3 className="text-xl font-bold text-gray-800 mb-4">{category.name}排行榜</h3>
+              <ul>
+                {category.rankList.map((item) => (
+                  <li key={item.id} className="flex justify-between items-center mb-2">
+                    <span>{item.name}</span>
+                    <span className="text-gray-600">{item.view}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }
 
-
-
-export default Home
+export default Home;
\ No newline at end of file