Add Cal.com booking CTAs, blog section on main page

- Replace all 'email us' CTAs with Cal.com booking links
  - Hero: 'Book a Free Assessment' → 15min
  - Vibecode Rescue: 'Book a Free Project Assessment' → 30min
  - Contact section: dual buttons (15min quick chat + 30min deep dive)
  - Nav: 'Book a Call' → 15min
  - Blog post CTAs: same dual-button pattern
- Keep email as secondary fallback in contact section
- Add 'Latest from the Blog' section between Why Us and Contact
  - Featured post card linking to vibecoded app article
  - 'View all posts' link to /blog/
- Add Blog link to main site nav (desktop + mobile)

Author: theJawnnybot

blog/vibecoded-app-production-ready/index.html

@@ -290,7 +290,7 @@ <h2 class="font-fira text-2xl font-bold text-white mt-12 mb-4">The bottom line</
           </p>
           <p class="text-lg">
             <strong class="text-white">Built something with AI and ready to take it to the next level?</strong>
-            <a href="mailto:hello@commit451.com" class="text-brand-teal hover:text-brand-teal/80 transition-colors"> Reach out</a> — we'd love to hear about your project.
+            <a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class="text-brand-teal hover:text-brand-teal/80 transition-colors"> Book a free assessment</a> — we'd love to hear about your project.
           </p>
 
         </div>
@@ -299,10 +299,16 @@ <h2 class="font-fira text-2xl font-bold text-white mt-12 mb-4">The bottom line</
         <div class="mt-16 rounded-2xl border border-brand-teal/30 bg-dark-900/70 p-8 text-center">
           <h3 class="font-fira text-xl font-bold text-white">Have a vibecoded project that needs help?</h3>
           <p class="mt-3 text-gray-400">We offer free initial project assessments. Tell us what you've built and where you want to take it.</p>
-          <a href="mailto:hello@commit451.com" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-brand-teal px-8 py-3.5 text-sm font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
-            Get a Free Assessment
-          </a>
+          <div class="mt-6 flex flex-col sm:flex-row gap-3 justify-center">
+            <a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-teal px-8 py-3.5 text-sm font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+              Quick Chat — 15 min
+            </a>
+            <a href="https://cal.com/commit451/30min" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 rounded-lg border border-brand-teal/60 px-8 py-3.5 text-sm font-semibold text-brand-teal hover:bg-brand-teal/10 transition-all hover:scale-105">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+              Deep Dive — 30 min
+            </a>
+          </div>
         </div>
 
       </div>

index.html

@@ -195,7 +195,7 @@
         <a href="#about" class="text-gray-400 hover:text-brand-teal transition-colors">About</a>
         <a href="#services" class="text-gray-400 hover:text-brand-teal transition-colors">Services</a>
         <a href="/blog/" class="text-gray-400 hover:text-brand-teal transition-colors">Blog</a>
-        <a href="#contact" class="rounded-lg border border-brand-teal/60 px-4 py-2 text-brand-teal hover:bg-brand-teal/10 transition-all">Contact</a>
+        <a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class="rounded-lg border border-brand-teal/60 px-4 py-2 text-brand-teal hover:bg-brand-teal/10 transition-all">Book a Call</a>
       </div>
       <!-- Mobile menu button -->
       <button id="menu-toggle" class="sm:hidden text-gray-400 hover:text-white" aria-label="Toggle menu">
@@ -233,8 +233,8 @@ <h1 class="font-fira text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight t
           We craft polished, performant applications with obsessive attention to detail — and we turn vibecoded prototypes into production-ready apps people actually use.
         </p>
         <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
-          <a href="#contact" class="inline-flex items-center justify-center rounded-lg bg-brand-teal px-8 py-3.5 text-sm font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
-            Get in Touch
+          <a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center rounded-lg bg-brand-teal px-8 py-3.5 text-sm font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
+            Book a Free Assessment
           </a>
           <a href="#work" class="inline-flex items-center justify-center rounded-lg border border-dark-700 px-8 py-3.5 text-sm font-medium text-gray-300 hover:border-brand-teal hover:text-brand-teal transition-all">
             View Our Work
@@ -399,10 +399,17 @@ <h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Have a
           We're always open to hearing about interesting problems. Whether you need a mobile app, 
           a web platform, help turning your vibecoded prototype into something real, or technical guidance — let's build something great together.
         </p>
