Made the feedback a bit cleaner for the form

src/components/sections/ContactSection.vue

@@ -17,8 +17,10 @@ const budget = ref("");
 const message = ref("");
 const status = ref<"idle" | "sending" | "success" | "error">("idle");
 const errorMessage = ref("");
+let timeoutId: ReturnType<typeof setTimeout>;
 
 const handleSubmit = async (e: Event) => {
+    if (timeoutId) clearTimeout(timeoutId);
     status.value = "sending";
     errorMessage.value = "";
 
@@ -55,12 +57,13 @@ ${message.value}`,
         service.value = "";
         budget.value = "";
         message.value = "";
-        setTimeout(() => (status.value = "idle"), 3000);
+        timeoutId = setTimeout(() => (status.value = "idle"), 2000);
     } catch (error) {
         status.value = "error";
         errorMessage.value =
             error instanceof Error ? error.message : "Failed to send message";
         console.error("Submission error:", error);
+        timeoutId = setTimeout(() => (status.value = "idle"), 2000);
     }
 };
 </script>
@@ -227,34 +230,17 @@ ${message.value}`,
                         />
                     </fieldset>
 
-                    <div
-                        v-if="status === 'error'"
-                        role="alert"
-                        class="alert alert-error"
-                    >
-                        <XCircleIcon class="stroke-current shrink-0 h-5 w-5" />
-                        <span class="text-sm">
-                            {{ errorMessage || siteConfig.contact.form.error }}
-                        </span>
-                    </div>
-
-                    <div
-                        v-if="status === 'success'"
-                        role="alert"
-                        class="alert alert-success"
-                    >
-                        <CheckCircleIcon
-                            class="stroke-current shrink-0 h-5 w-5"
-                        />
-                        <span class="text-sm">{{
-                            siteConfig.contact.form.success
-                        }}</span>
-                    </div>
-
                     <button
                         type="submit"
-                        class="btn btn-primary btn-lg w-full shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all duration-300"
+                        class="btn btn-lg w-full shadow-lg transition-all duration-300"
-                        :disabled="status === 'sending'"
+                        :class="[
+                            status === 'success'
+                                ? 'btn-success text-white shadow-success/25'
+                                : status === 'error'
+                                  ? 'btn-error text-white shadow-error/25'
+                                  : 'btn-primary shadow-primary/25 hover:shadow-xl hover:shadow-primary/30',
+                        ]"
+                        :disabled="status === 'sending' || status === 'success'"
                     >
                         <template v-if="status === 'sending'">
                             <span
@@ -262,6 +248,14 @@ ${message.value}`,
                             ></span>
                             {{ siteConfig.contact.form.sending }}
                         </template>
+                        <template v-else-if="status === 'success'">
+                            <CheckCircleIcon class="w-5 h-5" />
+                            {{ siteConfig.contact.form.success }}
+                        </template>
+                        <template v-else-if="status === 'error'">
+                            <XCircleIcon class="w-5 h-5" />
+                            {{ errorMessage || siteConfig.contact.form.error }}
+                        </template>
                         <template v-else>
                             <PaperAirplaneIcon class="w-5 h-5" />
                             {{ siteConfig.contact.form.submit }}