'style3

app/components/AvatarStack.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Image from "next/image";
+import { RECENT_JOINERS } from "@/config/home.config";
+
+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">
+        {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"
+            title={u.name}
+          >
+            <Image
+              src={u.avatar}
+              alt={u.name}
+              fill
+              sizes="40px"
+              className="object-cover"
+              unoptimized
+            />
+          </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(" ")}
+        </span>
+        <span className="ml-1">等本月新加入</span>
+      </div>
+    </div>
+  );
+}

app/components/CitySelect.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { CITIES } from "@/config/home.config";
+
+interface CitySelectProps {
+  value: string;
+  onChange: (v: string) => void;
+  className?: string;
+  required?: boolean;
+}
+
+export default function CitySelect({ value, onChange, className = "", required }: CitySelectProps) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      required={required}
+      className={`form-input appearance-none ${value ? "text-stone-800 dark:text-stone-100" : "text-stone-400 dark:text-stone-500"} ${className}`}
+    >
+      <option value="" disabled>请选择城市</option>
+      {CITIES.map((c) => (
+        <option key={c} value={c}>{c}</option>
+      ))}
+    </select>
+  );
+}

app/components/Footer.tsx

@@ -2,7 +2,7 @@ export default function Footer() {
   return (
     <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>
+        <p>© {new Date().getFullYear()} Salon. 深圳·广州·惠州 同城活动。</p>
       </div>
     </footer>
   );

app/components/Header.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import Link from "next/link";
+import ThemeToggle from "./ThemeToggle";
+
+export default function Header() {
+  return (
+    <header className="sticky top-0 z-40 w-full border-b border-stone-200/80 dark:border-stone-800 bg-[#faf8f5]/95 dark:bg-stone-950/95 backdrop-blur">
+      <div className="max-w-[900px] mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
+        <Link href="/" className="font-semibold text-stone-800 dark:text-stone-100 text-base">
+          Salon
+        </Link>
+        <ThemeToggle />
+      </div>
+    </header>
+  );
+}

app/components/HeroSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import SessionCoverImage from "./SessionCoverImage";
 import { SESSIONS } from "@/config/home.config";
 
 export default function HeroSection() {
@@ -14,63 +15,56 @@ export default function HeroSection() {
             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-[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">
-              北京 · 周末线下
+      <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-3xl sm:text-4xl md:text-5xl font-bold tracking-tight leading-[1.15]">
+            <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>
+              <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 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-8 flex flex-wrap gap-3">
+            <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-6 py-3 rounded-xl text-sm font-medium shadow-lg shadow-amber-900/20 transition-all active:scale-[0.98]"
+                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>
-              {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>
 
-          {mainSession && (
-            <div className="lg:w-[300px] shrink-0 mt-10 lg:mt-0">
+          {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="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 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-5">
-                  <p className="text-xs font-medium text-amber-600 dark:text-amber-400/90 uppercase tracking-wider mb-1">
+                <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">{mainSession.title}</h3>
-                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-1">
+                  <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-4 text-amber-600 dark:text-amber-400 font-medium text-sm">
+                  <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>

app/components/SessionCoverImage.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+interface SessionCoverImageProps {
+  src: string;
+  alt: string;
+  type?: "skill-exchange" | "side-hustle";
+  className?: string;
+  fill?: boolean;
+  sizes?: string;
+}
+
+export default function SessionCoverImage({ src, alt, type, className = "", fill, sizes }: SessionCoverImageProps) {
+  const [error, setError] = useState(false);
+
+  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" ? "🔄" : "☕"}
+      </div>
+    );
+  }
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      fill={fill}
+      sizes={sizes}
+      className={className}
+      unoptimized
+      onError={() => setError(true)}
+    />
+  );
+}

app/components/ThemeProvider.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export default function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      enableColorScheme
+      storageKey="salon-theme"
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}

app/components/ThemeToggle.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        aria-label="切换主题"
+        className="p-2.5 rounded-lg text-stone-500 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors"
+      >
+        <span className="w-5 h-5 block" />
+      </button>
+    );
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <button
+      type="button"
+      aria-label={isDark ? "切换到日间模式" : "切换到夜间模式"}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="p-2.5 rounded-lg text-stone-500 hover:text-stone-700 hover:bg-stone-100 dark:text-stone-400 dark:hover:text-stone-200 dark:hover:bg-stone-800 transition-colors"
+    >
+      {isDark ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+        </svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-5 h-5">
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      )}
+    </button>
+  );
+}