Fix hydration mismatch by wrapping sermon sections in ClientOnly

pages/index.vue

@@ -46,6 +46,7 @@
 
     <!-- Main Content -->
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
+      <ClientOnly>
         <!-- Today's Sermon -->
         <div v-if="todaysSermon">
           <h2 class="text-2xl font-semibold text-gray-900 mb-6">Today's Sermon</h2>
@@ -67,6 +68,13 @@
           <p class="text-gray-500 text-lg">No upcoming sermons available yet.</p>
         </div>
 
+        <template #fallback>
+          <div class="text-center py-12">
+            <p class="text-gray-500 text-lg">Loading sermons...</p>
+          </div>
+        </template>
+      </ClientOnly>
+
       <!-- Previous Sermons Dropdown -->
       <div v-if="previousSermons.length > 0" class="max-w-2xl mx-auto">
         <h2 class="text-2xl font-semibold text-gray-900 mb-4 text-center">Previous Sermons</h2>