add: home page and top nav bar for unauthorized view

Backend/dotnet-tools.json

@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "dotnet-ef": {
+      "version": "10.0.7",
+      "commands": [
+        "dotnet-ef"
+      ],
+      "rollForward": false
+    }
+  }
+}

BlazorWebAssembly/Layout/MainLayout.razor

@@ -4,93 +4,111 @@
 @inject ThemeService ThemeService
 @inject AuthenticationStateProvider AuthStateProvider
 
-<div class="flex h-screen overflow-hidden bg-body text-main animate-fade font-sans">
-    <!-- Sidebar (Hidden on mobile) -->
-    <aside class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0 z-50 border-r border-border bg-card">
-        <div class="flex flex-col flex-grow pt-8 pb-4 overflow-y-auto">
-            <!-- Brand -->
-            <div class="flex items-center flex-shrink-0 px-6 gap-3 mb-10">
-                <div class="bg-primary rounded-xl p-2 text-white shadow-lg shadow-primary/20">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
-                </div>
-                <span class="text-xl font-black tracking-tighter uppercase">LibraryLuxe</span>
-            </div>
-
-            <!-- Navigation -->
-            <div class="flex-grow px-3">
-                <NavMenu />
-            </div>
-
-            <!-- Theme & User Mini Profile -->
-            <div class="px-6 py-6 border-t border-border">
-                <div class="mb-6">
-                    <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-4 text-center">Switch Theme</p>
-                    <ThemeSwitcher />
-                </div>
-                
-                <AuthorizeView>
-                    <Authorized>
+<AuthorizeView>
+    <Authorized>
+        <div class="flex h-screen overflow-hidden bg-body text-main animate-fade font-sans">
+            <!-- Sidebar (Dashboard View) -->
+            <aside class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0 z-50 border-r border-border bg-card">
+                <div class="flex flex-col flex-grow pt-8 pb-4 overflow-y-auto">
+                    <div class="flex items-center flex-shrink-0 px-6 gap-3 mb-10">
+                        <div class="bg-primary rounded-xl p-2 text-white shadow-lg shadow-primary/20">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
+                        </div>
+                        <span class="text-xl font-black tracking-tighter uppercase">LibraryLuxe</span>
+                    </div>
+                    <div class="flex-grow px-3">
+                        <NavMenu />
+                    </div>
+                    <div class="px-6 py-6 border-t border-border">
+                        <div class="mb-6">
+                            <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-4 text-center">Switch Theme</p>
+                            <ThemeSwitcher />
+                        </div>
                         <div class="flex items-center gap-3 p-3 bg-body rounded-2xl border border-border">
                             <div class="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white font-bold shadow-sm">
-                                @context.User.Identity?.Name?[..1].ToUpper()
+                                @(context.User.Identity?.Name?.Length > 0 ? context.User.Identity.Name[..1].ToUpper() : "?")
                             </div>
                             <div class="flex flex-col min-w-0">
                                 <span class="text-xs font-bold truncate">@context.User.Identity?.Name</span>
                                 <span class="text-[10px] text-muted font-medium uppercase tracking-wider">Member</span>
                             </div>
                         </div>
-                    </Authorized>
-                    <NotAuthorized>
-                         <div class="flex items-center gap-3 p-3 bg-body rounded-2xl border border-border">
-                            <div class="h-10 w-10 rounded-xl bg-muted/20 flex items-center justify-center text-muted font-bold">
-                                G
-                            </div>
-                            <div class="flex flex-col">
-                                <span class="text-xs font-bold text-muted">Guest User</span>
-                                <a href="login" class="text-[10px] text-primary font-black uppercase tracking-wider hover:underline">Sign In</a>
-                            </div>
-                        </div>
-                    </NotAuthorized>
-                </AuthorizeView>
-            </div>
-        </div>
-    </aside>
-
-    <!-- Main Content Wrapper -->
-    <div class="lg:pl-64 flex flex-col flex-1 w-0">
-        <!-- Topbar -->
-        <header class="h-20 bg-card/80 backdrop-blur-md border-b border-border sticky top-0 z-40 flex items-center justify-between px-8">
-            <div class="flex-grow max-w-lg">
-                <div class="relative">
-                    <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
-                    <input type="text" placeholder="Quick search..." class="w-full bg-body border border-border rounded-xl pl-12 pr-4 py-2.5 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all shadow-sm" />
+                    </div>
                 </div>
