From 7b523b2ffae6222d34518dd2ea4d9cfaa36b3b25 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Sun, 26 Apr 2026 23:09:28 +0300
Subject: [PATCH] Bob AI: Add a social proof element, such as a row of people
 avatars

---
 src/components/ui/AvatarGroup.tsx | 39 +++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/ui/AvatarGroup.tsx

diff --git a/src/components/ui/AvatarGroup.tsx b/src/components/ui/AvatarGroup.tsx
new file mode 100644
index 0000000..3ba48ee
--- /dev/null
+++ b/src/components/ui/AvatarGroup.tsx
@@ -0,0 +1,39 @@
+import { cls } from "@/lib/utils";
+import ImageOrVideo from "./ImageOrVideo";
+
+interface Avatar {
+  src: string;
+  alt: string;
+}
+
+interface AvatarGroupProps {
+  avatars: Avatar[];
+  totalCount: number;
+  className?: string;
+}
+
+const AvatarGroup = ({ avatars, totalCount, className = "" }: AvatarGroupProps) => {
+  const remainingCount = totalCount - avatars.length;
+
+  return (
+    <div className={cls("flex items-center gap-3", className)}>
+      <div className="flex -space-x-2">
+        {avatars.map((avatar, index) => (
+          <div key={index} className="w-10 h-10 rounded-full border-2 border-background overflow-hidden shrink-0 relative">
+             <ImageOrVideo imageSrc={avatar.src} alt={avatar.alt} className="w-full h-full object-cover" />
+          </div>
+        ))}
+        {remainingCount > 0 && (
+          <div className="flex items-center justify-center w-10 h-10 rounded-full bg-accent text-sm font-medium text-foreground border-2 border-background shrink-0 relative z-10">
+            +{remainingCount > 999 ? `${Math.floor(remainingCount / 1000)}k` : remainingCount}
+          </div>
+        )}
+      </div>
+      <span className="text-sm font-medium text-foreground">
+        Join {totalCount.toLocaleString()}+ happy users
+      </span>
+    </div>
+  );
+};
+
+export default AvatarGroup;
\ No newline at end of file
-- 
2.49.1