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

'style4'

Browse Source
This commit is contained in:
eric
2026-03-15 23:19:43 -05:00
parent 4ed10176e7
commit 501e5b7987
9 changed files with 520 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/AvatarStack.tsx
View File

@@ -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
src={u.avatar}
alt={u.name}
fill
sizes="40px"
className="object-cover"
unoptimized
/>
{getInitial(u.name)}
</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>
);

71
app/components/HeroSection.tsx
View File

@@ -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">
<span>📍</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>
<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">去一个舒服的公开场地，认识几位同频的人</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 && (
<div className="w-full lg:w-[260px] xl:w-[300px] shrink-0 mt-6 lg:mt-0">
{mainSession && (
<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
src={mainSession.coverImage}
alt={mainSession.title}
type={mainSession.type}
fill
sizes="(max-width: 1024px) 100vw, 300px"
className="object-cover"
/>
{mainSession.coverImage ? (
<SessionCoverImage
src={mainSession.coverImage}
alt={mainSession.title}
type={mainSession.type}
fill
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">
报名这场 →

4
app/components/SessionCoverImage.tsx
View File

@@ -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>
);
}