'style1'

app/page.tsx

@@ -3,29 +3,115 @@
 import Link from "next/link";
 import HeroSection from "./components/HeroSection";
 import Footer from "./components/Footer";
-import { COMMUNITY_STATS } from "@/config/home.config";
+import { SESSIONS } from "@/config/home.config";
 
 export default function Home() {
   return (
     <div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
       <HeroSection />
 
-      <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-8">
-        <Link href="/join" className="right-item block max-w-md">
-          <div className="right-item-header">加入社区</div>
-          <div className="flex flex-col items-center justify-center text-center p-2 sm:p-5 h-[calc(100%-38px)] sm:h-[calc(100%-42px)]">
-            <span className="text-2xl sm:text-5xl mb-1 sm:mb-3">💬</span>
-            <p className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 mb-0.5">
-              加入数字游民社区，结识志同道合的伙伴
-            </p>
-            <p className="text-[9px] sm:text-xs text-gray-400 dark:text-gray-500 mb-1.5 sm:mb-4">
-              {COMMUNITY_STATS.onlineMembers} 人在线
-            </p>
-            <span className="bg-[#ff4d4f] text-white px-2.5 sm:px-6 py-1 sm:py-2 rounded-lg text-[10px] sm:text-sm font-semibold whitespace-nowrap">
-              加入社区 →
-            </span>
+      <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-8 space-y-8">
+        {/* 信任信息条 */}
+        <div className="flex flex-wrap justify-center gap-4 sm:gap-8 text-sm text-gray-600 dark:text-gray-400">
+          <span>📍 公开场地</span>
+          <span>👥 小组活动</span>
+          <span>📋 规则透明</span>
+          <span>✍️ 无需注册</span>
+        </div>
+
+        {/* 本周活动场次 */}
+        <section>
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">本周活动场次</h2>
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {SESSIONS.map((s) => (
+              <Link
+                key={s.id}
+                href={`/join?session=${encodeURIComponent(s.id)}`}
+                className="right-item block"
+              >
+                <div className="right-item-header">{s.title}</div>
+                <div className="p-4 sm:p-5">
+                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">{s.date} {s.time}</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-500 mb-3">{s.place}</p>
+                  <span className="inline-block bg-[#ff4d4f] text-white px-3 py-1.5 rounded-lg text-xs font-semibold">
+                    报名 →
+                  </span>
+                </div>
+              </Link>
+            ))}
           </div>
-        </Link>
+        </section>
+
+        {/* 为什么很多人更愿意来这种局 */}
+        <section>
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">为什么很多人更愿意来这种局</h2>
+          <div className="right-item">
+            <div className="right-item-header">先了解，再决定</div>
+            <div className="p-4 sm:p-5 space-y-2 text-sm text-gray-600 dark:text-gray-400">
+              <p>• 场地公开，地址提前告知，不用担心安全问题</p>
+              <p>• 人数可控，小组活动，不会太吵也不会冷场</p>
+              <p>• 规则透明，活动前会说明流程和边界</p>
+              <p>• 填个简单表单即可，无需注册登录，更不用先付款</p>
+            </div>
+          </div>
+        </section>
+
+        {/* 安全与边界规则 */}
+        <section>
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">安全与边界规则</h2>
+          <div className="right-item">
+            <div className="right-item-header">活动规则</div>
+            <div className="p-4 sm:p-5 space-y-2 text-sm text-gray-600 dark:text-gray-400">
+              <p>• 活动在公开场地进行，不私下约见</p>
+              <p>• 尊重他人边界，不追问隐私、不强行加微信</p>
+              <p>• 如有不适可随时离开，主办方会协助处理</p>
+              <p>• 报名即同意以上规则</p>
+            </div>
+          </div>
+        </section>
+
+        {/* 主理人说明 */}
+        <section>
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">主理人说明</h2>
+          <div className="right-item">
+            <div className="right-item-header">关于我们</div>
+            <div className="p-4 sm:p-5 text-sm text-gray-600 dark:text-gray-400">
+              <p>我们是一群在北京的朋友，定期组织周末小聚，让想认识新朋友的人有个轻松、靠谱的场合。活动不设门槛，不搞暧昧，就是单纯聊天、互相认识。</p>
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ */}
+        <section>
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">常见问题</h2>
+          <div className="space-y-2">
+            {[
+              { q: "需要先注册吗？", a: "不需要。填个简单表单即可，无需注册登录。" },
+              { q: "需要先付款吗？", a: "不需要。先看场次，再决定要不要报名，报名不收费。" },
+              { q: "活动地点在哪里？", a: "报名后会通过微信或短信告知具体地址，均为公开场地。" },
+              { q: "第一次参加可以吗？", a: "可以。我们欢迎第一次参加类似活动的朋友。" },
+            ].map((faq, i) => (
+              <div key={i} className="right-item">
+                <div className="right-item-header">{faq.q}</div>
+                <div className="p-3 sm:p-4 text-sm text-gray-600 dark:text-gray-400">{faq.a}</div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* 底部 CTA */}
+        <section className="pt-4">
+          <Link href="/join" className="right-item block max-w-md">
+            <div className="right-item-header">去报名</div>
+            <div className="flex flex-col items-center justify-center text-center p-2 sm:p-5 h-[calc(100%-38px)] sm:h-[calc(100%-42px)]">
+              <span className="text-2xl sm:text-5xl mb-1 sm:mb-3">✍️</span>
+              <p className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 mb-0.5">
+                选好场次，填个简单表单即可参与
+              </p>
+              <span className="bg-[#ff4d4f] text-white px-2.5 sm:px-6 py-1 sm:py-2 rounded-lg text-[10px] sm:text-sm font-semibold whitespace-nowrap">去报名 →</span>
+            </div>
+          </Link>
+        </section>
       </div>
 
       <Footer />