From 39803739bb5ad20124099a7dfbdd1e9f4fabb1f1 Mon Sep 17 00:00:00 2001
From: eric <xiaoshuang.eric@gmail.com>
Date: Sun, 15 Mar 2026 22:39:30 -0500
Subject: [PATCH] 's'

---
 app/components/Footer.tsx      |   4 +-
 app/components/HeroSection.tsx | 127 +++++++++++++-------------
 app/globals.css                |  24 ++---
 app/join/page.tsx              |  30 +++----
 app/layout.tsx                 |   5 +-
 app/page.tsx                   | 158 +++++++++++++++++++--------------
 6 files changed, 185 insertions(+), 163 deletions(-)

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 572f753..a7c53d3 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,7 +1,7 @@
 export default function Footer() {
   return (
-    <footer className="border-t border-gray-200 dark:border-gray-800 mt-12 py-8">
-      <div className="max-w-[1400px] mx-auto px-5 sm:px-10 text-center text-sm text-gray-500 dark:text-gray-400">
+    <footer className="border-t border-stone-200 dark:border-stone-800 mt-12 py-8">
+      <div className="max-w-[900px] mx-auto px-5 sm:px-8 text-center text-sm text-stone-500 dark:text-stone-400">
         <p>© {new Date().getFullYear()} Salon. 北京周末新朋友活动。</p>
       </div>
     </footer>
diff --git a/app/components/HeroSection.tsx b/app/components/HeroSection.tsx
index 013bda1..f2e472f 100644
--- a/app/components/HeroSection.tsx
+++ b/app/components/HeroSection.tsx
@@ -1,83 +1,82 @@
 "use client";
 
 import Link from "next/link";
+import { SESSIONS } from "@/config/home.config";
 
 export default function HeroSection() {
+  const mainSession = SESSIONS[0];
   return (
-    <section className="relative overflow-hidden">
-      <div className="absolute inset-0 bg-gradient-to-b from-orange-50/70 via-white to-[#fafafa] dark:from-gray-950 dark:via-gray-900 dark:to-gray-950" />
+    <section className="relative overflow-hidden bg-[#faf8f5] dark:bg-stone-950">
       <div
-        className="absolute top-0 right-0 w-[500px] h-[500px] -translate-y-1/3 translate-x-1/4 opacity-40 rounded-full"
+        className="absolute inset-0"
         style={{
-          background:
-            "radial-gradient(circle, rgba(249,115,22,0.25) 0%, transparent 70%)",
+          backgroundImage: `radial-gradient(ellipse 80% 50% at 50% 0%, rgba(180,83,9,0.08) 0%, transparent 60%),
+            radial-gradient(ellipse 60% 40% at 80% 80%, rgba(180,83,9,0.05) 0%, transparent 50%)`,
+        }}
+      />
+      <div
+        className="absolute inset-0 dark:opacity-60"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E")`,
         }}
       />
 
-      <div className="relative max-w-[1400px] mx-auto px-5 sm:px-10 py-10 sm:py-14 md:py-20">
-        <div className="flex flex-col lg:flex-row lg:items-start lg:gap-10 xl:gap-16">
-          <div className="flex-1 min-w-0">
-            <span className="inline-flex items-center gap-1.5 text-xs font-semibold text-orange-700 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/30 px-3 py-1.5 rounded-full mb-5">
-              📍 北京周末
-            </span>
-
-            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight mb-5">
-              <span className="hero-gradient-text">认识新朋友</span>
-              <br />
-              <span className="text-gray-900 dark:text-gray-100">不尬聊，不乱收费</span>
-            </h1>
-
-            <p className="text-base sm:text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-7 leading-relaxed">
-              公开场地，小组活动，规则透明。先看场次，再决定要不要报名
+      <div className="relative max-w-[1000px] mx-auto px-5 sm:px-8 py-14 sm:py-20 md:py-24">
+        <div className="flex flex-col lg:flex-row lg:items-center lg:gap-16">
+          <div className="flex-1">
+            <p className="text-sm font-medium text-amber-700 dark:text-amber-400/90 mb-4 tracking-wide">
+              北京 · 周末线下
             </p>
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-[1.15]">
+              <span className="hero-gradient-text">周末抽两小时</span>
+              <br />
+              <span className="text-stone-800 dark:text-stone-100">在咖啡馆认识几个新朋友</span>
+            </h1>
+            <p className="mt-5 text-stone-600 dark:text-stone-400 text-base sm:text-lg max-w-md leading-relaxed">
+              氛围轻松，不用尬聊。公开场地，填表即报。
+            </p>
+            <div className="mt-8 flex flex-wrap gap-3">
+              <Link
+                href="/join"
+                className="inline-flex items-center justify-center bg-amber-600 hover:bg-amber-700 text-white px-6 py-3 rounded-xl text-sm font-medium shadow-lg shadow-amber-900/20 transition-all active:scale-[0.98]"
+              >
+                报名参加
+              </Link>
+              {mainSession && (
+                <Link
+                  href={`/join?session=${mainSession.id}`}
+                  className="inline-flex items-center justify-center border border-stone-200 dark:border-stone-700 text-stone-700 dark:text-stone-300 px-6 py-3 rounded-xl text-sm font-medium hover:bg-stone-100 dark:hover:bg-stone-800/50 transition-colors"
+                >
+                  {mainSession.title} · {mainSession.date}
+                </Link>
+              )}
+            </div>
+          </div>
 
-            <div className="space-y-2.5 mb-8">
-              {[
-                { icon: "📍", text: "公开场地，地址提前告知" },
-                { icon: "👥", text: "小组活动，人数可控" },
-                { icon: "📋", text: "规则透明，先了解再报名" },
-                { icon: "✍️", text: "填个简单表单即可，无需注册登录" },
-                { icon: "🌸", text: "女生友好的表达方式" },
-              ].map((f) => (
-                <div key={f.icon} className="flex items-start gap-2.5">
-                  <span className="text-base sm:text-lg shrink-0 mt-0.5">{f.icon}</span>
-                  <span className="text-sm sm:text-base text-gray-600 dark:text-gray-400 underline decoration-gray-300 dark:decoration-gray-600 underline-offset-2">
-                    {f.text}
+          {mainSession && (
+            <div className="lg:w-[300px] shrink-0 mt-10 lg:mt-0">
+              <Link
+                href={`/join?session=${mainSession.id}`}
+                className="block rounded-2xl overflow-hidden border border-stone-200/80 dark:border-stone-700/80 bg-white dark:bg-stone-900/80 shadow-xl shadow-stone-900/5 hover:shadow-2xl hover:shadow-amber-900/10 transition-all"
+              >
+                <div className="aspect-[4/3] bg-gradient-to-br from-amber-500/20 via-amber-100/50 to-stone-100 dark:from-amber-900/30 dark:via-stone-800 dark:to-stone-900 flex items-center justify-center">
+                  <span className="text-6xl">☕</span>
+                </div>
+                <div className="p-5">
+                  <p className="text-xs font-medium text-amber-600 dark:text-amber-400/90 uppercase tracking-wider mb-1">
+                    本周主推
+                  </p>
+                  <h3 className="font-semibold text-stone-800 dark:text-stone-100">{mainSession.title}</h3>
+                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">
+                    {mainSession.date} {mainSession.time}
+                  </p>
+                  <span className="inline-flex items-center gap-1 mt-4 text-amber-600 dark:text-amber-400 font-medium text-sm">
+                    报名这场 →
                   </span>
                 </div>
-              ))}
+              </Link>
             </div>
-
-            <Link
-              href="/join"
-              className="inline-flex items-center gap-2 bg-[#ff4d4f] hover:bg-[#ff3333] dark:hover:bg-[#ff5c5e] text-white px-6 py-3 rounded-lg text-sm font-semibold transition-colors active:scale-[0.98]"
-            >
-              查看本周场次，去报名 →
-            </Link>
-          </div>
-
-          <div className="lg:w-[360px] xl:w-[400px] shrink-0 mt-10 lg:mt-4">
-            <div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl overflow-hidden border border-gray-100 dark:border-gray-800">
-              <div className="relative h-48 sm:h-56 bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-600 flex items-center justify-center overflow-hidden">
-                <div className="text-center text-white px-6">
-                  <p className="text-lg sm:text-xl font-semibold mb-2">轻报名</p>
-                  <p className="text-sm opacity-90">不先登录，不先付款</p>
-                </div>
-              </div>
-
-              <div className="p-4 sm:p-5">
-                <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                  选好场次，填个简单表单即可参与
-                </p>
-                <Link
-                  href="/join"
-                  className="block w-full text-center bg-[#ff4d4f] hover:bg-[#ff3333] dark:hover:bg-[#ff5c5e] text-white py-3 rounded-lg text-sm font-semibold transition-colors active:scale-[0.98]"
-                >
-                  去报名 →
-                </Link>
-              </div>
-            </div>
-          </div>
+          )}
         </div>
       </div>
     </section>
diff --git a/app/globals.css b/app/globals.css
index 71f0511..1338f31 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,14 +1,16 @@
 @import "tailwindcss";
 
 :root {
-  --background: #fafafa;
-  --foreground: #171717;
+  --background: #faf8f5;
+  --foreground: #1c1917;
+  --accent: #b45309;
+  --accent-hover: #92400e;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #0c0a09;
+    --foreground: #fafaf9;
   }
 }
 
@@ -18,12 +20,18 @@ body {
 }
 
 .hero-gradient-text {
-  background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
+  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 
+.form-input:focus {
+  outline: none;
+  border-color: #b45309;
+  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.2);
+}
+
 .items-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -73,12 +81,6 @@ body {
   font-size: 0.875rem;
 }
 
-.form-input:focus {
-  outline: none;
-  border-color: #ff4d4f;
-  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
-}
-
 .dark .form-input {
   border-color: #374151;
   background: #1f2937;
diff --git a/app/join/page.tsx b/app/join/page.tsx
index ea37619..f2dc7ed 100644
--- a/app/join/page.tsx
+++ b/app/join/page.tsx
@@ -85,8 +85,8 @@ export default function JoinPage() {
 
   if (submitted) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-[#f0f4f8] dark:bg-gray-950 px-4">
-        <div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-gray-900 p-10 text-center shadow-lg border border-gray-100 dark:border-gray-800">
+        <div className="flex min-h-screen items-center justify-center bg-[#faf8f5] dark:bg-stone-950 px-4">
+        <div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-stone-900 p-10 text-center shadow-lg border border-stone-200 dark:border-stone-800">
           <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-5xl">
             ✅
           </div>
@@ -96,7 +96,7 @@ export default function JoinPage() {
           </p>
           <Link
             href="/"
-            className="mt-8 inline-flex items-center gap-2 rounded-full bg-[#ff4d4f] px-8 py-3 font-semibold text-white transition-colors hover:bg-[#ff7a45]"
+            className="mt-8 inline-flex items-center gap-2 rounded-xl bg-amber-600 px-8 py-3 font-medium text-white transition-colors hover:bg-amber-700"
           >
             ← 返回首页
           </Link>
@@ -106,13 +106,13 @@ export default function JoinPage() {
   }
 
   return (
-    <div className="min-h-screen bg-[#f0f4f8] dark:bg-gray-950">
+    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
       <div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-10 lg:py-14">
-        <div className="overflow-hidden bg-white dark:bg-gray-900 shadow-sm sm:rounded-t-2xl">
-          <div className="relative h-40 overflow-hidden bg-gradient-to-br from-sky-400 via-cyan-500 to-teal-400 sm:h-52">
+        <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-t-2xl">
+          <div className="relative h-40 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700 sm:h-52">
             <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
-              <div className="text-6xl sm:text-7xl">📍</div>
-              <div className="mt-2 text-sm font-medium opacity-80">
+              <div className="text-6xl sm:text-7xl">☕</div>
+              <div className="mt-2 text-sm font-medium opacity-90">
                 北京周末新朋友活动
               </div>
             </div>
@@ -122,14 +122,14 @@ export default function JoinPage() {
             <h1 className="text-xl font-bold text-slate-800 dark:text-slate-100 sm:text-2xl">
               活动报名
             </h1>
-            <p className="mt-3 whitespace-pre-line text-sm leading-relaxed text-slate-400 dark:text-slate-500 sm:text-base">
-              填个简单表单即可，无需注册登录
+            <p className="mt-3 whitespace-pre-line text-sm leading-relaxed text-slate-500 dark:text-slate-400 sm:text-base">
+              填个简单表单即可，无需注册登录，不收费
             </p>
           </div>
         </div>
 
         {selectedSession && (
-          <div className="mt-5 rounded-2xl bg-white dark:bg-gray-900 px-5 py-4 shadow-sm border border-gray-100 dark:border-gray-800">
+          <div className="mt-5 rounded-xl bg-white dark:bg-stone-900 px-5 py-4 shadow-sm border border-stone-200 dark:border-stone-800">
             <p className="text-xs text-slate-500 dark:text-slate-500 mb-1">已选场次</p>
             <p className="font-medium text-slate-800 dark:text-slate-100">{selectedSession.title}</p>
             <p className="text-sm text-slate-500 dark:text-slate-500">{selectedSession.date} {selectedSession.time} · {selectedSession.place}</p>
@@ -138,7 +138,7 @@ export default function JoinPage() {
 
         <form
           onSubmit={handleSubmit}
-          className="mt-0 bg-white dark:bg-gray-900 px-5 pb-8 pt-2 shadow-sm sm:mt-5 sm:rounded-2xl sm:px-8 sm:py-8 sm:shadow-md border border-gray-100 dark:border-gray-800"
+          className="mt-0 bg-white dark:bg-stone-900 px-5 pb-8 pt-2 shadow-sm sm:mt-5 sm:rounded-xl sm:px-8 sm:py-8 sm:shadow-md border border-stone-200 dark:border-stone-800"
         >
           <div className="grid gap-0 sm:grid-cols-2 sm:gap-6">
             <Field label="📍 城市">
@@ -251,7 +251,7 @@ export default function JoinPage() {
                 checked={form.agreeRules}
                 onChange={(e) => set("agreeRules", e.target.checked)}
                 required
-                className="mt-1 rounded border-gray-300 text-[#ff4d4f] focus:ring-[#ff4d4f]"
+                className="mt-1 rounded border-stone-300 text-amber-600 focus:ring-amber-500"
               />
               <span className="text-sm text-slate-600 dark:text-slate-400">
                 我已阅读并同意活动规则（公开场地、尊重边界、如有不适可随时离开）
@@ -268,7 +268,7 @@ export default function JoinPage() {
             <button
               type="submit"
               disabled={submitting}
-              className="w-full rounded-full bg-[#ff4d4f] py-3.5 text-lg font-semibold text-white shadow-md transition-all hover:bg-[#ff3333] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70 sm:py-4"
+              className="w-full rounded-xl bg-amber-600 py-3.5 text-lg font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70 sm:py-4"
             >
               {submitting ? "提交中…" : "提交报名"}
             </button>
@@ -276,7 +276,7 @@ export default function JoinPage() {
         </form>
 
         <div className="mt-6 text-center">
-          <Link href="/" className="text-sm text-slate-400 dark:text-slate-500 transition-colors hover:text-[#ff4d4f]">
+          <Link href="/" className="text-sm text-stone-400 dark:text-stone-500 transition-colors hover:text-amber-600">
             ← 返回首页
           </Link>
         </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index c59c4cc..4a58d0e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,8 +2,9 @@ import type { Metadata } from "next";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Salon - 北京周末新朋友活动",
-  description: "同城小组活动，公开场地，规则透明。认识新朋友，不尬聊，不乱收费。",
+  title: "北京周末｜同城活动·认识新朋友",
+  description: "周末咖啡局、读书分享，认识同城新朋友。公开场地，填表报名，无需注册。",
+  keywords: "北京周末活动,同城活动,认识新朋友,周末咖啡局,读书分享",
 };
 
 export default function RootLayout({
diff --git a/app/page.tsx b/app/page.tsx
index cfb0006..a09670b 100644
--- a/app/page.tsx
+++ b/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 />