's''

app/api/join/route.ts

@@ -29,6 +29,7 @@ export async function POST(request: NextRequest) {
     const session = String(formData.session || "").trim();
     const ageRange = String(formData.age_range || "").trim();
     const wechatOrPhone = String(formData.wechat_or_phone || "").trim();
+    const xiaohongshuUrl = String(formData.xiaohongshu_url || "").trim();
     let intro = String(formData.intro || "").trim();
     const firstTime = String(formData.first_time || "").trim();
     const agreeRules = !!formData.agree_rules;
@@ -42,9 +43,9 @@ export async function POST(request: NextRequest) {
       intro = extra;
     }
 
-    if (!nickname || !wechatOrPhone || !intro || !session || !agreeRules) {
+    if (!nickname || !wechatOrPhone || !intro || !session || !agreeRules || !xiaohongshuUrl) {
       return NextResponse.json(
-        { ok: false, error: "请填写必填项" },
+        { ok: false, error: "请填写必填项（含小红书主页地址）" },
         { status: 400 }
       );
     }
@@ -57,6 +58,7 @@ export async function POST(request: NextRequest) {
       occupation: city,
       reason: intro,
       wechatId: wechatOrPhone,
+      xiaohongshu_url: xiaohongshuUrl,
       gender: "",
       education: "",
       gradYear: "",
@@ -114,11 +116,13 @@ async function tryPocketBaseDirect(
   const base = pb.url.replace(/\/$/, "");
   const url = `${base}/api/collections/${pb.joinCollection}/records`;
 
+  const reasonParts = [record.reason, record.age_range, record.first_time];
+  if (record.xiaohongshu_url) reasonParts.push(`小红书:${record.xiaohongshu_url}`);
   const body: Record<string, unknown> = {
     user_id: record.user_id,
     nickname: record.nickname,
     occupation: record.occupation ?? "",
-    reason: [record.reason, record.age_range, record.first_time].filter(Boolean).join(" | "),
+    reason: reasonParts.filter(Boolean).join(" | "),
     wechatId: record.wechatId ?? "",
     gender: record.gender ?? "",
     education: record.education ?? "",

app/api/join/stats/route.ts

@@ -0,0 +1,60 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getAdminToken } from "@/app/lib/pocketbase/admin";
+import { getPocketBaseConfig } from "@/config/services.config";
+import { SESSIONS } from "@/config/home.config";
+
+/** 按场次返回报名人数和最近报名者（昵称），头像由前端用 initials 或占位 */
+export async function GET(request: NextRequest) {
+  const token = await getAdminToken();
+  if (!token) {
+    return NextResponse.json(
+      { ok: true, stats: getEmptyStats() },
+      { status: 200 }
+    );
+  }
+
+  const pb = getPocketBaseConfig();
+  const base = pb.url.replace(/\/$/, "");
+
+  const stats: Record<string, { count: number; joiners: { nickname: string; avatar?: string; xiaohongshu_url?: string }[] }> = {};
+
+  for (const s of SESSIONS) {
+    try {
+      const filter = encodeURIComponent(`type="${s.id}"`);
+      const res = await fetch(
+        `${base}/api/collections/${pb.joinCollection}/records?filter=${filter}&sort=-created&perPage=6`,
+        {
+          headers: { Authorization: `Bearer ${token}` },
+          cache: "no-store",
+        }
+      );
+      if (!res.ok) {
+        stats[s.id] = { count: 0, joiners: [] };
+        continue;
+      }
+      const data = await res.json();
+      const items = Array.isArray(data?.items) ? data.items : [];
+      const total = typeof data?.totalItems === "number" ? data.totalItems : items.length;
+      stats[s.id] = {
+        count: total,
+        joiners: items.slice(0, 6).map((r: { nickname?: string; xiaohongshu_nickname?: string; xiaohongshu_avatar?: string; xiaohongshu_url?: string }) => ({
+          nickname: String(r?.xiaohongshu_nickname || r?.nickname || "").trim() || "匿名",
+          avatar: String(r?.xiaohongshu_avatar || "").trim() || undefined,
+          xiaohongshu_url: String(r?.xiaohongshu_url || "").trim() || undefined,
+        })),
+      };
+    } catch {
+      stats[s.id] = { count: 0, joiners: [] };
+    }
+  }
+
+  return NextResponse.json({ ok: true, stats });
+}
+
+function getEmptyStats() {
+  const stats: Record<string, { count: number; joiners: { nickname: string; avatar?: string; xiaohongshu_url?: string }[] }> = {};
+  for (const s of SESSIONS) {
+    stats[s.id] = { count: 0, joiners: [] };
+  }
+  return stats;
+}

app/coming-soon/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import Link from "next/link";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+
+export default function ComingSoonPage() {
+  return (
+    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 flex flex-col">
+      <Header />
+      <main className="flex-1 flex items-center justify-center px-4">
+        <div className="text-center">
+          <p className="text-4xl mb-4">✨</p>
+          <h1 className="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">
+            功能开发中
+          </h1>
+          <p className="text-sm text-stone-500 dark:text-stone-400 mb-6">
+            敬请期待～
+          </p>
+          <Link href="/" className="text-amber-600 dark:text-amber-400 text-sm">
+            返回首页
+          </Link>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}

app/components/Footer.tsx

@@ -1,8 +1,15 @@
+import Link from "next/link";
+
 export default function Footer() {
   return (
     <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 className="flex flex-wrap justify-center gap-x-4 gap-y-1 mb-3">
+          <Link href="/history" className="hover:text-amber-600 dark:hover:text-amber-400">
+            历史活动
+          </Link>
+        </div>
+        <p>© {new Date().getFullYear()} Salon · 深圳 周末轻社交</p>
       </div>
     </footer>
   );

app/components/Header.tsx

@@ -10,7 +10,12 @@ export default function Header() {
         <Link href="/" className="font-semibold text-stone-800 dark:text-stone-100 text-base">
           Salon
         </Link>
-        <ThemeToggle />
+        <nav className="flex items-center gap-4 sm:gap-6">
+          <Link href="/history" className="text-sm text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400">
+            历史活动
+          </Link>
+          <ThemeToggle />
+        </nav>
       </div>
     </header>
   );

app/components/HeroSection.tsx

@@ -1,11 +1,24 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
 import SessionCoverImage from "./SessionCoverImage";
-import { SESSIONS } from "@/config/home.config";
+import { SESSIONS, RECENT_JOINERS } from "@/config/home.config";
+
+const MOCK_JOINERS = RECENT_JOINERS.slice(0, 3);
 
 export default function HeroSection() {
   const mainSession = SESSIONS[0];
+  const [stats, setStats] = useState<{ count: number; joiners: { nickname: string }[] } | null>(null);
+
+  useEffect(() => {
+    if (!mainSession) return;
+    fetch("/api/join/stats")
+      .then((r) => r.json())
+      .then((d) => d?.stats?.[mainSession.id] && setStats(d.stats[mainSession.id]))
+      .catch(() => {});
+  }, [mainSession?.id]);
   return (
     <section className="relative overflow-hidden bg-[#faf8f5] dark:bg-stone-950">
       <div
@@ -22,27 +35,21 @@ export default function HeroSection() {
             <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-[2.5rem] xl:text-[2.75rem] font-bold tracking-tight leading-[1.25]">
               <span className="hero-gradient-text">周末留两小时</span>
               <br />
-              <span className="text-stone-800 dark:text-stone-100">去一个舒服的公开场地，认识几位同频的人</span>
+              <span className="text-stone-800 dark:text-stone-100">去loft民宿，认识几位同频的人</span>
             </h1>
             <p className="mt-4 sm:mt-5 text-stone-600 dark:text-stone-400 text-sm sm:text-base max-w-lg leading-relaxed">
-              深圳 · 广州 · 惠州 · 周末 6–8 人轻社交小组
+              深圳 · 6–8 人小圈子
             </p>
             <p className="mt-1.5 text-stone-500 dark:text-stone-450 text-xs sm:text-sm max-w-lg">
-              咖啡馆 / 书店 / citywalk · 6–8 人小组 · 公开场地 · 填表申请 · 联系方式仅用于活动确认 · 不收费
+              公开场地 · 填表申请 · 免费 · 不尬聊
             </p>
-            <div className="mt-6 sm:mt-8 flex flex-wrap gap-3">
+            <div className="mt-6 sm:mt-8">
               <Link
                 href="/join"
                 className="inline-flex items-center justify-center bg-amber-600 hover:bg-amber-700 text-white px-5 py-2.5 sm:px-6 sm:py-3 rounded-xl text-sm font-medium shadow-lg shadow-amber-900/20 transition-all active:scale-[0.98]"
               >
                 填表申请本周场次
               </Link>
-              <Link
-                href="#faq"
-                className="inline-flex items-center justify-center bg-white dark:bg-stone-800 hover:bg-stone-50 dark:hover:bg-stone-700 text-stone-700 dark:text-stone-200 border border-stone-200 dark:border-stone-600 px-5 py-2.5 sm:px-6 sm:py-3 rounded-xl text-sm font-medium transition-all"
-              >
-                先看规则
-              </Link>
             </div>
           </div>
 
@@ -90,6 +97,34 @@ export default function HeroSection() {
                   <span className="inline-flex items-center gap-1 mt-3 text-amber-600 dark:text-amber-400 font-medium text-xs sm:text-sm">
                     报名这场 →
                   </span>
+                  <div className="mt-3 flex items-center gap-2">
+                    <div className="flex -space-x-2 shrink-0">
+                      {(stats?.joiners?.length ? stats.joiners : MOCK_JOINERS).slice(0, 5).map((j, i) => {
+                        const nickname = "name" in j ? (j as { name: string }).name : (j as { nickname: string }).nickname;
+                        const avatar = "avatar" in j ? (j as { avatar: string }).avatar : (j as { avatar?: string }).avatar;
+                        const xhUrl = (j as { xiaohongshu_url?: string }).xiaohongshu_url;
+                        const showAvatar = avatar && avatar.length > 0;
+                        return (
+                          <span
+                            key={i}
+                            className={`relative w-7 h-7 rounded-full overflow-hidden border-2 border-white dark:border-stone-900 ring-1 ring-stone-200/50 dark:ring-stone-700/50 shrink-0 inline-block cursor-default ${showAvatar ? "" : "bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-xs font-medium text-amber-700 dark:text-amber-300"}`}
+                            title={nickname}
+                            data-xiaohongshu-url={xhUrl}
+                            onClick={(e) => e.preventDefault()}
+                          >
+                            {showAvatar ? (
+                              <Image src={avatar} alt="" fill sizes="28px" className="object-cover" unoptimized />
+                            ) : (
+                              <span className="flex items-center justify-center w-full h-full">{nickname.slice(0, 1) || "?"}</span>
+                            )}
+                          </span>
+                        );
+                      })}
+                    </div>
+                    <span className="text-xs text-stone-500 dark:text-stone-400">
+                      {stats?.count ? `${stats.count} 人已报名` : "有人报名中"}
+                    </span>
+                  </div>
                 </div>
               </Link>
             </div>

app/components/SessionCard.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import SessionCoverImage from "./SessionCoverImage";
+import { SESSIONS, ACTIVITY_TYPES, SESSION_TAGS, RECENT_JOINERS } from "@/config/home.config";
+
+interface JoinStats {
+  count: number;
+  joiners: { nickname: string; avatar?: string; xiaohongshu_url?: string }[];
+}
+
+const MOCK_JOINERS = RECENT_JOINERS.slice(0, 3);
+
+export default function SessionCard({
+  session,
+  index,
+}: {
+  session: (typeof SESSIONS)[0];
+  index: number;
+}) {
+  const [stats, setStats] = useState<JoinStats | null>(null);
+
+  useEffect(() => {
+    fetch("/api/join/stats")
+      .then((r) => r.json())
+      .then((d) => d?.stats?.[session.id] && setStats(d.stats[session.id]))
+      .catch(() => {});
+  }, [session.id]);
+
+  return (
+    <Link
+      href={`/join?session=${encodeURIComponent(session.id)}`}
+      className="group flex flex-col sm:flex-row gap-3 sm:gap-4 p-4 sm:p-5 rounded-xl sm: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="relative w-full sm:w-24 sm:h-24 shrink-0 aspect-[16/10] sm:aspect-square rounded-lg sm:rounded-xl overflow-hidden bg-stone-100 dark:bg-stone-800">
+        {session.coverImage ? (
+          <SessionCoverImage
+            src={session.coverImage}
+            alt={session.title}
+            type={session.type}
+            fill
+            sizes="(max-width: 640px) 100vw, 96px"
+            className="object-cover"
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-2xl">
+            {session.type === "skill-exchange" ? "🔄" : "☕"}
+          </div>
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap gap-1 mb-1.5">
+          {session.tags?.map((tag) => (
+            <span
+              key={tag}
+              className="inline-block text-[9px] sm:text-[10px] font-medium text-amber-600 dark:text-amber-400/90 bg-amber-50 dark:bg-amber-900/20 px-1.5 py-0.5 rounded"
+            >
+              {SESSION_TAGS[tag]}
+            </span>
+          ))}
+          {index === 0 && (
+            <span className="inline-block text-[9px] sm:text-[10px] font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-1.5 py-0.5 rounded">
+              主推
+            </span>
+          )}
+        </div>
+        <span className="text-[10px] sm:text-xs text-amber-600 dark:text-amber-400/90">
+          {ACTIVITY_TYPES[session.type]} · {session.city}
+        </span>
+        <h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base group-hover:text-amber-700 dark:group-hover:text-amber-400 mt-0.5">
+          {session.title}
+        </h3>
+        <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 mt-0.5">
+          {session.date} {session.time} · {session.place}
+        </p>
+        <span className="inline-flex items-center gap-1 mt-2 sm:mt-3 text-amber-600 dark:text-amber-400 text-xs sm:text-sm font-medium">
+          报名这场 →
+        </span>
+        <div className="mt-3 flex items-center gap-2">
+          <div className="flex -space-x-2 shrink-0">
+            {(stats?.joiners?.length ? stats.joiners : MOCK_JOINERS).slice(0, 5).map((j, i) => {
+              const nickname = "name" in j ? (j as { name: string }).name : (j as { nickname: string }).nickname;
+              const avatar = "avatar" in j ? (j as { avatar: string }).avatar : (j as { avatar?: string }).avatar;
+              const xhUrl = (j as { xiaohongshu_url?: string }).xiaohongshu_url;
+              const showAvatar = avatar && avatar.length > 0;
+              return (
+                <span
+                  key={i}
+                  className={`relative w-7 h-7 rounded-full overflow-hidden border-2 border-white dark:border-stone-900 ring-1 ring-stone-200/50 dark:ring-stone-700/50 shrink-0 inline-block cursor-default ${showAvatar ? "" : "bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center text-xs font-medium text-amber-700 dark:text-amber-300"}`}
+                  title={nickname}
+                  data-xiaohongshu-url={xhUrl}
+                  onClick={(e) => e.preventDefault()}
+                >
+                  {showAvatar ? (
+                    <Image src={avatar} alt="" fill sizes="28px" className="object-cover" unoptimized />
+                  ) : (
+                    <span className="flex items-center justify-center w-full h-full">{nickname.slice(0, 1) || "?"}</span>
+                  )}
+                </span>
+              );
+            })}
+          </div>
+          <span className="text-xs text-stone-500 dark:text-stone-400">
+            {stats?.count ? `${stats.count} 人已报名` : "有人报名中"}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}

app/components/SessionCoverImage.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 interface SessionCoverImageProps {
   src: string;
   alt: string;
-  type?: "skill-exchange" | "side-hustle" | "cafe" | "bookstore" | "citywalk" | "light-chat";
+  type?: "skill-exchange" | "side-hustle" | "loft" | "light-chat";
   className?: string;
   fill?: boolean;
   sizes?: string;
@@ -18,7 +18,7 @@ export default function SessionCoverImage({ src, alt, type, className = "", fill
   if (error) {
     return (
       <div className="absolute inset-0 flex items-center justify-center bg-stone-200 dark:bg-stone-700 text-2xl sm:text-3xl">
-        {type === "bookstore" ? "📚" : type === "citywalk" ? "🚶" : type === "skill-exchange" ? "🔄" : "☕"}
+        {type === "loft" ? "🏠" : type === "skill-exchange" ? "🔄" : "☕"}
       </div>
     );
   }

app/history/[id]/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import SessionCoverImage from "../../components/SessionCoverImage";
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+import { PAST_SESSIONS } from "@/config/home.config";
+import { ACTIVITY_TYPES } from "@/config/home.config";
+
+export default function HistoryDetailPage() {
+  const params = useParams();
+  const id = typeof params.id === "string" ? params.id : "";
+  const session = PAST_SESSIONS.find((s) => s.id === id);
+
+  if (!session) {
+    return (
+      <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950 flex items-center justify-center">
+        <div className="text-center px-4">
+          <p className="text-stone-500 dark:text-stone-400 mb-4">活动不存在</p>
+          <Link href="/history" className="text-amber-600 dark:text-amber-400">
+            返回历史活动
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
+      <Header />
+      <main className="max-w-[600px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        <Link
+          href="/history"
+          className="inline-flex items-center gap-1 text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 mb-6"
+        >
+          ← 历史活动
+        </Link>
+
+        <article className="rounded-2xl overflow-hidden bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-700">
+          <div className="relative aspect-[16/10] w-full bg-stone-100 dark:bg-stone-800">
+            {session.coverImage ? (
+              <SessionCoverImage
+                src={session.coverImage}
+                alt={session.title}
+                type={session.type}
+                fill
+                sizes="600px"
+                className="object-cover"
+              />
+            ) : (
+              <div className="absolute inset-0 flex items-center justify-center text-4xl">☕</div>
+            )}
+            <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent">
+              <span className="text-xs text-white/90">{ACTIVITY_TYPES[session.type]} · {session.city}</span>
+              <h1 className="text-xl sm:text-2xl font-bold text-white mt-0.5">{session.title}</h1>
+            </div>
+          </div>
+          <div className="p-5 sm:p-6">
+            <dl className="space-y-3 text-sm">
+              <div>
+                <dt className="text-stone-500 dark:text-stone-400">时间</dt>
+                <dd className="font-medium text-stone-800 dark:text-stone-100">{session.date} {session.time}</dd>
+              </div>
+              <div>
+                <dt className="text-stone-500 dark:text-stone-400">地点</dt>
+                <dd className="font-medium text-stone-800 dark:text-stone-100">{session.place}</dd>
+              </div>
+              <div>
+                <dt className="text-stone-500 dark:text-stone-400">城市</dt>
+                <dd className="font-medium text-stone-800 dark:text-stone-100">{session.city}</dd>
+              </div>
+            </dl>
+            <p className="mt-4 pt-4 border-t border-stone-100 dark:border-stone-700 text-sm text-stone-600 dark:text-stone-400">
+              这是一场已结束的活动。想参加本周活动？去首页看看～
+            </p>
+            <Link
+              href="/"
+              className="mt-4 inline-flex items-center justify-center w-full sm:w-auto bg-amber-600 hover:bg-amber-700 text-white px-6 py-2.5 rounded-xl text-sm font-medium"
+            >
+              看看本周活动
+            </Link>
+          </div>
+        </article>
+      </main>
+      <Footer />
+    </div>
+  );
+}

app/history/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import Link from "next/link";
+import SessionCoverImage from "../components/SessionCoverImage";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+import { PAST_SESSIONS } from "@/config/home.config";
+import { ACTIVITY_TYPES } from "@/config/home.config";
+
+export default function HistoryPage() {
+  return (
+    <div className="min-h-screen bg-[#faf8f5] dark:bg-stone-950">
+      <Header />
+      <main className="max-w-[700px] mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        <h1 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2">
+          历史活动
+        </h1>
+        <p className="text-sm text-stone-500 dark:text-stone-400 mb-8">
+          看看之前都举办了什么～
+        </p>
+
+        <div className="relative">
+          <div className="absolute left-[11px] sm:left-[15px] top-0 bottom-0 w-px bg-stone-200 dark:bg-stone-700" />
+          <div className="space-y-0">
+            {PAST_SESSIONS.map((s, i) => (
+              <Link
+                key={s.id}
+                href={`/history/${s.id}`}
+                className="group flex gap-4 sm:gap-6 py-6 sm:py-8 relative"
+              >
+                <div className="relative z-10 w-6 h-6 sm:w-8 sm:h-8 rounded-full bg-amber-500 shrink-0 mt-1 flex items-center justify-center text-white text-[10px] sm:text-xs font-bold">
+                  {PAST_SESSIONS.length - i}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex flex-col sm:flex-row sm:items-start gap-3 sm:gap-4">
+                    <div className="relative w-full sm:w-28 sm:h-28 shrink-0 aspect-[4/3] sm:aspect-square rounded-xl overflow-hidden bg-stone-100 dark:bg-stone-800">
+                      {s.coverImage ? (
+                        <SessionCoverImage
+                          src={s.coverImage}
+                          alt={s.title}
+                          type={s.type}
+                          fill
+                          sizes="(max-width: 640px) 100vw, 112px"
+                          className="object-cover"
+                        />
+                      ) : (
+                        <div className="absolute inset-0 flex items-center justify-center text-2xl">☕</div>
+                      )}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <span className="text-[10px] sm:text-xs text-amber-600 dark:text-amber-400/90">
+                        {ACTIVITY_TYPES[s.type]} · {s.city}
+                      </span>
+                      <h2 className="font-semibold text-stone-800 dark:text-stone-100 text-base sm:text-lg mt-0.5 group-hover:text-amber-600 dark:group-hover:text-amber-400">
+                        {s.title}
+                      </h2>
+                      <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-2 text-amber-600 dark:text-amber-400 text-xs font-medium">
+                        查看详情 →
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="mt-12 pt-8 border-t border-stone-200 dark:border-stone-800">
+          <Link
+            href="/"
+            className="text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400"
+          >
+            ← 返回首页
+          </Link>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  );
+}

app/join/page.tsx

@@ -16,9 +16,7 @@ const statusOptions = [
   { value: "other", label: "其他" },
 ];
 const activityTypeOptions = [
-  { value: "cafe", label: "咖啡馆聊天" },
-  { value: "bookstore", label: "书店" },
-  { value: "citywalk", label: "Citywalk" },
+  { value: "loft", label: "loft民宿" },
   { value: "side-hustle", label: "轻副业交流" },
   { value: "any", label: "都可以" },
 ];
@@ -31,8 +29,6 @@ const availableTimeOptions = [
 
 const REGIONS: Record<string, string[]> = {
   深圳: ["南山区", "福田区", "罗湖区", "宝安区", "龙岗区", "其他"],
-  广州: ["天河区", "越秀区", "海珠区", "荔湾区", "白云区", "其他"],
-  惠州: ["惠城区", "惠阳区", "其他"],
 };
 
 interface FormData {
@@ -45,6 +41,7 @@ interface FormData {
   whyJoin: string;
   nickname: string;
   wechatOrPhone: string;
+  xiaohongshuUrl: string;
   region: string;
   firstTime: string;
   availableTime: string;
@@ -72,6 +69,7 @@ export default function JoinPage() {
     whyJoin: "",
     nickname: "",
     wechatOrPhone: "",
+    xiaohongshuUrl: "",
     region: "",
     firstTime: "",
     availableTime: "",
@@ -121,6 +119,7 @@ export default function JoinPage() {
           nickname: form.nickname,
           age_range: form.ageRange,
           wechat_or_phone: form.wechatOrPhone,
+          xiaohongshu_url: form.xiaohongshuUrl.trim(),
           intro: reasonParts.join(" | "),
           first_time: form.firstTime,
           agree_rules: form.agreeRules,
@@ -194,20 +193,20 @@ export default function JoinPage() {
             <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
               <div className="text-4xl sm:text-5xl md:text-6xl" aria-hidden>☕</div>
               <div className="mt-1.5 sm:mt-2 text-xs sm:text-sm font-medium opacity-90 flex items-center gap-1.5">
-                <span>📍</span> 深圳 · 广州 · 惠州
+                <span>📍</span> 深圳
               </div>
             </div>
           </div>
 
           <div className="px-4 sm:px-6 py-4 sm:py-5 text-center">
             <h1 className="text-lg sm:text-xl md:text-2xl font-bold text-stone-800 dark:text-stone-100">
-              活动报名
+              报名参加
             </h1>
             <p className="mt-2 sm:mt-3 text-xs sm:text-sm leading-relaxed text-stone-500 dark:text-stone-400">
-              先填表，我们会根据场次与匹配度联系合适报名者
+              填个表，我们会根据场次联系你～
             </p>
             <p className="mt-1.5 text-xs text-stone-400 dark:text-stone-500">
-              不是所有报名都会自动确认
+              不是所有报名都会确认，看场次匹配
             </p>
 
             {/* 进度提示 */}
@@ -381,6 +380,22 @@ export default function JoinPage() {
                     </p>
                   </div>
                 </Field>
+                <Field label="小红书主页地址">
+                  <div>
+                    <input
+                      type="url"
+                      maxLength={200}
+                      placeholder="https://www.xiaohongshu.com/user/profile/xxx"
+                      value={form.xiaohongshuUrl}
+                      onChange={(e) => set("xiaohongshuUrl", e.target.value)}
+                      required
+                      className="form-input"
+                    />
+                    <p className="mt-1.5 text-xs text-stone-500 dark:text-stone-400">
+                      用于展示头像与昵称，提交前会校验
+                    </p>
+                  </div>
+                </Field>
                 <Field label="平时常活动区域">
                   <select
                     value={form.region}

app/layout.tsx

@@ -3,9 +3,9 @@ import "./globals.css";
 import ThemeProvider from "./components/ThemeProvider";
 
 export const metadata: Metadata = {
-  title: "深圳广州惠州｜同城活动·技能交换·副业沙龙",
+  title: "深圳｜同城活动·技能交换·副业沙龙",
   description: "技能交换、副业沙龙茶话会，认识同城新朋友。公开场地，填表报名，无需注册。",
-  keywords: "深圳活动,广州活动,惠州活动,技能交换,副业沙龙,同城活动",
+  keywords: "深圳活动,技能交换,副业沙龙,同城活动,loft民宿",
 };
 
 export default function RootLayout({

app/page.tsx

@@ -2,11 +2,10 @@
 
 import Link from "next/link";
 import HeroSection from "./components/HeroSection";
-import SessionCoverImage from "./components/SessionCoverImage";
+import SessionCard from "./components/SessionCard";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
-import AvatarStack from "./components/AvatarStack";
-import { SESSIONS, ACTIVITY_TYPES, SESSION_TAGS } from "@/config/home.config";
+import { SESSIONS } from "@/config/home.config";
 
 export default function Home() {
   return (
@@ -15,7 +14,7 @@ export default function Home() {
       <HeroSection />
 
       <main className="max-w-[900px] mx-auto px-4 sm:px-6 md:px-8 py-8 sm:py-12 md:py-14 space-y-10 sm:space-y-14">
-        {/* 是什么 / 不是什么 · 适合谁 / 不适合谁 - 合并一套 */}
+        {/* 是什么 / 不是什么 - 小红书风格 */}
         <section>
           <div className="rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-4 sm:p-6 overflow-hidden">
             <div className="grid sm:grid-cols-2 gap-6 sm:gap-8">
@@ -24,9 +23,9 @@ export default function Home() {
                   <span className="text-amber-600 dark:text-amber-400">✓</span> 是什么 · 适合谁
                 </h3>
                 <ul className="space-y-1.5 text-sm text-stone-600 dark:text-stone-400">
-                  <li>· 周末同城轻社交，公开场地，6–8 人小组</li>
-                  <li>· 想周末出门认识新朋友、喜欢舒服聊天</li>
-                  <li>· 第一次参加也可以</li>
+                  <li>· 周末同城轻社交，loft民宿见～</li>
+                  <li>· 6–8 人小圈子，聊得来就多聊</li>
+                  <li>· 第一次来也完全 OK</li>
                 </ul>
               </div>
               <div>
@@ -34,63 +33,50 @@ export default function Home() {
                   <span className="text-stone-400 dark:text-stone-500">✗</span> 不是什么 · 不适合谁
                 </h3>
                 <ul className="space-y-1.5 text-sm text-stone-600 dark:text-stone-400">
-                  <li>· 不是相亲局、卖课现场、强制破冰</li>
-                  <li>· 只想线上聊天、想索要所有人联系方式</li>
-                  <li>· 想销售引流、不尊重边界感</li>
+                  <li>· 不是相亲局、卖课、强制破冰</li>
+                  <li>· 只想线上聊、想加所有人微信的 pass</li>
+                  <li>· 想销售引流、不尊重边界的 pass</li>
                 </ul>
               </div>
             </div>
           </div>
         </section>
 
-        {/* 报名流程 - 3 步 */}
+        {/* 报名流程 */}
         <section>
           <h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
-            <span>📋</span> 报名流程
+            <span>📋</span> 怎么参加
           </h2>
           <div className="rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-4 sm:p-6 md:p-8">
             <div className="grid sm:grid-cols-3 gap-6 sm:gap-8">
               <div className="flex flex-col items-center text-center">
                 <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-lg flex items-center justify-center mb-3">1</div>
-                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">提交基本信息</h4>
-                <p className="mt-1 text-xs sm:text-sm text-stone-500 dark:text-stone-400">填表即可，无需注册</p>
+                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">填表</h4>
+                <p className="mt-1 text-xs sm:text-sm text-stone-500 dark:text-stone-400">不用注册，填个表就行</p>
               </div>
               <div className="flex flex-col items-center text-center">
                 <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-lg flex items-center justify-center mb-3">2</div>
-                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">查看匹配度与本周场次</h4>
-                <p className="mt-1 text-xs sm:text-sm text-stone-500 dark:text-stone-400">我们会根据场次筛选</p>
+                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">匹配</h4>
+                <p className="mt-1 text-xs sm:text-sm text-stone-500 dark:text-stone-400">看场次和匹配度</p>
               </div>
               <div className="flex flex-col items-center text-center">
                 <div className="w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 font-bold text-lg flex items-center justify-center mb-3">3</div>
-                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">通过微信/短信确认</h4>
-                <p className="mt-1 text-xs sm:text-sm text-stone-500 dark:text-stone-400">告知具体地点与时间</p>
+                <h4 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base">确认</h4>
+                <p className="mt-1 text-xs sm:text-sm text-stone-500 dark:text-stone-400">微信/短信告诉你地点时间</p>
               </div>
             </div>
             <p className="mt-6 pt-6 border-t border-stone-100 dark:border-stone-700 text-xs sm:text-sm text-stone-500 dark:text-stone-400 text-center">
-              联系方式仅用于活动确认，不公开给其他报名者。若当前场次不匹配，不会反复打扰。
+              联系方式只用来确认活动，不公开～不匹配也不会反复打扰
             </p>
           </div>
         </section>
 
-        {/* 信任标签 + 最近报名意向 */}
-        <div className="flex flex-col gap-4 sm:gap-6">
-          <div className="flex flex-wrap justify-center gap-x-6 gap-y-1.5 sm:gap-x-8 text-xs sm:text-sm text-stone-600 dark:text-stone-400">
-            <span>📍 公开场地</span>
-            <span>👥 6–8 人小组</span>
-            <span>✍️ 填表申请</span>
-            <span>🆓 不收费</span>
-          </div>
-
-          <div className="rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-4 sm:p-6">
-            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
-              <div className="min-w-0">
-                <p className="text-[10px] sm:text-xs font-medium text-amber-600 dark:text-amber-400/90 uppercase tracking-wider mb-1.5 sm:mb-2">
-                  👋 最近报名意向
-                </p>
-                <AvatarStack />
-              </div>
-            </div>
-          </div>
+        {/* 信任标签 */}
+        <div className="flex flex-wrap justify-center gap-x-6 gap-y-1.5 sm:gap-x-8 text-xs sm:text-sm text-stone-600 dark:text-stone-400">
+          <span>📍 公开场地</span>
+          <span>👥 6–8 人</span>
+          <span>✍️ 填表即报</span>
+          <span>🆓 免费</span>
         </div>
 
         {/* 本周场次 */}
@@ -100,52 +86,12 @@ export default function Home() {
           </h2>
           <div className="grid gap-3 sm:gap-4 sm:grid-cols-2">
             {SESSIONS.map((s, i) => (
-              <Link
-                key={s.id}
-                href={`/join?session=${encodeURIComponent(s.id)}`}
-                className="group flex flex-col sm:flex-row gap-3 sm:gap-4 p-4 sm:p-5 rounded-xl sm: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="relative w-full sm:w-24 sm:h-24 shrink-0 aspect-[16/10] sm:aspect-square rounded-lg sm:rounded-xl overflow-hidden bg-stone-100 dark:bg-stone-800">
-                  {s.coverImage ? (
-                    <SessionCoverImage src={s.coverImage} alt={s.title} type={s.type} fill sizes="(max-width: 640px) 100vw, 96px" className="object-cover" />
-                  ) : (
-                    <div className="absolute inset-0 flex items-center justify-center text-2xl">
-                      {s.type === "skill-exchange" ? "🔄" : "☕"}
-                    </div>
-                  )}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="flex flex-wrap gap-1 mb-1.5">
-                    {s.tags?.map((tag) => (
-                      <span key={tag} className="inline-block text-[9px] sm:text-[10px] font-medium text-amber-600 dark:text-amber-400/90 bg-amber-50 dark:bg-amber-900/20 px-1.5 py-0.5 rounded">
-                        {SESSION_TAGS[tag]}
-                      </span>
-                    ))}
-                    {i === 0 && (
-                      <span className="inline-block text-[9px] sm:text-[10px] font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-1.5 py-0.5 rounded">
-                        主推
-                      </span>
-                    )}
-                  </div>
-                  <span className="text-[10px] sm:text-xs text-amber-600 dark:text-amber-400/90">
-                    {ACTIVITY_TYPES[s.type]} · {s.city}
-                  </span>
-                  <h3 className="font-semibold text-stone-800 dark:text-stone-100 text-sm sm:text-base group-hover:text-amber-700 dark:group-hover:text-amber-400 mt-0.5">
-                    {s.title}
-                  </h3>
-                  <p className="text-xs sm: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-2 sm:mt-3 text-amber-600 dark:text-amber-400 text-xs sm:text-sm font-medium">
-                    报名 →
-                  </span>
-                </div>
-              </Link>
+              <SessionCard key={s.id} session={s} index={i} />
             ))}
           </div>
         </section>
 
-        {/* 为什么来 */}
+        {/* 活动亮点 */}
         <section>
           <h2 className="text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4 sm:mb-5 flex items-center gap-2">
             <span>💡</span> 活动亮点
@@ -153,10 +99,10 @@ export default function Home() {
           <div className="rounded-xl sm:rounded-2xl bg-white dark:bg-stone-900/80 border border-stone-200/80 dark:border-stone-700/80 p-4 sm:p-6 md:p-8">
             <div className="grid sm:grid-cols-2 gap-4 sm:gap-6">
               {[
-                { icon: "😌", title: "氛围轻松", desc: "咖啡馆、书店里的线下小聚，不用尬聊，聊得来就多聊几句。" },
-                { icon: "🛡️", title: "安全靠谱", desc: "公开场地，地址提前告知。尊重边界，不追问隐私。" },
-                { icon: "👍", title: "第一次来也 OK", desc: "很多人都是第一次参加，小组活动人数可控，不会尴尬。" },
-                { icon: "✍️", title: "填表就行", desc: "无需注册登录，不用先付款，填个表单即可。" },
+                { icon: "😌", title: "氛围轻松", desc: "loft民宿里的小聚，不用尬聊，聊得来就多聊～" },
+                { icon: "🛡️", title: "安全靠谱", desc: "公开场地，地址提前说。尊重边界，不追问隐私。" },
+                { icon: "👍", title: "第一次也 OK", desc: "很多人都是第一次来，小圈子人数可控～" },
+                { icon: "✍️", title: "填表就行", desc: "不用注册、不用先付，填个表就好。" },
               ].map((item) => (
                 <div key={item.title} className="flex gap-2.5 sm:gap-3">
                   <span className="text-xl sm:text-2xl shrink-0">{item.icon}</span>
@@ -177,9 +123,9 @@ export default function Home() {
           </h2>
           <div className="space-y-2 sm:space-y-3">
             {[
-              { q: "提交后多久会收到确认？", a: "活动前 1–2 天根据场次与匹配度联系，通过微信/短信确认。不匹配不会反复打扰。", icon: "⏱️" },
-              { q: "第一次参加可以吗？", a: "可以，很多人都是第一次来。6–8 人小组、公开场地，聊得来就多聊几句。", icon: "✨" },
-              { q: "临时有事怎么办？", a: "随时可退出，提前告知即可。", icon: "🔄" },
+              { q: "提交后多久会收到确认？", a: "活动前 1–2 天会联系，微信/短信确认。不匹配不会反复打扰～", icon: "⏱️" },
+              { q: "第一次参加可以吗？", a: "可以呀！很多人都是第一次来。6–8 人小圈子、公开场地，聊得来就多聊～", icon: "✨" },
+              { q: "临时有事怎么办？", a: "随时可以退出，提前说一声就行～", icon: "🔄" },
             ].map((faq) => (
               <details
                 key={faq.q}
@@ -205,10 +151,10 @@ export default function Home() {
             href="/join"
             className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-3.5 sm:py-4 rounded-xl font-semibold text-sm sm:text-base shadow-lg shadow-amber-900/20 transition-all"
           >
-            填表申请本周活动
+            去报名本周活动
           </Link>
           <p className="mt-3 text-center text-xs sm:text-sm text-stone-500 dark:text-stone-400">
-            查看是否适合参加 · 先填表，我们会根据场次联系
+            先填表，我们会根据场次联系你～
           </p>
         </section>
       </main>
@@ -219,7 +165,7 @@ export default function Home() {
           href="/join"
           className="block w-full bg-amber-600 hover:bg-amber-700 text-white text-center py-3 rounded-xl font-medium text-sm"
         >
-          申请本周场次
+          去报名
         </Link>
       </div>