-            </div>
+            </aside>
 
-            <div class="flex items-center gap-6">
-                <AuthorizeView>
-                    <Authorized>
+            <div class="lg:pl-64 flex flex-col flex-1 w-0">
+                <header class="h-20 bg-card/80 backdrop-blur-md border-b border-border sticky top-0 z-40 flex items-center justify-between px-8">
+                    <div class="flex-grow max-w-lg">
+                        <div class="relative">
+                            <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                            <input type="text" placeholder="Quick search..." class="w-full bg-body border border-border rounded-xl pl-12 pr-4 py-2.5 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all shadow-sm" />
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-6">
                         <button class="relative text-muted hover:text-primary transition-colors">
                             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                             <span class="absolute top-0 right-0 w-2 h-2 bg-primary rounded-full border-2 border-card"></span>
                         </button>
                         <a href="/logout" class="text-xs font-black uppercase tracking-widest text-muted hover:text-red-500 transition-colors">Logout</a>
-                    </Authorized>
-                    <NotAuthorized>
-                        <a href="/login" class="bg-primary text-white px-6 py-2 rounded-xl text-xs font-black uppercase tracking-widest hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Sign In</a>
-                    </NotAuthorized>
-                </AuthorizeView>
+                    </div>
+                </header>
+                <main class="flex-1 overflow-y-auto p-8 scrollbar-hide">
+                    <div class="max-w-6xl mx-auto">
+                        @Body
+                    </div>
+                </main>
             </div>
-        </header>
-
-        <!-- Main Content Section -->
-        <main class="flex-1 overflow-y-auto p-8 scrollbar-hide">
-            <div class="max-w-6xl mx-auto">
+        </div>
+    </Authorized>
+    <NotAuthorized>
+        <div class="min-h-screen bg-body text-main animate-fade font-sans flex flex-col">
+            <!-- Top Navbar (Guest View) -->
+            <nav class="h-20 bg-card/80 backdrop-blur-md border-b border-border sticky top-0 z-50 px-8 flex items-center justify-between shadow-sm">
+                <div class="flex items-center gap-10">
+                    <a href="/" class="flex items-center gap-3 group">
+                        <div class="bg-primary rounded-xl p-2 text-white shadow-lg shadow-primary/20 group-hover:scale-110 transition-transform">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
+                        </div>
+                        <span class="text-xl font-black tracking-tighter uppercase">LibraryLuxe</span>
+                    </a>
+                    <div class="hidden md:flex items-center gap-8">
+                        <NavLink href="/" Match="NavLinkMatch.All" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Home</NavLink>
+                        <NavLink href="/books" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Books</NavLink>
+                        <NavLink href="/about" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">About Us</NavLink>
+                        <NavLink href="/contact" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Contact</NavLink>
+                    </div>
+                </div>
+                <div class="flex items-center gap-6">
+                    <ThemeSwitcher />
+                    <div class="h-6 w-px bg-border hidden sm:block"></div>
+                    <div class="flex items-center gap-4">
+                        <a href="/login" class="text-xs font-black uppercase tracking-widest text-muted hover:text-primary transition-colors">Sign In</a>
+                        <a href="/register" class="bg-primary text-white px-6 py-2.5 rounded-xl text-xs font-black uppercase tracking-widest hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all transform hover:scale-105">Get Started</a>
+                    </div>
+                </div>
+            </nav>
+            <main class="flex-grow">
                 @Body
