's'

app/page.tsx

@@ -7,33 +7,46 @@ import { SESSIONS } from "@/config/home.config";
 
 export default function Home() {
   return (
-    <div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
+    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 pb-24 sm:pb-12">
       <HeroSection />
 
-      <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">
+      <main className="max-w-[900px] mx-auto px-5 sm:px-8 py-10 sm:py-14 space-y-14">
+        {/* 信任标签 */}
+        <div className="flex flex-wrap justify-center gap-x-8 gap-y-2 text-sm text-stone-600 dark:text-stone-400">
           <span>📍 公开场地</span>
           <span>👥 小组活动</span>
-          <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) => (
+          <h2 className="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-5">
+            本周活动
+          </h2>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {SESSIONS.map((s, i) => (
               <Link
                 key={s.id}
                 href={`/join?session=${encodeURIComponent(s.id)}`}
-                className="right-item block"
+                className="group flex gap-4 p-5 rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 hover:border-amber-200 dark:hover:border-amber-900/50 hover:shadow-lg hover:shadow-amber-900/5 transition-all"
               >
-                <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">
+                <div className="w-14 h-14 shrink-0 rounded-xl bg-amber-100/80 dark:bg-amber-900/20 flex items-center justify-center text-2xl">
+                  {i === 0 ? "☕" : i === 1 ? "📖" : "👋"}
+                </div>
+                <div className="min-w-0 flex-1">
+                  {i === 0 && (
+                    <span className="inline-block text-[10px] font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2 py-0.5 rounded mb-2">
+                      主推
+                    </span>
+                  )}
+                  <h3 className="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-amber-700 dark:group-hover:text-amber-400">
+                    {s.title}
+                  </h3>
+                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5">
+                    {s.date} {s.time} · {s.place}
+                  </p>
+                  <span className="inline-flex items-center gap-1 mt-3 text-amber-600 dark:text-amber-400 text-sm font-medium">
                     报名 →
                   </span>
                 </div>
@@ -42,76 +55,83 @@ export default function Home() {
           </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 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>
+          <h2 className="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-5">
+            为什么很多人愿意来
+          </h2>
+          <div className="rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-6 sm:p-8">
+            <div className="grid sm:grid-cols-2 gap-6">
+              <div>
+                <p className="font-medium text-stone-800 dark:text-stone-100">氛围轻松</p>
+                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1 leading-relaxed">
+                  咖啡馆、书店里的线下小聚，不用尬聊，聊得来就多聊几句。
+                </p>
+              </div>
+              <div>
+                <p className="font-medium text-stone-800 dark:text-stone-100">安全靠谱</p>
+                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1 leading-relaxed">
+                  公开场地，地址提前告知。尊重边界，不追问隐私。
+                </p>
+              </div>
+              <div>
+                <p className="font-medium text-stone-800 dark:text-stone-100">第一次来也 OK</p>
+                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1 leading-relaxed">
+                  很多人都是第一次参加，小组活动人数可控，不会尴尬。
+                </p>
+              </div>
+              <div>
+                <p className="font-medium text-stone-800 dark:text-stone-100">填表就行</p>
+                <p className="text-sm text-stone-500 dark:text-stone-400 mt-1 leading-relaxed">
+                  无需注册登录，不用先付款，填个表单即可。
+                </p>
+              </div>
             </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">
+          <h2 className="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-5">
+            常见问题
+          </h2>
+          <div className="space-y-3">
             {[
-              { q: "需要先注册吗？", a: "不需要。填个简单表单即可，无需注册登录。" },
-              { q: "需要先付款吗？", a: "不需要。先看场次，再决定要不要报名，报名不收费。" },
-              { q: "活动地点在哪里？", a: "报名后会通过微信或短信告知具体地址，均为公开场地。" },
-              { q: "第一次参加可以吗？", a: "可以。我们欢迎第一次参加类似活动的朋友。" },
+              { 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
+                key={i}
+                className="rounded-xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-4"
+              >
+                <p className="font-medium text-stone-800 dark:text-stone-100 text-sm">{faq.q}</p>
+                <p className="text-sm text-stone-500 dark:text-stone-400 mt-0.5">{faq.a}</p>
               </div>
             ))}
           </div>
         </section>
 
-        {/* 底部 CTA */}
+        {/* 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
+            href="/join"
+            className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-4 rounded-xl font-semibold shadow-lg shadow-amber-900/20 transition-all"
+          >
+            立即报名 →
           </Link>
         </section>
+      </main>
+
+      {/* 移动端悬浮 CTA */}
+      <div className="fixed bottom-0 left-0 right-0 p-4 bg-white/95 dark:bg-stone-900/95 backdrop-blur border-t border-stone-200 dark:border-stone-800 sm:hidden z-50">
+        <Link
+          href="/join"
+          className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-3.5 rounded-xl font-medium"
+        >
+          报名参加
+        </Link>
       </div>
 
       <Footer />