gif tooltips for 2d and 3d

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -43,11 +43,17 @@ const appMenuTabs: MenuIconItem[] = [
     id: "2D",
     label: "2D Canvas",
     icon: <FontAwesomeIcon icon={faPaintbrush} />,
+    imageSrc: "/resources/gifs/artcraft-canvas-demo.gif",
+    description: "Easy edits. Great for graphic design.",
+    large: true,
   },
   {
     id: "3D",
     label: "3D Editor",
     icon: <FontAwesomeIcon icon={faCube} />,
+    imageSrc: "/resources/gifs/artcraft-3d-demo.gif",
+    description: "Precision control. Great for AI film.",
+    large: true,
   },
   {
     id: "IMAGE",

frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx

@@ -6,6 +6,9 @@ export interface MenuIconItem {
   id: string;
   label: string;
   icon: React.ReactNode;
+  imageSrc?: string;
+  description?: string;
+  large?: boolean;
 }
 
 interface MenuIconSelectorProps {
@@ -114,7 +117,12 @@ export const MenuIconSelector: React.FC<MenuIconSelectorProps> = ({
             position="bottom"
             delay={100}
             closeOnClick={true}
-            className="font-medium"
+            className={twMerge(
+              "text-sm font-semibold",
+              item.large && "text-md"
+            )}
+            imageSrc={item.imageSrc || undefined}
+            description={item.description || undefined}
           >
             <button
               ref={(el) => {

frontend/libs/components/tooltip/src/lib/tooltip.tsx

@@ -9,6 +9,8 @@ interface TooltipProps {
   className?: string;
   delay?: number;
   closeOnClick?: boolean;
+  imageSrc?: string;
+  description?: string;
 }
 
 export const Tooltip = ({
@@ -18,6 +20,8 @@ export const Tooltip = ({
   className,
   delay = 300,
   closeOnClick = false,
+  imageSrc,
+  description,
 }: TooltipProps) => {
   const [isShowing, setIsShowing] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -142,7 +146,19 @@ export const Tooltip = ({
             className ? className : ""
           )}
         >
-          {content}
+          <div className="flex flex-col gap-1">
+            {content}
+            {imageSrc && (
+              <img
+                src={imageSrc}
+                alt="tooltip"
+                className="mb-1 max-h-40 w-auto rounded-md"
+              />
+            )}
+            {description && (
+              <p className="text-sm text-white font-normal">{description}</p>
+            )}
+          </div>
         </div>
       </Transition>
     </div>