✨feature: Move prompt to details element and notes to description

src/components/PromptCard.astro

@@ -23,7 +23,7 @@ const formatDate = (dateStr: string | undefined) => {
 };
 ---
 
-<div class="border rounded p-4 bg-gray-400 text-gray-800 shadow-sm flex flex-col gap-2 min-h-[12rem]">
+<div class="border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem]">
   <div class="flex items-center justify-between">
     <h3 class="text-lg font-semibold">{title}</h3>
     <span class={`text-xs font-medium px-2 py-1 rounded ${
@@ -33,19 +33,21 @@ const formatDate = (dateStr: string | undefined) => {
     </span>
   </div>
 
-  <p class="text-sm text-gray-700">{description}</p>
+  <p class="text-sm">{notes}</p>
 
   <div class="flex flex-wrap gap-2 mt-2">
     {tags.map((tag: string) => (
-      <span class="text-xs bg-gray-200 text-gray-800 px-2 py-0.5 rounded">{tag}</span>
+      <span class="text-xs bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">{tag}</span>
     ))}
   </div>
 
   <details name="prompt-details">
     <summary class="cursor-pointer font-semibold mt-2">View Details</summary>
-    <div class="text-sm text-gray-800 border-t mt-2 pt-2">
+    <div class="text-md border-t mt-2 pt-2">
-      <p><strong>Created:</strong> {formatDate(created_at)} &bull; <strong>Updated:</strong> {formatDate(updated_at)}</p>
+      <h3 class="text-lg font-semibold">Prompt</h3>
-      <p class="mt-2">📝 {notes}</p>
+      <p class="my-2">{description}</p>
+      <hr class="my-2" />
+      <p class="text-sm"><strong>Created:</strong> {formatDate(created_at)} &bull; <strong>Updated:</strong> {formatDate(updated_at)}</p>
     </div>
   </details>
 </div>