Fix favicon location and hydration mismatch by moving logos to public directory and wrapping auth UI in ClientOnly

pages/index.vue

@@ -8,27 +8,29 @@
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
           </div>
           <div class="flex items-center gap-4">
-            <template v-if="isAuthenticated">
+            <ClientOnly>
+              <template v-if="isAuthenticated">
+                <NuxtLink 
+                  to="/admin" 
+                  class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm"
+                >
+                  Create New Sermon
+                </NuxtLink>
+                <button
+                  @click="handleLogout"
+                  class="text-sm font-medium text-red-600 hover:text-red-700"
+                >
+                  Logout
+                </button>
+              </template>
               <NuxtLink 
-                to="/admin" 
+                v-else
-                class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm"
+                to="/login" 
+                class="text-sm font-medium text-blue-600 hover:text-blue-700"
               >
-                Create New Sermon
+                Admin Login
               </NuxtLink>
-              <button
+            </ClientOnly>
-                @click="handleLogout"
-                class="text-sm font-medium text-red-600 hover:text-red-700"
-              >
-                Logout
-              </button>
-            </template>
-            <NuxtLink 
-              v-else
-              to="/login" 
-              class="text-sm font-medium text-blue-600 hover:text-blue-700"
-            >
-              Admin Login
-            </NuxtLink>
           </div>
         </div>
         <div class="text-center mt-6">