feat: Enhance UX with animations, loaders, fixes, and doc updates

- Animations: Added global page transitions and smooth sidebar toggle
- Loaders: Implemented branded Loader component and page loading states
- Fixes: Resolved hook order violations in Maps/Dashboard; fixed Layout import
- Docs: Updated README with correct demo credentials and feature list

src/pages/Dashboard.jsx

@@ -16,9 +16,20 @@ import { RevenueByNeighborhood } from '../components/dashboard/RevenueByNeighbor
 import { GoldenLeadsScatter } from '../components/dashboard/GoldenLeadsScatter';
 import { WeatherRiskGauge } from '../components/dashboard/WeatherRiskGauge';
 
+import Loader from '../components/Loader';
+
 const Dashboard = () => {
     const { properties, meetings } = useMockStore();
     const { user } = useAuth();
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        // Simulate initial data fetch
+        const timer = setTimeout(() => setIsLoading(false), 800);
+        return () => clearTimeout(timer);
+    }, []);
+
+
 
     // --- Weather State (Lifted) ---
     const [weather, setWeather] = useState(null);
@@ -104,6 +115,8 @@ const Dashboard = () => {
         .filter(m => new Date(m.date) < today)
         .sort((a, b) => new Date(b.date) - new Date(a.date)); // Most recent first
 
+    if (isLoading) return <Loader fullScreen text="Loading Dashboard..." />;
+
     return (
         <div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white selection:bg-blue-500/30 relative pb-20 transition-colors duration-300">
 

src/pages/Landing.jsx

@@ -8,6 +8,7 @@ import { SpotlightCard } from '../components/SpotlightCard';
 import { ComparisonSlider } from '../components/ComparisonSlider';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import Logo from '../assets/images/LynkedUp_Pro_F_logo_Y.png';
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -56,10 +57,8 @@ const Landing = () => {
             <nav className="border-b border-zinc-200 dark:border-white/5 backdrop-blur-xl sticky top-0 z-40 bg-white/70 dark:bg-black/50">
                 <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
                     <div className="flex items-center space-x-2">
-                        <div className="w-8 h-8 bg-black dark:bg-white rounded-lg flex items-center justify-center shadow-lg">
-                            <Home size={16} className="text-white dark:text-black" />
-                        </div>
-                        <span className="text-xl font-bold tracking-tight">LynkedUpPro</span>
+                        <img src={Logo} alt="LynkedUp Pro" className="w-10 h-10 object-contain" />
+                        <span className="text-xl font-bold tracking-tight">LynkedUp Pro</span>
                     </div>
                     <div className="flex items-center space-x-4">
 

src/pages/Login.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { User, Briefcase, Lock, ArrowRight, AlertCircle, Home } from 'lucide-react';
 import { SpotlightCard } from '../components/SpotlightCard';
+import Logo from '../assets/images/LynkedUp_Pro_F_logo_Y.png';
 
 
 // Rainbow Button Component
@@ -114,13 +115,11 @@ const Login = () => {
                 <SpotlightCard className="bg-white/60 dark:bg-black/30 backdrop-blur-3xl border-0 ring-1 ring-black/5 dark:ring-white/5 shadow-2xl dark:shadow-2xl">
                     <div className="p-8">
                         <div className="text-center mb-10 pt-2">
-                            <div className="w-14 h-14 bg-gradient-to-br from-zinc-100 to-zinc-300 dark:from-white dark:to-zinc-400 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-xl shadow-black/5 dark:shadow-white/5 ring-1 ring-black/5 dark:ring-white/20">
-                                <Home size={28} className="text-black" />
-                            </div>
+                            <img src={Logo} alt="LynkedUp Pro" className="w-20 h-20 mx-auto mb-6 object-contain drop-shadow-2xl" />
                             <h1 className="text-3xl font-black text-zinc-900 dark:text-white mb-2 tracking-tighter">
                                 Welcome Back
                             </h1>
-                            <p className="text-zinc-500 font-medium">Sign in to your Plano Realty account</p>
+                            <p className="text-zinc-500 font-medium">Sign in to your LynkedUp Pro account</p>
                         </div>
 
                         {/* Neo-Toggle */}

src/pages/Maps.jsx

@@ -8,6 +8,7 @@ import { SpotlightCard } from '../components/SpotlightCard';
 import { useTheme } from '../context/ThemeContext';
 import { logger } from '../utils/logger';
 import { toast } from 'sonner';
+import Loader from '../components/Loader';
 
 // Fix for default Leaflet marker icons not showing up
 import L from 'leaflet';
@@ -436,6 +437,15 @@ const InputGroup = ({ label, children }) => (
 function Maps() {
     const { properties, setProperties, updatePropertyStatus } = useMockStore();
     const { user } = useAuth();
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+        // Simulate initial map load
+        const timer = setTimeout(() => setIsLoading(false), 1000);
+        return () => clearTimeout(timer);
+    }, []);
+
+
 
     // Selection State
     const [selectedPropertyId, setSelectedPropertyId] = useState(null);
@@ -592,6 +602,8 @@ function Maps() {
         }
     };
 
+    if (isLoading) return <Loader fullScreen text="Loading Territory Map..." />;
+
     return (
         <div className="w-full h-full relative bg-zinc-50 dark:bg-black overflow-hidden transition-colors duration-300" style={{ height: "calc(100vh - 0px)" }}>
             <MapView