update the UI of the contact form

script.js

@@ -71,9 +71,20 @@ backToTop?.addEventListener('click', () => window.scrollTo({ top: 0, behavior: '
 // Contact form with validation
 const form = document.getElementById('contact-form');
 const status = document.getElementById('form-status');
+const statusIcon = document.getElementById('status-icon');
+const statusText = document.getElementById('status-text');
 const submitBtn = document.getElementById('submit-btn');
 const submitText = document.getElementById('submit-text');
+const resetBtn = document.getElementById('reset-btn');
 
+// Reset button functionality
+resetBtn?.addEventListener('click', () => {
+  form.reset();
+  document.querySelectorAll('.error-message').forEach(el => el.classList.add('hidden'));
+  document.querySelectorAll('input, textarea').forEach(el => el.classList.remove('border-red-400'));
+  statusText.textContent = '';
+  statusIcon.innerHTML = '';
+});
 function validateForm() {
   let isValid = true;
   
@@ -153,20 +164,21 @@ document.querySelectorAll('input, textarea').forEach(input => {
 // Handle form submission
 form?.addEventListener('submit', async (e) => {
   e.preventDefault();
-  
   if (!validateForm()) {
-    status.textContent = 'Please fix the errors above';
+    statusText.textContent = 'Please fix the errors above';
+    statusIcon.innerHTML = '<i data-feather="alert-circle" class="w-4 h-4"></i>';
     status.classList.add('text-red-400');
-    status.classList.remove('text-zinc-400');
+    status.classList.remove('text-zinc-400', 'text-emerald-400');
+    feather.replace();
     return;
   }
 
   // Reset status
-  status.textContent = '';
-  status.classList.remove('text-red-400');
+  statusText.textContent = '';
+  statusIcon.innerHTML = '';
+  status.classList.remove('text-red-400', 'text-emerald-400');
   status.classList.add('text-zinc-400');
-
-  // Disable form and show loading state
+// Disable form and show loading state
   submitBtn.disabled = true;
   submitText.textContent = 'Sending...';
   submitBtn.classList.add('opacity-75');
@@ -180,27 +192,27 @@ form?.addEventListener('submit', async (e) => {
     
     // For demo purposes, just log the data
     console.log('Form submitted:', data);
-    
     // Success
-    status.textContent = '✓ Message sent successfully! I\'ll get back to you soon.';
-    status.classList.remove('text-zinc-400');
+    statusText.textContent = 'Message sent successfully! I\'ll get back to you soon.';
+    statusIcon.innerHTML = '<i data-feather="check-circle" class="w-4 h-4"></i>';
+    status.classList.remove('text-zinc-400', 'text-red-400');
     status.classList.add('text-emerald-400');
-    
-    // Reset form
+    feather.replace();
+// Reset form
     form.reset();
     
     // Reset button state
     submitBtn.disabled = false;
     submitText.textContent = 'Send message';
     submitBtn.classList.remove('opacity-75');
-    
   } catch (error) {
     console.error('Form submission error:', error);
-    status.textContent = '✗ Something went wrong. Please try again or email me directly.';
-    status.classList.remove('text-zinc-400');
+    statusText.textContent = 'Something went wrong. Please try again or email me directly.';
+    statusIcon.innerHTML = '<i data-feather="x-circle" class="w-4 h-4"></i>';
+    status.classList.remove('text-zinc-400', 'text-emerald-400');
     status.classList.add('text-red-400');
-    
-    // Reset button state
+    feather.replace();
+// Reset button state
     submitBtn.disabled = false;
     submitText.textContent = 'Send message';
     submitBtn.classList.remove('opacity-75');

style.css

@@ -143,15 +143,111 @@ a { text-decoration: none; }
 .mobile-link {
   @apply px-3 py-2 rounded-md text-zinc-300 hover:text-white hover:bg-white/10 transition;
 }
-
 /* Buttons */
 .btn-primary {
-  @apply inline-flex items-center gap-2 rounded-lg border border-white/10 bg-[color:rgb(var(--color-primary-500)_/_0.2)] text-[color:rgb(var(--color-primary-500))] hover:bg-[color:rgb(var(--color-primary-500)_/_0.3)] px-5 py-3 font-medium transition-all duration-200 shadow-glow hover:shadow-lg hover:scale-[1.02];
+  @apply inline-flex items-center gap-2 rounded-lg border border-white/10 bg-[color:rgb(var(--color-primary-500)_/_0.2)] text-[color:rgb(var(--color-primary-500))] hover:bg-[color:rgb(var(--color-primary-500)_/_0.3)] px-5 py-3 font-medium transition-all duration-200 shadow-glow hover:shadow-lg hover:scale-[1.02] relative overflow-hidden;
 }
 .btn-ghost {
-  @apply inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 hover:bg-white/10 text-zinc-200 hover:text-white px-4 py-2 font-medium transition;
+  @apply inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 hover:bg-white/10 text-zinc-200 hover:text-white px-4 py-2 font-medium transition-all duration-200;
+}
+
+/* Enhanced form styles */
+.form-field-input {
+  @apply w-full rounded-lg border border-white/10 bg-white/5 text-zinc-200 placeholder:text-zinc-500 px-4 py-3 outline-none focus:border-[color:rgb(var(--color-primary-500)_/_0.6)] focus:ring-2 focus:ring-[color:rgb(var(--color-primary-500)_/_0.2)] transition-all duration-200;
+}
+
+.form-field-input.pl-11 {
+  padding-left: 2.75rem;
+}
+
+/* Form field hover and focus effects */
+.form-field-input:hover {
+  border-color: rgba(var(--color-primary-500), 0.3);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.form-field-input:focus {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(var(--color-primary-500), 0.15);
+}
+
+/* Enhanced error states */
+.form-field-input.error {
+  border-color: rgb(239, 68, 68);
+  background: rgba(239, 68, 68, 0.05);
+  animation: shake 0.3s ease-in-out;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+/* Status indicator animations */
+#form-status {
+  @apply transition-all duration-300;
+}
+
+#form-status .feather {
+  @apply transition-all duration-300;
+}
+
+/* Success state animation */
+@keyframes success-pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
 }
 
+#form-status.text-emerald-400 .feather {
+  animation: success-pulse 0.5s ease-in-out;
+}
+
+/* Loading state for submit button */
+.btn-primary:disabled {
+  @apply opacity-75 cursor-not-allowed;
+  position: relative;
+}
+
+.btn-primary:disabled::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Light theme form adjustments */
+html.light .form-field-input {
+  background: rgba(255, 255, 255, 0.9);
+  border-color: rgba(15, 23, 42, 0.15);
+  color: rgb(15, 23, 42);
+}
+
+html.light .form-field-input:hover {
+  border-color: rgba(var(--color-primary-500), 0.3);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+html.light .form-field-input::placeholder {
+  color: rgb(100, 116, 139);
+}
+
+html.light .form-field-input.error {
+  background: rgba(239, 68, 68, 0.05);
+  border-color: rgb(239, 68, 68);
+}
 /* Inputs */
 .label {
   @apply block text-sm font-medium text-zinc-300 mb-2;