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-16 01:09:13 -05:00
parent 91d56fa086
commit ff135563fb
15 changed files with 532 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
app/page.tsx
View File

@@ -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>