Use HTML swap to display success and error messages

templates/home.html

@@ -74,11 +74,14 @@
       <div class="max-w-2xl mx-auto text-center">
         <h2 class="text-2xl font-bold text-gray-900 mb-4">Stay updated</h2>
         <p class="text-gray-600 mb-6">Subscribe to our newsletter to get the latest updates.</p>
-        <form action="/subscriptions" method="post" class="max-w-md mx-auto">
+        <form hx-post="/subscriptions"
+              hx-target="#subscribe-messages"
+              hx-swap="innerHTML"
+              class="max-w-md mx-auto">
           <div class="flex flex-col sm:flex-row gap-3">
             <input type="email"
                    name="email"
-                   placeholder="Enter your email address"
+                   placeholder="you@example.com"
                    required
                    class="flex-1 px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
             <button type="submit"
@@ -86,8 +89,8 @@
               Subscribe
             </button>
           </div>
+          <div id="subscribe-messages" class="mt-4"></div>
         </form>
-        <div class="mt-4">{{ message }}</div>
       </div>
     </div>
     <div class="mt-8 bg-gray-50 rounded-lg p-6">