Update code

components/ui/LogoutButton.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { LogOut } from "lucide-react";
+import { signOut } from "next-auth/react";
+
+export default function LogOutButton() {
+  return (
+    <motion.button
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.97 }}
+      onClick={() => signOut()}
+      className="cursor-pointer group inline-flex items-center gap-2 px-6 py-3 rounded-xl text-base font-medium
+      text-white bg-gradient-to-r from-red-600 to-red-500 shadow-lg shadow-red-500/30
+      hover:shadow-red-500/50 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-400/60"
+    >
+      <LogOut
+        size={20}
+        className="text-red-200 group-hover:-rotate-90 transition-transform duration-300"
+      />
+      <span>LogOut</span>
+    </motion.button>
+  );
+}

components/ui/ToasterProvider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Toaster } from "react-hot-toast";
+
+export default function ToasterProvider() {
+  return (
+    <Toaster
+      position="top-right"
+      toastOptions={{
+        style: {
+          background: "#11131c",
+          color: "#fff",
+          border: "1px solid #2a2f3a",
+        },
+        success: {
+          iconTheme: {
+            primary: "#22c55e", // green
+            secondary: "#11131c",
+          },
+        },
+        error: {
+          iconTheme: {
+            primary: "#ef4444", // red
+            secondary: "#11131c",
+          },
+        },
+      }}
+    />
+  );
+}