-            </div>
-        </main>
-    </div>
-</div>
+            </main>
+            <footer class="py-12 border-t border-border bg-card">
+                <div class="max-w-6xl mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-8">
+                    <div class="flex items-center gap-3 opacity-50 grayscale">
+                        <div class="bg-main rounded-lg p-1.5 text-bg-body">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
+                        </div>
+                        <span class="text-sm font-black tracking-tighter uppercase">LibraryLuxe</span>
+                    </div>
+                    <p class="text-[10px] font-bold text-muted uppercase tracking-[0.2em]">&copy; 2026 LibraryLuxe Ecosystem. All rights reserved.</p>
+                    <div class="flex gap-6">
+                        <a href="#" class="text-[10px] font-black uppercase tracking-widest text-muted hover:text-primary">Privacy</a>
+                        <a href="#" class="text-[10px] font-black uppercase tracking-widest text-muted hover:text-primary">Terms</a>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    </NotAuthorized>
+</AuthorizeView>
 
 @code {
     protected override async Task OnInitializedAsync()

BlazorWebAssembly/Layout/NavMenu.razor

@@ -4,36 +4,36 @@
         Dashboard
     </NavLink>
     
-    <NavLink class="nav-link-v" href="books">
+    <NavLink class="nav-link-v" href="/books">
         <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
         Books Catalog
     </NavLink>
 
     <AuthorizeView Roles="Member">
-        <NavLink class="nav-link-v" href="borrowings">
+        <NavLink class="nav-link-v" href="/borrowings">
             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
             My Loans
         </NavLink>
-        <NavLink class="nav-link-v" href="rewards">
+        <NavLink class="nav-link-v" href="/rewards">
             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
             Rewards
         </NavLink>
-        <NavLink class="nav-link-v" href="membership">
+        <NavLink class="nav-link-v" href="/membership">
             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
             Plans
         </NavLink>
-        <NavLink class="nav-link-v" href="wishlist">
+        <NavLink class="nav-link-v" href="/wishlist">
             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
             Wishlist
         </NavLink>
     </AuthorizeView>
 
     <AuthorizeView Roles="Librarian">
-        <NavLink class="nav-link-v" href="user-insights">
+        <NavLink class="nav-link-v" href="/user-insights">
             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
             Insights
         </NavLink>
-        <NavLink class="nav-link-v" href="members">
+        <NavLink class="nav-link-v" href="/members">
             <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
             Members
         </NavLink>

BlazorWebAssembly/Layout/ThemeSwitcher.razor

@@ -15,7 +15,7 @@
     <button @onclick='() => SetTheme("emerald")' 
             class='w-9 h-9 rounded-xl flex items-center justify-center transition-all @(CurrentTheme == "emerald" ? "bg-card text-primary shadow-sm shadow-primary/10" : "text-muted hover:text-primary")'
             title="Emerald Mode">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 2c-3.144 0-10.231 2.37-13.435 5.759a11.13 11.13 0 0 0-2.457 4.22c-1.343 3.51-.557 6.455 1.574 8.586m14.318-18.565C21 5.144 18.63 12.23 15.241 15.435a11.13 11.13 0 0 1-4.22 2.457c-3.51 1.343-6.455.557-8.586-1.574m18.565-14.318L2 22"></path></svg>
     </button>
 </div>
 

BlazorWebAssembly/Pages/About.razor

@@ -0,0 +1,24 @@
+@page "/about"
+
+<div class="max-w-4xl mx-auto py-24 px-8 animate-fade">
+    <div class="text-center mb-16">
+        <h1 class="text-6xl font-black tracking-tighter text-main mb-6 uppercase">Our Story</h1>
+        <p class="text-xl text-muted leading-relaxed">Redefining the relationship between readers and literature through technology and community.</p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
+        <div class="space-y-8">
+            <h2 class="text-3xl font-black text-main tracking-tight">A Library without Borders.</h2>
+            <p class="text-muted leading-relaxed">Founded in 2024, LibraryLuxe was born from a simple idea: that books should be accessible, organized, and rewarding. We've built a system that doesn't just manage inventory, but fosters a culture of reading.</p>
+            <div class="flex gap-4">
+                <div class="w-px h-12 bg-primary"></div>
+                <p class="italic text-main font-medium">"Reading is the ultimate superpower. We just provide the cape."</p>
+            </div>
+        </div>
+        <div class="bg-card aspect-square rounded-[3rem] border border-border shadow-2xl flex items-center justify-center p-12">
+            <div class="w-full h-full rounded-2xl bg-primary/5 border border-primary/20 flex items-center justify-center">
+                <svg class="w-24 h-24 text-primary opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+            </div>
+        </div>
+    </div>
+</div>

BlazorWebAssembly/Pages/Borrowings.razor

@@ -13,9 +13,9 @@
                 Keep track of your reading journey and manage your active borrowings.
             </p>
         </div>
-        <button @onclick='() => Navigation.NavigateTo("books")' class="hidden md:block bg-body text-main border border-border px-8 py-3 rounded-xl font-bold hover:bg-card transition-all">
+        <a href="/books" class="hidden md:block bg-body text-main border border-border px-8 py-3 rounded-xl font-bold hover:bg-card transition-all text-center">
             Browse More
-        </button>
+        </a>
     </div>
 
     @if (_isLoading)
@@ -32,9 +32,9 @@
         <div class="text-center py-24 bg-card rounded-[2.5rem] border border-dashed border-border shadow-sm">
             <h3 class="text-2xl font-bold text-main mb-3">No active loans</h3>
             <p class="text-muted mb-8">You haven't borrowed any books yet. Explore our collection to get started.</p>
-            <button @onclick='() => Navigation.NavigateTo("books")' class="bg-primary text-white px-10 py-4 rounded-xl font-black hover:bg-primary-hover transition-all shadow-lg shadow-primary/20">
+            <a href="/books" class="bg-primary text-white px-10 py-4 rounded-xl font-black hover:bg-primary-hover transition-all shadow-lg shadow-primary/20 inline-block text-center">
                 Go to Catalog
-            </button>
+            </a>
         </div>
     }
     else

