feat: add loading state and full-page loader component; update payment page and application layout to improve user experience

components/welcome-banner.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface WelcomeBannerProps {
+  firstName?: string | null;
+  lastName?: string | null;
+}
+
+export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div className="text-sm font-mono px-2 p-1 fade-out-10 bg-green-500/10 text-green-900 dark:text-green-400">
+      Welcome,{" "}
+      <span className="font-semibold">
+        {firstName} {lastName}
+      </span>
+    </div>
+  );
+}