From 6c5f8488568dfee15a1e6d70f143976beb0973d1 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sat, 20 Sep 2025 11:14:11 +0500
Subject: [PATCH] =?UTF-8?q?remove=20welcome=20banner=20after=204=20seconds?=
 =?UTF-8?q?=20with=20animation=20=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/welcome-banner.tsx | 46 ++++++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/components/welcome-banner.tsx b/components/welcome-banner.tsx
index 12ec514..fa77f78 100644
--- a/components/welcome-banner.tsx
+++ b/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>
+  );
 }