Reorganize QR code modal: show title and date above QR code for better clarity

components/QRCodeModal.vue

@@ -14,10 +14,13 @@
       </div>
       
       <div class="flex flex-col items-center">
+        <div class="text-center mb-4">
+          <h4 class="text-lg font-semibold text-gray-900 mb-1">{{ sermon.title }}</h4>
+          <p class="text-sm text-gray-600">{{ formatDate(sermon.date) }}</p>
+        </div>
         <div class="bg-white p-4 rounded-lg border-2 border-gray-200">
           <canvas ref="qrCanvas"></canvas>
         </div>
-        <p class="mt-4 text-sm text-gray-600 text-center">{{ sermon.title }}</p>
       </div>
     </div>
   </div>
@@ -47,6 +50,15 @@ defineEmits<{
 const qrCanvas = ref<HTMLCanvasElement | null>(null)
 const config = useRuntimeConfig()
 
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: '2-digit', 
+    day: '2-digit' 
+  })
+}
+
 onMounted(async () => {
   if (qrCanvas.value) {
     const url = `${config.public.siteUrl}/${props.sermon.slug}`