remove welcome banner after 4 seconds with animation ✨

components/welcome-banner.tsx

@@ -1,21 +1,39 @@
 "use client";
 
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
 interface WelcomeBannerProps {
-	firstName?: string | null;
-	lastName?: string | null;
+  firstName?: string | null;
+  lastName?: string | null;
 }
 
 export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
-	return (
-		<div
-			className={
-				"text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"
-			}
-		>
-			Welcome,{" "}
-			<span className="font-semibold">
-				{firstName} {lastName}
-			</span>
-		</div>
-	);
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+    }, 4000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          className="text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          Welcome,{" "}
+          <p className="font-semibold motion-preset-slide-down inline-block motion-delay-200">
+            {firstName} {lastName}
+          </p>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
 }