Integrate Simcoe Trades Journal Jekyll site with DigitalOcean App Platform spec

_includes/header.html

@@ -0,0 +1,47 @@
+<header class="sticky top-0 z-50 glass-nav">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between h-20">
+      <!-- Logo & Brand Title -->
+      <a href="{{ '/' | relative_url }}" class="flex items-center gap-3 group">
+        <div class="w-10 h-10 rounded-lg bg-amber-500 flex items-center justify-center text-slate-950 font-extrabold text-xl shadow-lg shadow-amber-500/30 group-hover:scale-105 transition-transform">
+          STJ
+        </div>
+        <div>
+          <span class="text-xl font-extrabold tracking-tight text-white block leading-none font-heading">
+            SIMCOE <span class="text-amber-400">TRADES</span>
+          </span>
+          <span class="text-xs font-medium text-slate-400 tracking-wider uppercase block mt-1">
+            Verified Contractor Spotlights
+          </span>
+        </div>
+      </a>
+
+      <!-- Navigation Links -->
+      <nav class="hidden md:flex items-center gap-8">
+        <a href="{{ '/' | relative_url }}" class="text-slate-200 hover:text-amber-400 font-medium text-sm transition-colors">
+          Case Studies
+        </a>
+        <a href="{{ '/roofing-contractors/' | relative_url }}" class="text-slate-300 hover:text-amber-400 font-medium text-sm transition-colors">
+          Roofing Contractors
+        </a>
+        <a href="{{ '/timber-and-carpentry/' | relative_url }}" class="text-slate-300 hover:text-amber-400 font-medium text-sm transition-colors">
+          Timber & Carpentry
+        </a>
+        <a href="{{ '/coverage-area/' | relative_url }}" class="text-slate-300 hover:text-amber-400 font-medium text-sm transition-colors">
+          Coverage Area
+        </a>
+      </nav>
+
+      <!-- CTA Button -->
+      <div class="flex items-center gap-4">
+        <span class="hidden lg:inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-slate-800 text-emerald-400 border border-emerald-500/30">
+          <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse mr-2"></span> 3 Verified Spotlights
+        </span>
+        <a href="{{ '/#directory' | relative_url }}" class="px-4 py-2.5 rounded-lg bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-sm shadow-md hover:shadow-amber-500/20 transition-all flex items-center gap-2">
+          <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5m0 0h5m-5 0V11m0 0h-5m5 0h5"></path></svg>
+          Browse Contractors
+        </a>
+      </div>
+    </div>
+  </div>
+</header>