eric/gitlab-instance-0a899031_salon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

's'

Browse Source
This commit is contained in:
eric
2026-03-15 23:44:40 -05:00
parent 501e5b7987
commit 91d56fa086
3 changed files with 49 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/components/AvatarStack.tsx
View File

@@ -1,23 +1,26 @@
"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 shrink-0">
<div className="flex -space-x-2.5 shrink-0">
{RECENT_JOINERS.slice(0, 6).map((u, i) => (
<div
key={i}
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"
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"
title={u.name}
>
{getInitial(u.name)}
<Image
src={u.avatar}
alt={u.name}
fill
sizes="40px"
className="object-cover"
unoptimized
/>
</div>
))}
</div>

88
app/page.tsx
View File

@@ -15,38 +15,38 @@ 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 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">
<div>
<h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 flex items-center gap-2">
<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>
</ul>
</div>
<div>
<h3 className="text-base sm:text-lg font-semibold text-stone-800 dark:text-stone-100 mb-3 flex items-center gap-2">
<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>
</ul>
</div>
</div>
</div>
</section>
{/* 报名后会发生什么 - 3 步流程 */}
{/* 报名流程 - 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">
@@ -145,37 +145,10 @@ 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">
<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-2 gap-4 sm:gap-6">
@@ -204,12 +177,9 @@ export default function Home() {
</h2>
<div className="space-y-2 sm:space-y-3">
{[
{ q: "提交后多久会收到确认？", a: "我们会在活动前 1–2 天根据场次与匹配度联系合适报名者，通过微信或短信确认。若当前场次不匹配，不会反复打扰。", icon: "⏱️" },
{ q: "联系方式会公开给其他人吗？", a: "不会。联系方式仅用于活动确认，不会公开给其他报名者。", icon: "🔒" },
{ q: "第一次参加会不会尴尬？", a: "不会。很多人都是第一次来，6–8 人小组人数可控，公开场地氛围轻松，聊得来就多聊几句。", icon: "✨" },
{ q: "如果临时有事不去了怎么办？", a: "随时可以退出，提前告知即可。我们尊重每个人的选择。", icon: "🔄" },
{ q: "活动地点为什么不是先公开具体地址？", a: "我们会根据报名情况确定具体场地，确认后会通过微信/短信告知。均为公开场地（咖啡馆、书店等），地址提前通知。", icon: "📍" },
{ q: "会不会有人骚扰、硬加联系方式？", a: "我们强调边界感，不强制交换联系方式。公开场地、小组形式也有助于降低此类情况。如有不适可随时离开。", icon: "🛡️" },
{ q: "提交后多久会收到确认？", a: "活动前 1–2 天根据场次与匹配度联系，通过微信/短信确认。不匹配不会反复打扰。", icon: "⏱️" },
{ q: "第一次参加可以吗？", a: "可以，很多人都是第一次来。6–8 人小组、公开场地，聊得来就多聊几句。", icon: "✨" },
{ q: "临时有事怎么办？", a: "随时可退出，提前告知即可。", icon: "🔄" },
].map((faq) => (
<details
key={faq.q}

18
config/home.config.ts
View File

@@ -34,14 +34,14 @@ export const SESSIONS = [
{ 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 头像从互联网获取 */
/** 最近报名意向 - 中国人头像 mock（Unsplash 亚洲人像） */
export const RECENT_JOINERS = [
{ name: "晓琪", avatar: "https://i.pravatar.cc/80?img=1" },
{ name: "雨晴", avatar: "https://i.pravatar.cc/80?img=5" },
{ name: "子豪", avatar: "https://i.pravatar.cc/80?img=11" },
{ name: "林晓", avatar: "https://i.pravatar.cc/80?img=9" },
{ name: "佳琪", avatar: "https://i.pravatar.cc/80?img=20" },
{ name: "浩然", avatar: "https://i.pravatar.cc/80?img=12" },
{ name: "心怡", avatar: "https://i.pravatar.cc/80?img=23" },
{ name: "阿杰", avatar: "https://i.pravatar.cc/80?img=15" },
{ name: "晓琪", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&h=80&fit=crop&crop=face" },
{ name: "雨晴", avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=80&h=80&fit=crop&crop=face" },
{ name: "子豪", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face" },
{ name: "林晓", avatar: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=80&h=80&fit=crop&crop=face" },
{ name: "佳琪", avatar: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=80&h=80&fit=crop&crop=face" },
{ name: "浩然", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop&crop=face" },
{ name: "心怡", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop&crop=face" },
{ name: "阿杰", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=80&h=80&fit=crop&crop=face" },
];