feat: Enhance UI/UX of form components in admin page

pages/admin.vue

@@ -25,7 +25,7 @@
       </div>
     </header>
 
-    <UContainer class="py-8 max-w-3xl">
+    <UContainer class="py-8 max-w-xl">
       <UCard>
         <template #header>
           <h2 class="text-xl font-semibold">Sermon Details</h2>
@@ -46,8 +46,10 @@
               <UFormGroup label="Sermon Date" name="date" required>
                 <UInput
                   v-model="form.date"
+                  icon="i-heroicons-calendar-days-20-solid"
                   type="date"
                   :disabled="loading"
+                  variant="outline"
                 />
               </UFormGroup>
             </div>
@@ -57,10 +59,13 @@
                 :value="form.title && form.date ? generateSlug(form.title, form.date) : 'Enter title and date to see URL'"
                 :disabled="loading"
                 readonly
+                variant="outline"
               />
             </UFormGroup>
           </div>
 
+          <UDivider />
+
           <!-- Bible References -->
           <UFormGroup label="Bible References" name="bibleReferences">
             <div
@@ -73,6 +78,7 @@
                 :placeholder="`Bible reference ${index + 1}`"
                 :disabled="loading"
                 class="flex-1"
+                variant="outline"
               />
               <UButton
                 @click="removeBibleReference(index)"
@@ -96,6 +102,8 @@
             </UButton>
           </UFormGroup>
 
+          <UDivider />
+
           <!-- Personal Application -->
           <UFormGroup label="Personal Application" name="personalApplication">
             <UTextarea
@@ -103,9 +111,12 @@
               :rows="4"
               placeholder="Describe how this sermon applies to daily life..."
               :disabled="loading"
+              variant="outline"
             />
           </UFormGroup>
 
+          <UDivider />
+
           <!-- Pastor's Challenge -->
           <UFormGroup label="Pastor's Challenge" name="pastorChallenge">
             <UTextarea
@@ -113,6 +124,7 @@
               :rows="4"
               placeholder="What challenge does the pastor give to the congregation?"
               :disabled="loading"
+              variant="outline"
             />
           </UFormGroup>