diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx
new file mode 100644
index 0000000..a47cb47
--- /dev/null
+++ b/src/app/community/page.tsx
@@ -0,0 +1,191 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Card } from 'primereact/card';
+import { Image } from 'primereact/image';
+//幻灯片
+import { Carousel } from 'primereact/carousel';
+//评分图标
+import { Fire } from '@icon-park/react';
+// 页面跳转
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+// 消息提醒
+import { Toast } from 'primereact/toast';
+// 接口传输
+import axios from 'axios';
+// 样式
+import './community.scss';
+
+
+// 热门社区信息
+interface hotCommunity {
+  communityId: number;
+  communityName: string;
+  hot: number;
+  status: number; // 热门状态
+  threadNumber: number;
+  description: string;
+  communityPicture: string;
+  type: string;
+}
+interface Community {
+  communityId: number;
+  communityName: string;
+  hot: number;
+  threadNumber: number;
+  description: string;
+  communityPicture: string;
+  type: string;
+}
+
+
+// 社区主页面
+export default function CommunityPage() {
+  // 路由
+  const router = useRouter();
+  // 消息提醒
+  const toast = useRef<Toast>(null);
+  // 热门社区数据
+  const [hotCommunities, setHotCommunities] = useState<hotCommunity[]>([]);
+  // 社区数据
+  const [communities, setCommunities] = useState<Community[]>([]);
+  // 获取热门社区信息
+  useEffect(() => {
+    const fetchHotCommunity = async () => {
+      try {
+        const { data } = await axios.get(`http://127.0.0.1:4523/m1/6387307-6083949-default/community/hot`);
+        setHotCommunities(data.communityList);
+      } catch (err) {
+        console.error(err);
+        toast.current?.show({ severity: 'error', summary: 'error', detail: '获取热门社区失败' });
+      }
+    };
+    fetchHotCommunity();
+  }, []);
+
+  // 获取社区信息
+  useEffect(() => {
+    const fetchCommunity = async () => {
+      try {
+        const { data } = await axios.get(`http://127.0.0.1:4523/m1/6387307-6083949-default/community/common`);
+        setCommunities(data.communityList);
+        console.log(data.communityList);
+      } catch (err) {
+        console.error(err);
+        toast.current?.show({ severity: 'error', summary: 'error', detail: '获取社区失败' });
+      }
+    };
+    fetchCommunity();
+  }, []);
+  return (
+    <div className="community-container">
+
+      {/* 热门社区 */}
+      <div className="hot-communities">
+        <h1>热门社区</h1>
+        <Carousel
+          showIndicators={false}
+          showNavigators={false}
+          value={hotCommunities}
+          numVisible={3}
+          numScroll={1}
+          className="hot-communities-carousel"
+          itemTemplate={(item) => (
+            <div className="hot-communities-card">
+              <Card
+                onClick={() => router.push(`/community/community-detail/${item.communityId}`)}
+                title={item.communityName}
+                header={
+                  <div className="card-header">
+                    <div className="card-tag">
+                      <Image
+                        src={`/images/${item.status}.svg`}
+                        alt="热门标签"
+                        width="24"
+                        height="24"
+                      /></div>
+                    <Image src={process.env.NEXT_PUBLIC_NGINX_URL + item.communityPicture} alt={item.communityName}  height="200" className="w-full h-48 object-cover" />
+                  </div>
+                }
+              >
+                <p>{item.description}</p>
+              </Card>
+            </div>
+          )}
+        />
+      </div>
+
+      {/* 全部分类 */}
+      <h1>全部分类</h1>
+      <div className="all-communities-classifications">
+        <Link href="/community/resource-community-list/材质包">
+          <Image
+            className='communities-classification-card'
+            src="/images/材质包.png"
+            alt="Image"
+            width="250"
+          />
+        </Link>
+        <Link href="/community/resource-community-list/整合包">
+          <Image
+            className='communities-classification-card'
+            src="/images/整合包.png"
+            alt="Image"
+            width="250"
+          />
+        </Link>
+        <Link href="/community/resource-community-list/模组">
+          <Image
+            className='communities-classification-card'
+            src="/images/模组.png"
+            alt="Image"
+            width="250"
+          />
+        </Link>
+        <Link href="/community/resource-community-list/地图">
+          <Image
+            className='communities-classification-card'
+            src="/images/地图.png"
+            alt="Image"
+            width="250"
+          />
+        </Link>
+      </div>
+
+      {/* 全部社区 */}
+      <div className="all-communities">
+        <div className="all-communities-header">
+          <h1>全部社区</h1>
+          <Link href="/community/resource-community-list/all">
+            <Button label="查看更多" link />
+          </Link>
+        </div>
+        <div className="all-communities-list">
+          {communities.map((community) => (
+            <Card key={community.communityId} className="all-communities-card" onClick={() => router.push(`/community/community-detail/${community.communityId}`)}>
+              <Image alt="avatar" src={process.env.NEXT_PUBLIC_NGINX_URL + community.communityPicture} className="community-avatar" width="250" height="140" />
+              <div className="community-header">
+                <div className="community-content">
+                  <h3>{community.communityName}</h3>
+                  <p className="community-introduction">{community.description}</p>
+                </div>
+                <div className="community-states">
+                  <div className="state-item">
+                    <Fire theme="outline" size="16" fill="#FF8D1A" />
+                    <span>热度: {community.hot}</span>
+                  </div>
+                  <div className="state-item">
+                    <i className="pi pi-book" />
+                    <span>贴子数: {community.threadNumber}</span>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file