's'
This commit is contained in:
eric
@@ -1,7 +1,7 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-gray-200 dark:border-gray-800 mt-12 py-8">
|
||||
<div className="max-w-[1400px] mx-auto px-5 sm:px-10 text-center text-sm text-gray-500 dark:text-gray-400">
|
||||
<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>
|
||||
</footer>
|
||||
|
||||
@@ -1,83 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { SESSIONS } from "@/config/home.config";
|
||||
|
||||
export default function HeroSection() {
|
||||
const mainSession = SESSIONS[0];
|
||||
return (
|
||||
<section className="relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-orange-50/70 via-white to-[#fafafa] dark:from-gray-950 dark:via-gray-900 dark:to-gray-950" />
|
||||
<section className="relative overflow-hidden bg-[#faf8f5] dark:bg-stone-950">
|
||||
<div
|
||||
className="absolute top-0 right-0 w-[500px] h-[500px] -translate-y-1/3 translate-x-1/4 opacity-40 rounded-full"
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle, rgba(249,115,22,0.25) 0%, transparent 70%)",
|
||||
backgroundImage: `radial-gradient(ellipse 80% 50% at 50% 0%, rgba(180,83,9,0.08) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(180,83,9,0.05) 0%, transparent 50%)`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 dark:opacity-60"
|
||||
style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E")`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative max-w-[1400px] mx-auto px-5 sm:px-10 py-10 sm:py-14 md:py-20">
|
||||
<div className="flex flex-col lg:flex-row lg:items-start lg:gap-10 xl:gap-16">
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="inline-flex items-center gap-1.5 text-xs font-semibold text-orange-700 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/30 px-3 py-1.5 rounded-full mb-5">
|
||||
📍 北京周末
|
||||
</span>
|
||||
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight mb-5">
|
||||
<span className="hero-gradient-text">认识新朋友</span>
|
||||
<br />
|
||||
<span className="text-gray-900 dark:text-gray-100">不尬聊，不乱收费</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-base sm:text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-7 leading-relaxed">
|
||||
公开场地，小组活动，规则透明。先看场次，再决定要不要报名
|
||||
<div className="relative max-w-[1000px] mx-auto px-5 sm:px-8 py-14 sm:py-20 md:py-24">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:gap-16">
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-amber-700 dark:text-amber-400/90 mb-4 tracking-wide">
|
||||
北京 · 周末线下
|
||||
</p>
|
||||
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-[1.15]">
|
||||
<span className="hero-gradient-text">周末抽两小时</span>
|
||||
<br />
|
||||
<span className="text-stone-800 dark:text-stone-100">在咖啡馆认识几个新朋友</span>
|
||||
</h1>
|
||||
<p className="mt-5 text-stone-600 dark:text-stone-400 text-base sm:text-lg max-w-md leading-relaxed">
|
||||
氛围轻松，不用尬聊。公开场地，填表即报。
|
||||
</p>
|
||||
<div className="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-6 py-3 rounded-xl text-sm font-medium shadow-lg shadow-amber-900/20 transition-all active:scale-[0.98]"
|
||||
>
|
||||
报名参加
|
||||
</Link>
|
||||
{mainSession && (
|
||||
<Link
|
||||
href={`/join?session=${mainSession.id}`}
|
||||
className="inline-flex items-center justify-center border border-stone-200 dark:border-stone-700 text-stone-700 dark:text-stone-300 px-6 py-3 rounded-xl text-sm font-medium hover:bg-stone-100 dark:hover:bg-stone-800/50 transition-colors"
|
||||
>
|
||||
{mainSession.title} · {mainSession.date}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2.5 mb-8">
|
||||
{[
|
||||
{ icon: "📍", text: "公开场地，地址提前告知" },
|
||||
{ icon: "👥", text: "小组活动，人数可控" },
|
||||
{ icon: "📋", text: "规则透明，先了解再报名" },
|
||||
{ icon: "✍️", text: "填个简单表单即可，无需注册登录" },
|
||||
{ icon: "🌸", text: "女生友好的表达方式" },
|
||||
].map((f) => (
|
||||
<div key={f.icon} className="flex items-start gap-2.5">
|
||||
<span className="text-base sm:text-lg shrink-0 mt-0.5">{f.icon}</span>
|
||||
<span className="text-sm sm:text-base text-gray-600 dark:text-gray-400 underline decoration-gray-300 dark:decoration-gray-600 underline-offset-2">
|
||||
{f.text}
|
||||
{mainSession && (
|
||||
<div className="lg:w-[300px] shrink-0 mt-10 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"
|
||||
>
|
||||
<div className="aspect-[4/3] bg-gradient-to-br from-amber-500/20 via-amber-100/50 to-stone-100 dark:from-amber-900/30 dark:via-stone-800 dark:to-stone-900 flex items-center justify-center">
|
||||
<span className="text-6xl">☕</span>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<p className="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">{mainSession.title}</h3>
|
||||
<p className="text-sm text-stone-500 dark:text-stone-400 mt-1">
|
||||
{mainSession.date} {mainSession.time}
|
||||
</p>
|
||||
<span className="inline-flex items-center gap-1 mt-4 text-amber-600 dark:text-amber-400 font-medium text-sm">
|
||||
报名这场 →
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/join"
|
||||
className="inline-flex items-center gap-2 bg-[#ff4d4f] hover:bg-[#ff3333] dark:hover:bg-[#ff5c5e] text-white px-6 py-3 rounded-lg text-sm font-semibold transition-colors active:scale-[0.98]"
|
||||
>
|
||||
查看本周场次，去报名 →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="lg:w-[360px] xl:w-[400px] shrink-0 mt-10 lg:mt-4">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl overflow-hidden border border-gray-100 dark:border-gray-800">
|
||||
<div className="relative h-48 sm:h-56 bg-gradient-to-br from-emerald-400 via-teal-500 to-cyan-600 flex items-center justify-center overflow-hidden">
|
||||
<div className="text-center text-white px-6">
|
||||
<p className="text-lg sm:text-xl font-semibold mb-2">轻报名</p>
|
||||
<p className="text-sm opacity-90">不先登录，不先付款</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 sm:p-5">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
选好场次，填个简单表单即可参与
|
||||
</p>
|
||||
<Link
|
||||
href="/join"
|
||||
className="block w-full text-center bg-[#ff4d4f] hover:bg-[#ff3333] dark:hover:bg-[#ff5c5e] text-white py-3 rounded-lg text-sm font-semibold transition-colors active:scale-[0.98]"
|
||||
>
|
||||
去报名 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user