BlazorWebAssembly/Pages/Contact.razor

@@ -0,0 +1,49 @@
+@page "/contact"
+
+<div class="max-w-6xl mx-auto py-24 px-8 animate-fade">
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-24">
+        <div>
+            <h1 class="text-6xl font-black tracking-tighter text-main mb-8 uppercase">Get in <br /><span class="text-primary italic">Touch.</span></h1>
+            <p class="text-xl text-muted leading-relaxed mb-12">Have questions about our membership plans or need help with your account? Our librarians are here to help.</p>
+            
+            <div class="space-y-8">
+                <div class="flex items-center gap-6">
+                    <div class="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
+                    </div>
+                    <div>
+                        <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-1">Email Us</p>
+                        <p class="text-lg font-bold text-main">hello@libraryluxe.com</p>
+                    </div>
+                </div>
+                <div class="flex items-center gap-6">
+                    <div class="w-14 h-14 bg-primary/10 rounded-2xl flex items-center justify-center text-primary">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+                    </div>
+                    <div>
+                        <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-1">Visit Us</p>
+                        <p class="text-lg font-bold text-main">123 Literature Lane, Booktown</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-card p-10 rounded-[3rem] border border-border shadow-2xl">
+            <form class="space-y-6">
+                <div>
+                    <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Your Name</label>
+                    <input type="text" class="w-full bg-body border border-border rounded-xl px-4 py-4 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="John Doe" />
+                </div>
+                <div>
+                    <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Email Address</label>
+                    <input type="email" class="w-full bg-body border border-border rounded-xl px-4 py-4 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="name@example.com" />
+                </div>
+                <div>
+                    <label class="block text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-3">Message</label>
+                    <textarea rows="4" class="w-full bg-body border border-border rounded-xl px-4 py-4 focus:ring-2 focus:ring-primary outline-none transition-all" placeholder="How can we help?"></textarea>
+                </div>
+                <button type="button" class="w-full py-5 bg-primary text-white rounded-xl font-black uppercase tracking-widest hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Send Message</button>
+            </form>
+        </div>
+    </div>
+</div>

BlazorWebAssembly/Pages/Home.razor

@@ -44,7 +44,7 @@
                     <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Membership</p>
                     <h3 class="text-2xl font-black text-main mb-1 uppercase">Premium Gold</h3>
                     <p class="text-xs text-muted mb-6">Active Status</p>
-                    <button @onclick='() => Navigation.NavigateTo("membership")' class="text-xs font-black text-primary uppercase tracking-widest hover:underline">Manage Plan</button>
+                    <a href="/membership" class="text-xs font-black text-primary uppercase tracking-widest hover:underline">Manage Plan</a>
                 </div>
             </div>
 
@@ -59,7 +59,6 @@
             </section>
         </div>
     </Authorized>
