diff --git a/src/pages/Home.css b/src/pages/Home.css
new file mode 100644
index 0000000..8510372
--- /dev/null
+++ b/src/pages/Home.css
@@ -0,0 +1,20 @@
+.home-layout {
+    min-height: 100vh;
+    background-color: #f0f2f5;
+}
+
+.home-header {
+    background-color: #001529;
+    padding: 0 24px;
+    height: 64px;
+}
+
+.home-content {
+    padding: 24px 0;
+}
+
+.post-card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..437feda
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,74 @@
+// pages/Home.js
+import React, { useState, useEffect } from 'react';
+import { getActivityPreviews, getFullActivities } from '../api/activity';
+import RecommendAll from '../components/RecommendAll'; // 假设你有一个推荐预览组件
+import RecommendPreview from '../components/RecommendPreview';
+import Navbar from '../components/Navbar'; // 导航栏组件
+
+const Home = () => {
+  const [activityPreviews, setActivityPreviews] = useState([]);
+  const [fullActivities, setFullActivities] = useState([]);
+  const [selectedActivityId, setSelectedActivityId] = useState(null);
+
+  useEffect(() => {
+    getActivityPreviews().then(res => setActivityPreviews(res.data));
+    getFullActivities().then(res => setFullActivities(res.data));
+  }, []);
+
+  const selectedActivity = fullActivities.find(
+    activity => activity.activityid === selectedActivityId
+  );
+
+  return (
+    <div>
+      <Navbar className="fixed top-0 left-0 w-full z-50" /> {/* 导航栏组件 */}
+      <h1 className="text-3xl font-bold text-center mb-4">社交互动平台 - 首页</h1>
+      
+      {/* 活动区域 */}
+      <div className="bg-white p-4 rounded shadow mb-8">
+        <h2 className="text-xl font-semibold mb-4">活动预览</h2>
+        {!selectedActivity ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            {activityPreviews.map(activity => (
+              <div key={activity.activityid} className="border p-3 rounded shadow">
+                <h3 className="text-lg font-medium mb-2">{activity.title}</h3>
+                <img
+                  src={activity.photo}
+                  alt={activity.title}
+                  className="w-full h-40 object-cover mb-2 rounded"
+                />
+                <button
+                  className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"
+                  onClick={() => setSelectedActivityId(activity.activityid)}
+                >
+                  查看详情
+                </button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="p-4 border rounded shadow">
+            <button
+              className="mb-4 text-blue-600 underline"
+              onClick={() => setSelectedActivityId(null)}
+            >
+              ← 返回列表
+            </button>
+            <h3 className="text-2xl font-bold mb-2">{selectedActivity.title}</h3>
+            <img
+              src={selectedActivity.photo}
+              alt={selectedActivity.title}
+              className="w-full h-60 object-cover rounded mb-4"
+            />
+            <p className="mb-2"><strong>内容：</strong>{selectedActivity.content}</p>
+            <p className="mb-2"><strong>时间：</strong>{selectedActivity.time}</p>
+            <p className="mb-2"><strong>奖励：</strong>{selectedActivity.award}</p>
+          </div>
+        )}
+      </div>
+       <RecommendPreview />
+    </div>
+  );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/pages/MainPage.css b/src/pages/MainPage.css
new file mode 100644
index 0000000..91325c9
--- /dev/null
+++ b/src/pages/MainPage.css
@@ -0,0 +1,63 @@
+/* src/pages/MainPage.css */
+
+.main-page-wrapper {
+    min-height: 100vh;
+    background-color: #f0f2f5;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.main-page-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 32px 16px;
+}
+
+/* 欢迎区 */
+.main-page-header {
+    margin-bottom: 32px;
+    text-align: center;
+}
+
+.main-page-header h1 {
+    font-size: 32px;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.main-page-subtitle {
+    font-size: 16px;
+    color: #666;
+}
+
+/* 卡片样式通用区 */
+.card-section {
+    background: #fff;
+    padding: 24px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    margin-bottom: 32px;
+}
+
+.section-title {
+    font-size: 22px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #eaeaea;
+    padding-bottom: 10px;
+}
+
+/* 推荐资源占位样式 */
+.placeholder-box {
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px dashed #ccc;
+    border-radius: 8px;
+    background-color: #fafafa;
+}
+
+.placeholder-text {
+    color: #999;
+    font-size: 16px;
+}
\ No newline at end of file
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
new file mode 100644
index 0000000..bf82c2e
--- /dev/null
+++ b/src/pages/MainPage.jsx
@@ -0,0 +1,41 @@
+// src/pages/MainPage.jsx
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import Navbar from '../components/Navbar';
+import ActivityBoard from '../components/ActivityBoard';
+import './MainPage.css';
+import RecommendPreview from'../components/RecommendPreview'; // 引入推荐预览样式
+
+const MainPage = () => {
+    const navigate = useNavigate();
+    const currentUser = {
+        id: 2,
+        username: '测试用户',
+    };
+
+    return (
+        <div className="main-page-wrapper">
+            {/* 顶部导航栏 */}
+            <Navbar />
+
+            <main className="main-page-content">
+
+                {/* 公告区域 */}
+                <section className="card-section">
+                    <ActivityBoard />
+                </section>
+
+                {/* 推荐下载资源预留区域 */}
+                <section className="card-section">
+                    {/* <h2 className="section-title">📥 推荐下载资源</h2>
+                    <div className="placeholder-box"> */}
+                        {/* <p className="placeholder-text">这里将展示为你推荐的种子资源，敬请期待～</p> */}
+                        <RecommendPreview/>
+                    {/* </div> */}
+                </section>
+            </main>
+        </div>
+    );
+};
+
+export default MainPage;