'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>
+  );
+}