79 lines
3.8 KiB
TypeScript
79 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import SessionCoverImage from "./SessionCoverImage";
|
|
import { SESSIONS } from "@/config/home.config";
|
|
|
|
export default function HeroSection() {
|
|
const mainSession = SESSIONS[0];
|
|
return (
|
|
<section className="relative overflow-hidden bg-[#faf8f5] dark:bg-stone-950">
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
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="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>
|
|
<br />
|
|
<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>
|
|
<div className="mt-6 sm:mt-8">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
{mainSession && mainSession.coverImage && (
|
|
<div className="w-full lg:w-[260px] xl:w-[300px] shrink-0 mt-6 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="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"
|
|
/>
|
|
</div>
|
|
<div className="p-4 sm:p-5">
|
|
<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}
|
|
</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">
|
|
报名这场 →
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|