Integrate Simcoe Trades Journal Jekyll site with DigitalOcean App Platform spec

2026-07-31 11:12:33 -04:00
commit c5993bce0d
26 changed files with 1246 additions and 0 deletions
@@ -0,0 +1,46 @@
+<footer class="bg-slate-950 border-t border-slate-800 text-slate-400 py-12 mt-20">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+      <!-- Col 1 -->
+      <div class="md:col-span-2">
+        <div class="flex items-center gap-3 mb-4">
+          <div class="w-8 h-8 rounded bg-amber-500 flex items-center justify-center text-slate-950 font-extrabold text-base">
+            STJ
+          </div>
+          <span class="text-lg font-bold text-white font-heading">
+            SIMCOE <span class="text-amber-400">TRADES JOURNAL</span>
+          </span>
+        </div>
+        <p class="text-sm text-slate-400 max-w-md leading-relaxed">
+          An independent trade journal showcasing local construction, roofing, and custom carpentry work in Barrie, Orillia, Severn, and Simcoe County. Highlighting craftsmanship, project specifications, and verified contractor profiles.
+        </p>
+      </div>
+
+      <!-- Col 2 -->
+      <div>
+        <h4 class="text-white font-semibold text-sm tracking-wider uppercase mb-4 font-heading">Featured Contractors</h4>
+        <ul class="space-y-2.5 text-sm">
+          <li><a href="https://midhurstroofing.ca" target="_blank" rel="noopener" class="hover:text-amber-400 transition-colors">Midhurst Roofing Barrie</a></li>
+          <li><a href="https://severnroofing.ca" target="_blank" rel="noopener" class="hover:text-amber-400 transition-colors">Severn Roofing Orillia</a></li>
+          <li><a href="https://www.instagram.com/seanprocontracting/" target="_blank" rel="noopener" class="hover:text-amber-400 transition-colors">Sean Pro Contracting</a></li>
+        </ul>
+      </div>
+
+      <!-- Col 3 -->
+      <div>
+        <h4 class="text-white font-semibold text-sm tracking-wider uppercase mb-4 font-heading">Coverage Areas</h4>
+        <ul class="space-y-2 text-sm text-slate-400">
+          <li>Barrie & Innisfil</li>
+          <li>Orillia & Severn Township</li>
+          <li>Midhurst & Springwater</li>
+          <li>Collingwood & Muskoka</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="border-t border-slate-800/80 mt-10 pt-6 flex flex-col md:flex-row items-center justify-between text-xs text-slate-500">
+      <p>© {{ 'now' | date: "%Y" }} Simcoe Trades Journal. All contractor case studies are curated for community reference.</p>
+      <p class="mt-2 md:mt-0">Built with Jekyll & Tailwind CSS</p>
+    </div>
+  </div>
+</footer>
@@ -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>