test: Restore basic structure of admin.vue template

pages/admin.vue

@@ -1,6 +1,45 @@
 <template>
-  <div>
-    Hello World
+  <div class="min-h-screen bg-gray-100">
+    <!-- Header -->
+    <header class="bg-white shadow-sm border-b py-2 px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center">
+        <div class="flex items-center space-x-4">
+          <img src="/logos/logo.png" alt="New Life Christian Church" class="h-10" />
+          <UButton
+            @click="navigateTo('/')"
+            variant="ghost"
+            color="gray"
+            icon="i-heroicons-arrow-left"
+          >
+            Back to Sermons
+          </UButton>
+          <h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
+        </div>
+        <UButton
+          @click="handleLogout"
+          variant="outline"
+          color="gray"
+        >
+          Logout
+        </UButton>
+      </div>
+    </header>
+
+    <UContainer class="py-8">
+      <UCard>
+        <template #header>
+          <h2 class="text-xl font-semibold">Sermon Details</h2>
+        </template>
+
+        <!-- Form content will go here -->
+
+      </UCard>
+
+      <!-- Success Message -->
+      <div v-if="successMessage" class="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
+        <p class="text-green-800">{{ successMessage }}</p>
+      </div>
+    </UContainer>
   </div>
 </template>