'style4'

app/api/join/route.ts

@@ -29,9 +29,18 @@ 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 intro = String(formData.intro || "").trim();
+    let intro = String(formData.intro || "").trim();
     const firstTime = String(formData.first_time || "").trim();
     const agreeRules = !!formData.agree_rules;
+    const status = String(formData.status || "").trim();
+    const activityType = String(formData.activity_type || "").trim();
+    const whyJoin = String(formData.why_join || "").trim();
+    const region = String(formData.region || "").trim();
+    const availableTime = String(formData.available_time || "").trim();
+    if (!intro && (status || activityType || whyJoin || region || availableTime)) {
+      const extra = [status && `状态:${status}`, activityType && `活动偏好:${activityType}`, whyJoin && `原因:${whyJoin}`, region && `区域:${region}`, availableTime && `时间:${availableTime}`].filter(Boolean).join(" | ");
+      intro = extra;
+    }
 
     if (!nickname || !wechatOrPhone || !intro || !session || !agreeRules) {
       return NextResponse.json(

app/components/AvatarStack.tsx

@@ -1,34 +1,31 @@
 "use client";
 
-import Image from "next/image";
 import { RECENT_JOINERS } from "@/config/home.config";
 
+function getInitial(name: string): string {
+  if (!name || name.length === 0) return "?";
+  return name.slice(0, 1);
+}
+
 export default function AvatarStack() {
   return (
     <div className="flex flex-wrap items-center gap-3 sm:gap-4">
-      <div className="flex -space-x-2.5 shrink-0">
+      <div className="flex -space-x-2 shrink-0">
         {RECENT_JOINERS.slice(0, 6).map((u, i) => (
           <div
             key={i}
-            className="relative w-10 h-10 rounded-full overflow-hidden border-2 border-[#faf8f5] dark:border-stone-950 shadow-sm ring-1 ring-stone-200/50 dark:ring-stone-700/50"
+            className="relative w-9 h-9 rounded-full overflow-hidden border-2 border-[#faf8f5] dark:border-stone-950 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 flex items-center justify-center text-xs font-medium ring-1 ring-stone-200/50 dark:ring-stone-700/50"
             title={u.name}
           >
-            <Image
+            {getInitial(u.name)}
-              src={u.avatar}
-              alt={u.name}
-              fill
-              sizes="40px"
-              className="object-cover"
-              unoptimized
-            />
           </div>
         ))}
       </div>
       <div className="text-sm text-stone-600 dark:text-stone-400 min-w-0">
         <span className="font-medium text-stone-800 dark:text-stone-200">
-          {RECENT_JOINERS.map((u) => u.name).join(" ")}
+          {RECENT_JOINERS.slice(0, 3).map((u) => u.name).join("、")}
         </span>
-        <span className="ml-1">等本月新加入</span>
+        <span className="ml-1">等有报名意向</span>
       </div>
     </div>
   );

app/components/HeroSection.tsx

@@ -19,50 +19,73 @@ export default function HeroSection() {
       <div className="relative max-w-[1000px] mx-auto px-4 sm:px-6 md:px-8 py-10 sm:py-16 md:py-20">
         <div className="flex flex-col lg:flex-row lg:items-center lg:gap-12 xl:gap-16">
           <div className="flex-1 min-w-0">
-            <p className="text-xs sm:text-sm font-medium text-amber-700 dark:text-amber-400/90 mb-3 sm:mb-4 tracking-wide flex items-center gap-1.5">
+            <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>📍</span> 深圳 · 广州 · 惠州
+              <span className="hero-gradient-text">周末留两小时</span>
-            </p>
-            <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight leading-[1.2]">
-              <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">去一个舒服的公开场地，认识几位同频的人</span>
             </h1>
-            <p className="mt-4 sm:mt-5 text-stone-600 dark:text-stone-400 text-sm sm:text-base lg:text-lg max-w-md leading-relaxed">
+            <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 人轻社交小组
             </p>
-            <div className="mt-6 sm:mt-8">
+            <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">
               <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>
 
-          {mainSession && mainSession.coverImage && (
+          {mainSession && (
-            <div className="w-full lg:w-[260px] xl:w-[300px] shrink-0 mt-6 lg:mt-0">
+            <div className="w-full lg:w-[280px] xl:w-[300px] shrink-0 mt-8 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"
+                className="block rounded-2xl overflow-hidden border border-stone-200 dark:border-stone-700 bg-white dark:bg-stone-900 shadow-lg shadow-stone-900/5 hover:shadow-xl hover:shadow-amber-900/10 transition-all ring-1 ring-stone-100 dark:ring-stone-800"
               >
                 <div className="relative aspect-[4/3] w-full bg-stone-100 dark:bg-stone-800 overflow-hidden">
-                  <SessionCoverImage
+                  {mainSession.coverImage ? (
-                    src={mainSession.coverImage}
+                    <SessionCoverImage
-                    alt={mainSession.title}
+                      src={mainSession.coverImage}
-                    type={mainSession.type}
+                      alt={mainSession.title}
-                    fill
+                      type={mainSession.type}
-                    sizes="(max-width: 1024px) 100vw, 300px"
+                      fill
-                    className="object-cover"
+                      sizes="(max-width: 1024px) 100vw, 300px"
-                  />
+                      className="object-cover"
+                    />
+                  ) : (
+                    <div className="absolute inset-0 flex items-center justify-center text-3xl bg-stone-200 dark:bg-stone-700">
+                      ☕
+                    </div>
+                  )}
+                  <div className="absolute top-2 left-2 right-2 flex flex-wrap gap-1">
+                    <span className="inline-block text-[10px] font-medium bg-white/90 dark:bg-stone-900/90 backdrop-blur px-2 py-0.5 rounded text-stone-700 dark:text-stone-200">
+                      周末下午
+                    </span>
+                    <span className="inline-block text-[10px] font-medium bg-white/90 dark:bg-stone-900/90 backdrop-blur px-2 py-0.5 rounded text-stone-700 dark:text-stone-200">
+                      6–8 人
+                    </span>
+                    <span className="inline-block text-[10px] font-medium bg-white/90 dark:bg-stone-900/90 backdrop-blur px-2 py-0.5 rounded text-stone-700 dark:text-stone-200">
+                      公开场地
+                    </span>
+                  </div>
                 </div>
-                <div className="p-4 sm:p-5">
+                <div className="p-4 sm:p-5 border-t border-stone-100 dark:border-stone-800">
                   <p className="text-[10px] sm: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 text-sm sm:text-base">{mainSession.title}</h3>
                   <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 mt-0.5">
-                    {mainSession.date} {mainSession.time}
+                    {mainSession.date} {mainSession.time} · {mainSession.place}
                   </p>
                   <span className="inline-flex items-center gap-1 mt-3 text-amber-600 dark:text-amber-400 font-medium text-xs sm:text-sm">
                     报名这场 →

app/components/SessionCoverImage.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 interface SessionCoverImageProps {
   src: string;
   alt: string;
-  type?: "skill-exchange" | "side-hustle";
+  type?: "skill-exchange" | "side-hustle" | "cafe" | "bookstore" | "citywalk" | "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 === "skill-exchange" ? "🔄" : "☕"}
+        {type === "bookstore" ? "📚" : type === "citywalk" ? "🚶" : type === "skill-exchange" ? "🔄" : "☕"}
       </div>
     );
   }

app/globals.css

@@ -81,10 +81,20 @@ body {
 
 .form-input {
   width: 100%;
-  padding: 0.5rem 0.75rem;
+  padding: 0.625rem 0.875rem;
   border: 1px solid #e2e8f0;
   border-radius: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.9375rem;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.form-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.form-input::placeholder {
+  color: #9ca3af;
 }
 
 .dark .form-input {
@@ -92,6 +102,10 @@ body {
   background: #1f2937;
 }
 
+.dark .form-input::placeholder {
+  color: #6b7280;
+}
+
 .dark .right-item,
 .dark .community-card {
   background: #111827;

app/join/page.tsx

@@ -8,16 +8,46 @@ import CitySelect from "../components/CitySelect";
 import ThemeToggle from "../components/ThemeToggle";
 
 const ageOptions = ["18-24", "25-30", "31-35", "36-40", "40+"];
+const statusOptions = [
+  { value: "student", label: "学生" },
+  { value: "working", label: "上班" },
+  { value: "freelance", label: "自由职业" },
+  { value: "startup", label: "创业" },
+  { value: "other", label: "其他" },
+];
+const activityTypeOptions = [
+  { value: "cafe", label: "咖啡馆聊天" },
+  { value: "bookstore", label: "书店" },
+  { value: "citywalk", label: "Citywalk" },
+  { value: "side-hustle", label: "轻副业交流" },
+  { value: "any", label: "都可以" },
+];
 const firstTimeOptions = ["是，第一次参加", "否，参加过类似活动"];
+const availableTimeOptions = [
+  { value: "sat-pm", label: "周六下午" },
+  { value: "sun-pm", label: "周日下午" },
+  { value: "both", label: "都可以" },
+];
+
+const REGIONS: Record<string, string[]> = {
+  深圳: ["南山区", "福田区", "罗湖区", "宝安区", "龙岗区", "其他"],
+  广州: ["天河区", "越秀区", "海珠区", "荔湾区", "白云区", "其他"],
+  惠州: ["惠城区", "惠阳区", "其他"],
+};
 
 interface FormData {
   city: string;
   session: string;
-  nickname: string;
   ageRange: string;
-  wechatOrPhone: string;
+  status: string;
+  activityType: string;
   intro: string;
+  whyJoin: string;
+  nickname: string;
+  wechatOrPhone: string;
+  region: string;
   firstTime: string;
+  availableTime: string;
   agreeRules: boolean;
 }
 
@@ -31,14 +61,20 @@ function getSessionInfo(sessionId: string) {
 }
 
 export default function JoinPage() {
+  const [step, setStep] = useState<1 | 2>(1);
   const [form, setForm] = useState<FormData>({
     city: "",
     session: "",
-    nickname: "",
     ageRange: "",
-    wechatOrPhone: "",
+    status: "",
+    activityType: "",
     intro: "",
+    whyJoin: "",
+    nickname: "",
+    wechatOrPhone: "",
+    region: "",
     firstTime: "",
+    availableTime: "",
     agreeRules: false,
   });
   const [submitted, setSubmitted] = useState(false);
@@ -60,11 +96,22 @@ export default function JoinPage() {
   const set = (key: keyof FormData, value: string | boolean) =>
     setForm((prev) => ({ ...prev, [key]: value }));
 
+  const canProceedStep1 = form.city && form.session && form.ageRange && form.status && form.activityType && form.intro.trim() && form.whyJoin.trim();
+
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     setError(null);
     setSubmitting(true);
     try {
+      const reasonParts = [
+        form.intro,
+        form.whyJoin,
+        form.status && `状态: ${statusOptions.find((o) => o.value === form.status)?.label || form.status}`,
+        form.activityType && `活动偏好: ${activityTypeOptions.find((o) => o.value === form.activityType)?.label || form.activityType}`,
+        form.region && `常活动区域: ${form.region}`,
+        form.availableTime && `可参加时间: ${availableTimeOptions.find((o) => o.value === form.availableTime)?.label || form.availableTime}`,
+      ].filter(Boolean);
+
       const res = await fetch("/api/join", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -74,9 +121,14 @@ export default function JoinPage() {
           nickname: form.nickname,
           age_range: form.ageRange,
           wechat_or_phone: form.wechatOrPhone,
-          intro: form.intro,
+          intro: reasonParts.join(" | "),
           first_time: form.firstTime,
           agree_rules: form.agreeRules,
+          status: form.status,
+          activity_type: form.activityType,
+          why_join: form.whyJoin,
+          region: form.region,
+          available_time: form.availableTime,
         }),
       });
       const data = await res.json();
@@ -92,6 +144,7 @@ export default function JoinPage() {
   };
 
   const selectedSession = getSessionInfo(form.session);
+  const regions = form.city ? (REGIONS[form.city] || []) : [];
 
   if (submitted) {
     return (
@@ -102,7 +155,7 @@ export default function JoinPage() {
           </div>
           <h2 className="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100">报名成功</h2>
           <p className="mt-2 sm:mt-3 text-sm sm:text-base text-stone-500 dark:text-stone-400">
-            我们会尽快通过您留下的联系方式与您确认
+            我们会尽快通过您留下的联系方式与您确认。不是所有报名都会自动确认，我们会根据场次与匹配度联系合适报名者。
           </p>
           <Link
             href="/"
@@ -128,10 +181,18 @@ export default function JoinPage() {
       </header>
 
       <div className="mx-auto max-w-2xl px-0 py-0 sm:px-6 sm:py-8 lg:py-10">
+        {/* Trust bar */}
+        <div className="mx-4 sm:mx-0 mt-4 flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs sm:text-sm text-stone-600 dark:text-stone-400 py-3">
+          <span>📍 公开场地</span>
+          <span>👥 6–8 人小组</span>
+          <span>🆓 不收费</span>
+          <span>🤝 尊重边界</span>
+        </div>
+
         <div className="overflow-hidden bg-white dark:bg-stone-900 shadow-sm sm:rounded-t-2xl">
-          <div className="relative h-32 sm:h-40 md:h-52 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700">
+          <div className="relative h-28 sm:h-36 md:h-44 overflow-hidden bg-gradient-to-br from-amber-500 via-amber-600 to-amber-700">
             <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
-              <div className="text-5xl sm:text-6xl md:text-7xl" aria-hidden>☕</div>
+              <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> 深圳 · 广州 · 惠州
               </div>
@@ -143,8 +204,20 @@ export default function JoinPage() {
               活动报名
             </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>
+
+            {/* 进度提示 */}
+            <div className="mt-4 flex items-center justify-center gap-2">
+              <div className={`h-1.5 flex-1 max-w-[120px] rounded-full transition-colors ${step === 1 ? "bg-amber-500" : "bg-amber-200 dark:bg-amber-800"}`} />
+              <span className="text-xs font-medium text-stone-500 dark:text-stone-400">
+                {step === 1 ? "第一步" : "第二步"}
+              </span>
+              <div className={`h-1.5 flex-1 max-w-[120px] rounded-full transition-colors ${step === 2 ? "bg-amber-500" : "bg-stone-200 dark:bg-stone-700"}`} />
+            </div>
           </div>
         </div>
 
@@ -152,7 +225,7 @@ export default function JoinPage() {
           <div className="mt-4 sm:mt-5 mx-4 sm:mx-0 rounded-xl bg-white dark:bg-stone-900 px-4 sm:px-5 py-3 sm:py-4 shadow-sm border border-stone-200 dark:border-stone-800 flex gap-3">
             {selectedSession.coverImage && (
               <div className="relative w-16 h-16 sm:w-20 sm:h-20 shrink-0 rounded-lg overflow-hidden">
-                <SessionCoverImage src={selectedSession.coverImage} alt="" type={selectedSession.type} fill sizes="80px" className="object-cover" />
+                <SessionCoverImage src={selectedSession.coverImage} alt="" type={selectedSession.type} fill sizes="72px" className="object-cover" />
               </div>
             )}
             <div className="min-w-0 flex-1 text-left">
@@ -167,136 +240,221 @@ export default function JoinPage() {
           onSubmit={handleSubmit}
           className="mt-0 sm:mt-5 bg-white dark:bg-stone-900 px-4 sm:px-6 md:px-8 pb-8 pt-6 sm:pt-8 shadow-sm sm:rounded-b-2xl sm:shadow-md border border-t-0 sm:border border-stone-200 dark:border-stone-800"
         >
-          <div className="space-y-4 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6">
+          {step === 1 ? (
-            <Field label="📍 城市">
+            <div className="space-y-6">
-              <CitySelect value={form.city} onChange={(v) => set("city", v)} required />
+              <div className="space-y-4">
-            </Field>
+                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">基本信息</h3>
+                <Field label="城市">
+                  <CitySelect value={form.city} onChange={(v) => set("city", v)} required />
+                </Field>
+                <Field label="想参加的场次">
+                  <select
+                    value={form.session}
+                    onChange={(e) => {
+                      const sid = e.target.value;
+                      const s = SESSIONS.find((x) => x.id === sid);
+                      setForm((prev) => ({ ...prev, session: sid, city: s?.city || prev.city }));
+                    }}
+                    required
+                    className={`form-input appearance-none ${form.session ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {SESSIONS.map((s) => (
+                      <option key={s.id} value={s.id}>
+                        {s.title} · {s.city} · {s.date} {s.time}
+                      </option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="年龄段">
+                  <select
+                    value={form.ageRange}
+                    onChange={(e) => set("ageRange", e.target.value)}
+                    required
+                    className={`form-input appearance-none ${form.ageRange ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {ageOptions.map((o) => (
+                      <option key={o} value={o}>{o}</option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="当前状态">
+                  <select
+                    value={form.status}
+                    onChange={(e) => set("status", e.target.value)}
+                    required
+                    className={`form-input appearance-none ${form.status ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {statusOptions.map((o) => (
+                      <option key={o.value} value={o.value}>{o.label}</option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="想参加的活动类型">
+                  <select
+                    value={form.activityType}
+                    onChange={(e) => set("activityType", e.target.value)}
+                    required
+                    className={`form-input appearance-none ${form.activityType ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {activityTypeOptions.map((o) => (
+                      <option key={o.value} value={o.value}>{o.label}</option>
+                    ))}
+                  </select>
+                </Field>
+              </div>
 
-            <Field label="📅 想参加的场次">
+              <div className="pt-4 border-t border-stone-100 dark:border-stone-700 space-y-4">
-              <select
+                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">简单介绍</h3>
-                value={form.session}
+                <Field label="一句话介绍自己">
-                onChange={(e) => {
+                  <input
-                  const sid = e.target.value;
+                    type="text"
-                  const s = SESSIONS.find((x) => x.id === sid);
+                    maxLength={140}
-                  setForm((prev) => ({ ...prev, session: sid, city: s?.city || prev.city }));
+                    placeholder="简单介绍一下自己"
-                }}
+                    value={form.intro}
-                required
+                    onChange={(e) => set("intro", e.target.value)}
-                className={`form-input appearance-none ${form.session ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                    required
+                    className="form-input"
+                  />
+                </Field>
+                <Field label="为什么想参加">
+                  <input
+                    type="text"
+                    maxLength={200}
+                    placeholder="简单说说你的期待"
+                    value={form.whyJoin}
+                    onChange={(e) => set("whyJoin", e.target.value)}
+                    required
+                    className="form-input"
+                  />
+                </Field>
+              </div>
+
+              <button
+                type="button"
+                onClick={() => setStep(2)}
+                disabled={!canProceedStep1}
+                className="w-full rounded-xl bg-amber-600 py-3 sm:py-3.5 text-base font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-amber-600 mt-6"
               >
-                <option value="" disabled>请选择</option>
+                下一步：填写联系方式
-                {SESSIONS.map((s) => (
+              </button>
-                  <option key={s.id} value={s.id}>
+            </div>
-                    {s.title} · {s.city} · {s.date} {s.time}
+          ) : (
-                  </option>
+            <div className="space-y-6">
-                ))}
+              <button
-              </select>
+                type="button"
-            </Field>
+                onClick={() => setStep(1)}
-          </div>
+                className="text-sm text-stone-500 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400"
-
-          <div className="mt-4 sm:mt-6 space-y-4 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6">
-            <Field label="昵称">
-              <input
-                type="text"
-                maxLength={40}
-                placeholder="活动中使用的称呼"
-                value={form.nickname}
-                onChange={(e) => set("nickname", e.target.value)}
-                required
-                className="form-input"
-              />
-            </Field>
-
-            <Field label="年龄段">
-              <select
-                value={form.ageRange}
-                onChange={(e) => set("ageRange", e.target.value)}
-                required
-                className={`form-input appearance-none ${form.ageRange ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
               >
-                <option value="" disabled>请选择</option>
+                ← 返回上一步
-                {ageOptions.map((o) => (
+              </button>
-                  <option key={o} value={o}>{o}</option>
-                ))}
-              </select>
-            </Field>
-          </div>
 
-          <div className="mt-4 sm:mt-6 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
+              <div className="space-y-4">
-            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
+                <h3 className="text-sm font-semibold text-stone-700 dark:text-stone-300">联系方式与确认</h3>
-              微信号或手机号
+                <Field label="昵称">
-            </label>
+                  <input
-            <input
+                    type="text"
-              type="text"
+                    maxLength={40}
-              maxLength={50}
+                    placeholder="活动中使用的称呼"
-              placeholder="用于活动联系"
+                    value={form.nickname}
-              value={form.wechatOrPhone}
+                    onChange={(e) => set("nickname", e.target.value)}
-              onChange={(e) => set("wechatOrPhone", e.target.value)}
+                    required
-              required
+                    className="form-input"
-              className="form-input"
+                  />
-            />
+                </Field>
-          </div>
+                <Field label="微信号或手机号">
+                  <div>
+                    <input
+                      type="text"
+                      maxLength={50}
+                      placeholder="用于活动联系"
+                      value={form.wechatOrPhone}
+                      onChange={(e) => set("wechatOrPhone", 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}
+                    onChange={(e) => set("region", e.target.value)}
+                    className={`form-input appearance-none ${form.region ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="">请选择（选填）</option>
+                    {regions.map((r) => (
+                      <option key={r} value={r}>{r}</option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="是否第一次参加类似活动">
+                  <select
+                    value={form.firstTime}
+                    onChange={(e) => set("firstTime", e.target.value)}
+                    required
+                    className={`form-input appearance-none ${form.firstTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="" disabled>请选择</option>
+                    {firstTimeOptions.map((o) => (
+                      <option key={o} value={o}>{o}</option>
+                    ))}
+                  </select>
+                </Field>
+                <Field label="可参加时间">
+                  <select
+                    value={form.availableTime}
+                    onChange={(e) => set("availableTime", e.target.value)}
+                    className={`form-input appearance-none ${form.availableTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
+                  >
+                    <option value="">请选择（选填）</option>
+                    {availableTimeOptions.map((o) => (
+                      <option key={o.value} value={o.value}>{o.label}</option>
+                    ))}
+                  </select>
+                </Field>
+              </div>
 
-          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
+              <div className="pt-4 border-t border-stone-100 dark:border-stone-700">
-            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
+                <label className="flex items-start gap-3 cursor-pointer">
-              一句话自我介绍
+                  <input
-            </label>
+                    type="checkbox"
-            <input
+                    checked={form.agreeRules}
-              type="text"
+                    onChange={(e) => set("agreeRules", e.target.checked)}
-              maxLength={140}
+                    required
-              placeholder="简单介绍一下自己"
+                    className="mt-1 rounded border-stone-300 text-amber-600 focus:ring-amber-500"
-              value={form.intro}
+                  />
-              onChange={(e) => set("intro", e.target.value)}
+                  <span className="text-xs sm:text-sm text-stone-600 dark:text-stone-400">
-              required
+                    我已阅读并同意活动规则（公开场地、尊重边界、如有不适可随时离开）
-              className="form-input"
+                  </span>
-            />
+                </label>
-          </div>
+              </div>
 
-          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
+              <p className="text-xs text-stone-500 dark:text-stone-400">
-            <label className="mb-2 block text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300">
+                提交后我们会根据场次与匹配度联系合适报名者，通过微信/短信确认地点与时间。若当前场次不匹配，不会反复打扰。
-              是否第一次参加类似活动
-            </label>
-            <select
-              value={form.firstTime}
-              onChange={(e) => set("firstTime", e.target.value)}
-              required
-              className={`form-input appearance-none ${form.firstTime ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"}`}
-            >
-              <option value="" disabled>请选择</option>
-              {firstTimeOptions.map((o) => (
-                <option key={o} value={o}>{o}</option>
-              ))}
-            </select>
-          </div>
-
-          <div className="mt-4 sm:mt-5 pt-4 sm:pt-5 border-t border-stone-100 dark:border-stone-700">
-            <label className="flex items-start gap-3 cursor-pointer">
-              <input
-                type="checkbox"
-                checked={form.agreeRules}
-                onChange={(e) => set("agreeRules", e.target.checked)}
-                required
-                className="mt-1 rounded border-stone-300 text-amber-600 focus:ring-amber-500"
-              />
-              <span className="text-xs sm:text-sm text-stone-600 dark:text-stone-400">
-                我已阅读并同意活动规则（公开场地、尊重边界、如有不适可随时离开）
-              </span>
-            </label>
-          </div>
-
-          <div className="mt-6 sm:mt-8 sm:mt-10">
-            {error && (
-              <p className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-center text-sm text-red-600 dark:text-red-400">
-                {error}
               </p>
-            )}
+
-            <button
+              <div className="pt-2">
-              type="submit"
+                {error && (
-              disabled={submitting}
+                  <p className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-center text-sm text-red-600 dark:text-red-400">
-              className="w-full rounded-xl bg-amber-600 py-3 sm:py-3.5 sm:py-4 text-base sm:text-lg font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70"
+                    {error}
-            >
+                  </p>
-              {submitting ? "提交中…" : "提交报名"}
+                )}
-            </button>
+                <button
-          </div>
+                  type="submit"
+                  disabled={submitting}
+                  className="w-full rounded-xl bg-amber-600 py-3 sm:py-3.5 sm:py-4 text-base sm:text-lg font-medium text-white transition-colors hover:bg-amber-700 active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-70"
+                >
+                  {submitting ? "提交中…" : "提交报名"}
+                </button>
+              </div>
+            </div>
+          )}
         </form>
 
         <div className="mt-4 sm:mt-6 text-center px-4">
@@ -317,11 +475,11 @@ function Field({
   children: React.ReactNode;
 }) {
   return (
-    <div className="relative flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-0 py-3 sm:py-4 border-b border-stone-100 dark:border-stone-700 sm:border-b-0 last:border-b-0">
+    <div className="flex flex-col gap-2 py-3">
-      <label className="shrink-0 text-sm sm:text-base font-bold text-stone-700 dark:text-stone-300 sm:mb-0 sm:w-[100px]">
+      <label className="text-sm sm:text-base font-medium text-stone-700 dark:text-stone-300">
         {label}
       </label>
-      <div className="relative min-w-0 flex-1">{children}</div>
+      <div className="min-w-0">{children}</div>
     </div>
   );
 }

app/page.tsx

@@ -6,7 +6,7 @@ import SessionCoverImage from "./components/SessionCoverImage";
 import Footer from "./components/Footer";
 import Header from "./components/Header";
 import AvatarStack from "./components/AvatarStack";
-import { SESSIONS, ACTIVITY_TYPES } from "@/config/home.config";
+import { SESSIONS, ACTIVITY_TYPES, SESSION_TAGS } from "@/config/home.config";
 
 export default function Home() {
   return (
@@ -15,12 +15,69 @@ 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="grid sm:grid-cols-2 gap-4 sm:gap-6">
+            <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">
+              <h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 sm:mb-4 flex items-center gap-2">
+                <span className="text-amber-600 dark:text-amber-400">✓</span> 这是什么
+              </h3>
+              <ul className="space-y-2 text-sm sm:text-base text-stone-600 dark:text-stone-400">
+                <li>· 周末同城轻社交</li>
+                <li>· 公开场地见面</li>
+                <li>· 小组人数少（6–8 人）</li>
+                <li>· 适合第一次来的人</li>
+              </ul>
+            </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">
+              <h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 sm:mb-4 flex items-center gap-2">
+                <span className="text-stone-400 dark:text-stone-500">✗</span> 这不是什么
+              </h3>
+              <ul className="space-y-2 text-sm sm:text-base text-stone-600 dark:text-stone-400">
+                <li>· 不是相亲局</li>
+                <li>· 不是卖课现场</li>
+                <li>· 不是强制社交破冰大会</li>
+                <li>· 不是随便拉群加微信</li>
+              </ul>
+            </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> 报名后会发生什么
+          </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>
+              </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>
+              </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>
+              </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>👥 小组活动</span>
+            <span>👥 6–8 人小组</span>
-            <span>✍️ 填表即报</span>
+            <span>✍️ 填表申请</span>
             <span>🆓 不收费</span>
           </div>
 
@@ -28,14 +85,10 @@ export default function Home() {
             <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 className="flex items-center gap-1.5 sm:gap-2 text-stone-500 dark:text-stone-400 text-xs sm:text-sm shrink-0">
-                <span className="font-semibold text-amber-600 dark:text-amber-400">50+</span>
-                <span>人已报名</span>
-              </div>
             </div>
           </div>
         </div>
@@ -52,9 +105,9 @@ export default function Home() {
                 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-20 sm:h-20 shrink-0 aspect-[16/10] sm:aspect-square rounded-lg sm:rounded-xl overflow-hidden bg-stone-100 dark:bg-stone-800">
+                <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, 80px" className="object-cover" />
+                    <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" ? "🔄" : "☕"}
@@ -62,11 +115,18 @@ export default function Home() {
                   )}
                 </div>
                 <div className="min-w-0 flex-1">
-                  {i === 0 && (
+                  <div className="flex flex-wrap gap-1 mb-1.5">
-                    <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 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">
-                    </span>
+                        {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>
@@ -85,6 +145,33 @@ export default function Home() {
           </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> 适合谁 / 不适合谁
+          </h2>
+          <div className="grid sm:grid-cols-2 gap-4 sm:gap-6">
+            <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">
+              <h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 sm:mb-4">适合</h3>
+              <ul className="space-y-2 text-sm sm:text-base text-stone-600 dark:text-stone-400">
+                <li>· 想周末出门认识新朋友</li>
+                <li>· 接受公开场地的小组活动</li>
+                <li>· 喜欢舒服聊天，不喜欢太吵场子</li>
+                <li>· 第一次参加也可以</li>
+              </ul>
+            </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">
+              <h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 sm:mb-4">不适合</h3>
+              <ul className="space-y-2 text-sm sm:text-base text-stone-600 dark:text-stone-400">
+                <li>· 只想线上聊天不见面</li>
+                <li>· 想直接索要所有人联系方式</li>
+                <li>· 想销售、引流、推项目</li>
+                <li>· 不尊重边界感</li>
+              </ul>
+            </div>
+          </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">
@@ -110,17 +197,19 @@ export default function Home() {
           </div>
         </section>
 
-        {/* FAQ - 可折叠，默认折叠 */}
+        {/* FAQ */}
-        <section>
+        <section id="faq">
           <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> 常见问题
           </h2>
           <div className="space-y-2 sm:space-y-3">
             {[
-              { q: "需要先注册吗？", a: "不需要，填表即可。", icon: "🔐" },
+              { q: "提交后多久会收到确认？", a: "我们会在活动前 1–2 天根据场次与匹配度联系合适报名者，通过微信或短信确认。若当前场次不匹配，不会反复打扰。", icon: "⏱️" },
-              { q: "需要先付款吗？", a: "不需要，报名不收费。", icon: "💰" },
+              { q: "联系方式会公开给其他人吗？", a: "不会。联系方式仅用于活动确认，不会公开给其他报名者。", icon: "🔒" },
-              { q: "第一次参加可以吗？", a: "可以，很多人都是第一次来。", icon: "✨" },
+              { q: "第一次参加会不会尴尬？", a: "不会。很多人都是第一次来，6–8 人小组人数可控，公开场地氛围轻松，聊得来就多聊几句。", icon: "✨" },
-              { q: "地点什么时候通知？", a: "报名后会通过微信/短信告知，均为公开场地。", icon: "📍" },
+              { q: "如果临时有事不去了怎么办？", a: "随时可以退出，提前告知即可。我们尊重每个人的选择。", icon: "🔄" },
+              { q: "活动地点为什么不是先公开具体地址？", a: "我们会根据报名情况确定具体场地，确认后会通过微信/短信告知。均为公开场地（咖啡馆、书店等），地址提前通知。", icon: "📍" },
+              { q: "会不会有人骚扰、硬加联系方式？", a: "我们强调边界感，不强制交换联系方式。公开场地、小组形式也有助于降低此类情况。如有不适可随时离开。", icon: "🛡️" },
             ].map((faq) => (
               <details
                 key={faq.q}
@@ -133,7 +222,7 @@ export default function Home() {
                 </summary>
                 <div className="px-3 pb-3 sm:px-4 sm:pb-4 pt-0 flex gap-2.5 sm:gap-3">
                   <span className="w-[1.25rem] sm:w-[1.5rem] shrink-0" aria-hidden />
-                  <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400">{faq.a}</p>
+                  <p className="text-xs sm:text-sm text-stone-500 dark:text-stone-400 leading-relaxed">{faq.a}</p>
                 </div>
               </details>
             ))}
@@ -146,8 +235,11 @@ 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>
 
@@ -157,7 +249,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>
 

config/home.config.ts

@@ -5,12 +5,33 @@ export const CITIES = ["深圳", "广州", "惠州"] as const;
 export const ACTIVITY_TYPES = {
   "skill-exchange": "技能交换",
   "side-hustle": "副业沙龙/茶话会",
+  "cafe": "咖啡馆聊天",
+  "bookstore": "书店",
+  "citywalk": "Citywalk",
+  "light-chat": "轻话题",
 } as const;
 
+/** 活动标签 */
+export const SESSION_TAGS = {
+  "first-friendly": "首次友好",
+  "public-venue": "公开场地",
+  "small-group": "6-8 人",
+  "weekend-pm": "周末下午",
+  "cafe": "咖啡馆",
+  "bookstore": "书店",
+  "citywalk": "Citywalk",
+  "light-topic": "轻话题",
+} as const;
+
+/** 咖啡馆/书店/城市 占位图 - Unsplash 真实场景 */
+const IMG_CAFE = "https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=400&h=300&fit=crop";
+const IMG_BOOKSTORE = "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=400&h=300&fit=crop";
+const IMG_CITY = "https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=400&h=300&fit=crop";
+
 /** 本周活动场次 */
 export const SESSIONS = [
-  { id: "session-1", date: "3月16日 周六", time: "14:00", place: "南山区某咖啡馆", city: "深圳", type: "skill-exchange" as const, title: "周末技能交换", coverImage: "https://picsum.photos/seed/s1/400/300" },
+  { id: "session-1", date: "3月16日 周六", time: "14:00", place: "南山区某咖啡馆", city: "深圳", type: "skill-exchange" as const, title: "周末技能交换", coverImage: IMG_CAFE, tags: ["first-friendly", "public-venue", "small-group", "weekend-pm", "cafe", "light-topic"] as const },
-  { id: "session-2", date: "3月17日 周日", time: "15:00", place: "天河区某书店", city: "广州", type: "side-hustle" as const, title: "副业沙龙", coverImage: "https://picsum.photos/seed/s2/400/300" },
+  { id: "session-2", date: "3月17日 周日", time: "15:00", place: "天河区某书店", city: "广州", type: "side-hustle" as const, title: "副业沙龙", coverImage: IMG_BOOKSTORE, tags: ["first-friendly", "public-venue", "small-group", "weekend-pm", "bookstore"] as const },
 ];
 
 /** 最近报名展示 - mock 头像从互联网获取 */

next.config.ts

@@ -6,6 +6,7 @@ const nextConfig: NextConfig = {
     remotePatterns: [
       { protocol: "https", hostname: "picsum.photos", pathname: "/**" },
       { protocol: "https", hostname: "i.pravatar.cc", pathname: "/**" },
+      { protocol: "https", hostname: "images.unsplash.com", pathname: "/**" },
     ],
   },
 };