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

app/loading.js

@@ -1,17 +1,33 @@
-'use client';
+"use client";
 
-import { motion } from 'framer-motion';
+import { motion } from "framer-motion";
 
 export default function Loading() {
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        className="text-center"
-      >
-        <div className="w-16 h-16 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-        <p className="text-gray-500 text-lg">جاري التحميل...</p>
+    <div className="min-h-screen flex items-center justify-center p-4" style={{ backgroundColor: "#08172f" }}>
+      <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1.3 }} transition={{ duration: 0.4 }} className="text-center flex flex-col items-center justify-center gap-4">
+        <motion.div
+          animate={{
+            scale: [1, 1.06, 1],
+            opacity: [0.8, 1, 0.8],
+          }}
+          transition={{
+            duration: 2,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+          className="relative w-36 h-36 flex items-center justify-center"
+        >
+          <svg viewBox="0 0 100 100" className="w-full h-full fill-amber-500/10 stroke-amber-500 stroke-[3] drop-shadow-[0_0_12px_rgba(245,158,11,0.2)]" xmlns="http://www.w3.org/2000/svg">
+            <polygon points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5" />
+          </svg>
+
+          <div className="absolute inset-0 flex items-center justify-center p-2 text-center">
+            <span className="text-amber-400 font-bold text-sm tracking-wide select-none">Sweet Home</span>
+          </div>
+        </motion.div>
+
+        <p className="text-amber-400 text-sm font-bold tracking-wide animate-pulse">... جاري التحميل</p>
       </motion.div>
     </div>
   );