-
     <NotAuthorized>
         <!-- Guest Landing Page -->
         <div class="space-y-24 animate-fade py-12">
@@ -72,12 +71,12 @@
                     Join over 5,000 readers in a digital-first library experience. Access a global collection of literature, earn rewards for reading, and connect with fellow book lovers.
                 </p>
                 <div class="flex items-center justify-center gap-6">
-                    <button @onclick='() => Navigation.NavigateTo("register")' class="bg-primary text-white px-10 py-5 rounded-2xl font-black text-lg hover:bg-primary-hover shadow-xl shadow-primary/20 transition-all transform hover:scale-105">
+                    <a href="/register" class="bg-primary text-white px-10 py-5 rounded-2xl font-black text-lg hover:bg-primary-hover shadow-xl shadow-primary/20 transition-all transform hover:scale-105 inline-block text-center">
                         Start Reading Now
-                    </button>
-                    <button @onclick='() => Navigation.NavigateTo("books")' class="bg-card border border-border text-main px-10 py-5 rounded-2xl font-black text-lg hover:bg-body transition-all">
+                    </a>
+                    <a href="/books" class="bg-card border border-border text-main px-10 py-5 rounded-2xl font-black text-lg hover:bg-body transition-all inline-block text-center">
                         Explore Catalog
-                    </button>
+                    </a>
                 </div>
             </section>
 
@@ -131,6 +130,7 @@
     </NotAuthorized>
 </AuthorizeView>
 
+
 @code {
     private LoyaltyAccountDto? _loyaltyAccount;
 

BlazorWebAssembly/Pages/Login.razor

@@ -59,7 +59,7 @@
         <!-- Footer -->
         <p class="text-center mt-10 text-muted font-medium">
             Don't have an account? 
-            <button @onclick='() => Navigation.NavigateTo("register")' class="text-primary font-bold hover:underline">Create Account</button>
+            <a href="/register" class="text-primary font-bold hover:underline">Create Account</a>
         </p>
     </div>
 </div>

BlazorWebAssembly/Pages/Logout.razor

@@ -0,0 +1,24 @@
+@page "/logout"
+@using BlazorWebAssembly.Services
+@inject AuthService AuthService
+@inject NavigationManager Navigation
+
+<div class="min-h-[60vh] flex items-center justify-center p-8">
+    <div class="text-center">
+        <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mx-auto mb-6">
+            <div class="w-6 h-6 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+        </div>
+        <h2 class="text-2xl font-black text-main mb-2">Signing Out</h2>
+        <p class="text-muted font-medium">Please wait while we secure your session...</p>
+    </div>
+</div>
+
+@code {
+    protected override async Task OnInitializedAsync()
+    {
+        await AuthService.Logout();
+        // Brief delay for UX/Smoothness
+        await Task.Delay(800);
+        Navigation.NavigateTo("/login");
+    }
+}

BlazorWebAssembly/Pages/Register.razor

@@ -72,7 +72,7 @@
         <!-- Footer -->
         <p class="text-center mt-10 text-muted font-medium">
             Already have an account? 
-            <button @onclick='() => Navigation.NavigateTo("login")' class="text-primary font-bold hover:underline">Sign In</button>
+            <a href="/login" class="text-primary font-bold hover:underline">Sign In</a>
         </p>
     </div>
 </div>

BlazorWebAssembly/Pages/Wishlist.razor

@@ -27,9 +27,9 @@
         <div class="text-center py-24 bg-card rounded-[2.5rem] border border-dashed border-border">
             <h3 class="text-2xl font-bold text-main mb-4">Your wishlist is empty</h3>
             <p class="text-muted mb-8">Found a book that's currently borrowed? Add it to your wishlist!</p>
-            <button @onclick='() => Navigation.NavigateTo("books")' class="bg-primary text-white px-10 py-4 rounded-xl font-black hover:bg-primary-hover transition-all shadow-lg shadow-primary/20">
-                Browse Books
-            </button>
+            <a href="/books" class="bg-primary text-white px-10 py-4 rounded-xl font-black hover:bg-primary-hover transition-all shadow-lg shadow-primary/20 inline-block text-center">
+                Go to Catalog
+            </a>
         </div>
     }
     else