feat: embed a scheduler

site/index.html

@@ -734,11 +734,27 @@
       /* ============================================
          RESPONSIVE DESIGN
          ============================================ */
+      /* Calendar embed responsive styles */
+      #zcal-invite {
+        min-height: 544px;
+      }
+
+      @media (max-width: 1200px) {
+        #zcal-invite {
+          height: 600px !important;
+        }
+      }
+
       @media (max-width: 768px) {
         main {
           padding: 1rem 0.5rem;
         }
 
+        #zcal-invite {
+          height: 650px !important;
+          min-width: 100% !important;
+        }
+
         .card {
           padding: 1.5rem;
         }
@@ -2269,6 +2285,26 @@
         </p>
       </section>
 
+      <!--
+          MARK: Book a Call
+      -->
+      <section class="card fade-in" style="text-align: center; background: var(--witch-rose);" role="region" aria-labelledby="book-call">
+        <h2 id="book-call" style="margin-top: 0;"><i class="fas fa-calendar" aria-hidden="true"></i> Schedule a Call</h2>
+        <p style="font-size: 1.1rem; max-width: 600px; margin: 0 auto 1.5rem;">
+          Ready to discuss your project? Book a free consultation call and let's explore how we can work together!
+        </p>
+        <div style="max-width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin: 0 auto;">
+          <iframe
+            src="https://zcal.co/i/mUs9Kdjx?embed=1&embedType=iframe"
+            loading="lazy"
+            style="border:none; width: 100%; height: 675px; max-width: 1096px;"
+            id="zcal-invite"
+            scrolling="yes"
+            title="Schedule a consultation call">
+          </iframe>
+        </div>
+      </section>
+
       <!--
           MARK: Contact Form
       -->