+
+
+
+
- {PRESENTATION.hero.title}
{PRESENTATION.hero.description}
-
+
+
-
-
- - - {formatNumber(waitlistCount)}{" "} - - people have joined the waitlist for beta -
+
+
-
+
+
+ + {formatNumber(waitlistCount)}{" "} + + people have joined the waitlist for beta +
+
+
+
+ {React.Children.map(children, (child, index) => (
+
+ {child}
+
+ ))}
+
+ );
+}
+
+export { AnimatedGroup };
+
diff --git a/src/components/ui/avatar-group.tsx b/src/components/ui/avatar-group.tsx
new file mode 100644
index 0000000..b7d0be2
--- /dev/null
+++ b/src/components/ui/avatar-group.tsx
@@ -0,0 +1,149 @@
+"use client";
+import Image from "next/image";
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+interface AvatarItem {
+ id: number;
+ name: string;
+ designation: string;
+ image: string;
+}
+
+interface AvatarGroupProps {
+ items: AvatarItem[];
+ className?: string;
+ maxVisible?: number;
+ size?: "sm" | "md" | "lg";
+}
+
+// Individual Avatar Component
+const Avatar = ({
+ item,
+ index,
+ totalItems,
+ size,
+ isHovered,
+ onHover,
+ onLeave,
+}: {
+ item: AvatarItem;
+ index: number;
+ totalItems: number;
+ size: "sm" | "md" | "lg";
+ isHovered: boolean;
+ onHover: () => void;
+ onLeave: () => void;
+}) => {
+ const sizeClasses = {
+ sm: "h-8 w-8",
+ md: "h-10 w-10",
+ lg: "h-12 w-12",
+ };
+
+ return (
+ (null);
+
+ const visibleItems = items.slice(0, maxVisible);
+ const remainingCount = items.length - maxVisible;
+
+ return (
+
+
+ {isHovered && (
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+const AvatarGroup = ({
+ items,
+ className,
+ maxVisible = 5,
+ size = "md",
+}: AvatarGroupProps) => {
+ const [hoveredIndex, setHoveredIndex] = useState
+ {item.name}
+
+
+ {item.designation}
+
+
+ {visibleItems.map((item, index) => (
+ setHoveredIndex(item.id)}
+ onLeave={() => setHoveredIndex(null)}
+ />
+ ))}
+
+ {remainingCount > 0 && (
+
+ +{remainingCount}
+
+ )}
+
+ );
+};
+
+export default AvatarGroup;