fixd larg lines in HomePage , add cookies rather than localStorage,make canvas background Login page

app/components/home/showLoginDialog.js

@@ -0,0 +1,38 @@
+import { ShieldCheck } from "lucide-react";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+export default function ShowLoginDialog({setShowLoginDialog}) {
+    const {t}=useTranslation()
+  return (
+    <>
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4 py-8">
+        <div className="w-full max-w-md rounded-3xl bg-white p-6 shadow-2xl border border-gray-200">
+          <div className="flex items-center gap-3 mb-5">
+            <ShieldCheck className="w-7 h-7 text-amber-500" />
+            <div>
+              <h3 className="text-lg font-semibold text-gray-900">{t("loginRequired")}</h3>
+              <p className="text-sm text-gray-600">{t("loginRequiredDesc")}</p>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="rounded-2xl bg-gray-50 p-4">
+              <p className="text-sm text-gray-700">{t("loginPrompt")}</p>
+            </div>
+            <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+              <button
+                type="button"
+                onClick={() => setShowLoginDialog(false)}
+                className="w-full sm:w-auto px-5 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors"
+              >
+                {t("close")}
+              </button>
+              <Link href="/login" className="w-full sm:w-auto px-5 py-3 rounded-xl bg-amber-500 text-white font-semibold text-center hover:bg-amber-600 transition-colors">
+                {t("login")}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}