'style4'

app/components/AvatarStack.tsx

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