-        <a href="mailto:hello@commit451.com" class="mt-10 inline-flex items-center gap-2 rounded-lg bg-brand-teal px-8 py-4 text-base font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
-          hello@commit451.com
-        </a>
+        <div class="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
+          <a href="https://cal.com/commit451/15min" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-teal px-8 py-4 text-base font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+            Quick Chat — 15 min
+          </a>
+          <a href="https://cal.com/commit451/30min" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 rounded-lg border border-brand-teal/60 px-8 py-4 text-base font-semibold text-brand-teal hover:bg-brand-teal/10 transition-all hover:scale-105">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+            Deep Dive — 30 min
+          </a>
+        </div>
+        <p class="mt-4 text-sm text-gray-500">Or email us at <a href="mailto:hello@commit451.com" class="text-brand-teal hover:text-brand-teal/80 transition-colors">hello@commit451.com</a></p>
         <div class="mt-10 flex justify-center gap-5">
           <a href="https://x.com/Commit451" target="_blank" rel="noopener noreferrer" aria-label="Follow Commit 451 on X (Twitter)" class="group flex h-12 w-12 items-center justify-center rounded-full border border-dark-700 bg-dark-800/50 text-gray-400 transition-all hover:border-brand-teal hover:bg-brand-teal/10 hover:text-brand-teal hover:scale-110">
             <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
@@ -518,9 +525,9 @@ <h3 class="font-fira font-bold text-white text-2xl">Vibecode Rescue</h3>
                   <span class="text-xs px-3 py-1.5 rounded-full bg-dark-700/60 text-gray-300 border border-dark-700">App Store Launch</span>
                   <span class="text-xs px-3 py-1.5 rounded-full bg-dark-700/60 text-gray-300 border border-dark-700">Audience Growth</span>
                 </div>
-                <a href="#contact" class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-brand-teal hover:text-brand-teal/80 transition-colors">
-                  Tell us about your project
-                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
+                <a href="https://cal.com/commit451/30min" target="_blank" rel="noopener noreferrer" class="mt-6 inline-flex items-center gap-2 rounded-lg bg-brand-teal px-6 py-3 text-sm font-semibold text-dark-950 hover:bg-brand-teal/90 transition-all hover:scale-105 shadow-lg shadow-brand-teal/20">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+                  Book a Free Project Assessment
                 </a>
               </div>
             </div>
@@ -596,7 +603,42 @@ <h3 class="font-semibold text-white">AI-native workflow</h3>
       </div>
     </section>
 
-    <!-- Featured Work Section -->
+    <!-- Blog Section -->
+    <section id="blog" class="py-24 sm:py-32 px-6 border-t border-dark-700/30">
+      <div class="mx-auto max-w-4xl">
+        <div class="text-center reveal">
+          <p class="text-sm font-fira font-bold text-brand-teal uppercase tracking-widest">From the Blog</p>
+          <h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-white">Latest Insights</h2>
+        </div>
+        <div class="mt-12">
+          <a href="/blog/vibecoded-app-production-ready/" class="block group rounded-2xl border border-dark-700/60 bg-dark-900/70 backdrop-blur-sm p-8 hover:border-brand-teal/40 transition-all duration-300 glow reveal">
+            <div class="flex flex-wrap gap-2 mb-3">
+              <span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Vibe Coding</span>
+              <span class="text-xs px-2.5 py-1 rounded-full bg-brand-teal/10 text-brand-teal border border-brand-teal/20">Production Readiness</span>
+            </div>
+            <h3 class="font-fira text-xl sm:text-2xl font-bold text-white group-hover:text-brand-teal transition-colors">
+              5 Things That Break When You Take a Vibecoded App to Production
+            </h3>
+            <p class="mt-3 text-gray-400 leading-relaxed">
+              Built an app with Cursor, Copilot, or Claude? It works on your machine. Here's what happens when real users find it — and how to fix the five most common issues before launch.
+            </p>
+            <div class="mt-4 flex items-center gap-3 text-sm text-gray-500">
+              <time datetime="2026-03-12">March 12, 2026</time>
+              <span>·</span>
+              <span>8 min read</span>
+              <span class="ml-auto text-brand-teal group-hover:translate-x-1 transition-transform">Read →</span>
+            </div>
+          </a>
+        </div>
+        <div class="mt-8 text-center reveal">
+          <a href="/blog/" class="inline-flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-brand-teal transition-colors">
+            View all posts
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
+          </a>
+        </div>
+      </div>
+    </section>
+
       </main>
 
   <!-- Footer -->