feat: add client banners

site/index.html

@@ -893,6 +893,54 @@
         justify-content: center;
         gap: 1rem;
       }
+
+      /* ============================================
+         AVAILABILITY BANNER
+         ============================================ */
+      .availability-banner {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1.5rem;
+        padding: 1.25rem 1.5rem;
+        background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%);
+        border-radius: 12px;
+        margin-bottom: 2rem;
+      }
+
+      .availability-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: var(--witch-moon);
+        font-size: 0.95rem;
+      }
+
+      .availability-item i {
+        font-size: 1.2rem;
+        color: #10b981;
+      }
+
+      .availability-item:nth-child(2) i {
+        color: #ffd700;
+      }
+
+      .availability-item:nth-child(3) i {
+        color: var(--witch-mauve);
+      }
+
+      .availability-item:nth-child(4) i {
+        color: #60a5fa;
+      }
+
+      @media (max-width: 768px) {
+        .availability-banner {
+          flex-direction: column;
+          align-items: center;
+          gap: 1rem;
+          text-align: center;
+        }
+      }
     </style>
     <!-- Devicon for technology icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
@@ -1439,6 +1487,28 @@
         })();
       </script>
 
+      <!--
+          MARK: Availability Banner
+      -->
+      <section class="availability-banner fade-in" role="region" aria-label="Availability information">
+        <div class="availability-item">
+          <i class="fas fa-check-circle" aria-hidden="true"></i>
+          <span><strong>Accepting New Clients</strong></span>
+        </div>
+        <div class="availability-item">
+          <i class="fas fa-shield-alt" aria-hidden="true"></i>
+          <span><strong>NDA Ready</strong> &mdash; Your project stays confidential</span>
+        </div>
+        <div class="availability-item">
+          <i class="fas fa-clock" aria-hidden="true"></i>
+          <span><strong>1-3 Business Days</strong> response time</span>
+        </div>
+        <div class="availability-item">
+          <i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
+          <span><strong>Custom Quotes</strong> available on request</span>
+        </div>
+      </section>
+
       <!--
           MARK: Tech Stack
       -->
@@ -2145,6 +2215,24 @@
         <p style="font-size: 1.1rem; max-width: 600px; margin: 0 auto 1.5rem;">
           Have a question, want to work together, or just want to say hello? Fill out the form below and we'll get back to you!
         </p>
+        <div class="availability-banner" style="max-width: 680px; margin: 0 auto 1.5rem;">
+          <div class="availability-item">
+            <i class="fas fa-check-circle" aria-hidden="true"></i>
+            <span><strong>Accepting New Clients</strong></span>
+          </div>
+          <div class="availability-item">
+            <i class="fas fa-shield-alt" aria-hidden="true"></i>
+            <span><strong>NDA Ready</strong> &mdash; Your project stays confidential</span>
+          </div>
+          <div class="availability-item">
+            <i class="fas fa-clock" aria-hidden="true"></i>
+            <span><strong>1-3 Business Days</strong> response time</span>
+          </div>
+          <div class="availability-item">
+            <i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
+            <span><strong>Custom Quotes</strong> available on request</span>
+          </div>
+        </div>
         <div style="display: flex; justify-content: center; border-radius: 12px; background: var(--witch-moon); padding: 1rem; max-width: 680px; margin: 0 auto; height: 600px; overflow: hidden;">
           <iframe
             style="border: none; width: 100%; max-width: 640px; height: 100%;"