Integrate Simcoe Trades Journal Jekyll site with DigitalOcean App Platform spec
This commit is contained in:
Your Name
@@ -0,0 +1,121 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<!-- Case Study Header Banner -->
|
||||
<div class="relative bg-slate-900 border-b border-slate-800 py-12 lg:py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-amber-400 mb-4">
|
||||
<span>Contractor Case Study</span>
|
||||
<span>•</span>
|
||||
<span>{{ page.category | default: "Roofing & Construction" }}</span>
|
||||
<span>•</span>
|
||||
<span>{{ page.location | default: "Simcoe County, ON" }}</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-black text-white font-heading tracking-tight leading-tight max-w-4xl">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
|
||||
<p class="mt-4 text-lg text-slate-300 max-w-3xl leading-relaxed">
|
||||
{{ page.subtitle }}
|
||||
</p>
|
||||
|
||||
<div class="mt-6 flex flex-wrap items-center gap-6 text-sm text-slate-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-amber-400 font-bold text-xs">
|
||||
STJ
|
||||
</div>
|
||||
<span>Published by <strong class="text-slate-200">Simcoe Trades Editorial</strong></span>
|
||||
</div>
|
||||
<span>•</span>
|
||||
<time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content & Sidebar Grid -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
|
||||
|
||||
<!-- Main Article Body -->
|
||||
<article class="lg:col-span-8">
|
||||
{% if page.hero_image %}
|
||||
<div class="rounded-2xl overflow-hidden mb-10 border border-slate-800 shadow-2xl">
|
||||
<img src="{{ page.hero_image | relative_url }}" alt="{{ page.title }}" class="w-full h-auto object-cover max-h-[460px]">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="post-content bg-slate-900/60 p-6 sm:p-10 rounded-2xl border border-slate-800/80">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<!-- Outbound Contractor CTA Banner -->
|
||||
<div class="mt-10 p-8 rounded-2xl bg-gradient-to-r from-amber-500/10 via-slate-900 to-slate-900 border border-amber-500/30 flex flex-col sm:flex-row items-center justify-between gap-6">
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-white font-heading">Interested in hiring {{ page.contractor_name }}?</h3>
|
||||
<p class="text-sm text-slate-300 mt-1">Visit their official portal to request an estimate or view more completed jobs.</p>
|
||||
</div>
|
||||
<a href="{{ page.contractor_url }}" target="_blank" rel="noopener" class="px-6 py-3 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-extrabold text-sm whitespace-nowrap shadow-lg shadow-amber-500/20 transition-all flex items-center gap-2">
|
||||
Visit {{ page.contractor_name }}
|
||||
<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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Contractor Bio & Spec Sidebar -->
|
||||
<aside class="lg:col-span-4 space-y-6">
|
||||
<!-- Contractor Card -->
|
||||
<div class="pro-sidebar-box rounded-2xl p-6 shadow-xl sticky top-28">
|
||||
<div class="text-xs font-bold text-amber-400 uppercase tracking-wider mb-4 flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-400"></span> Verified Local Contractor
|
||||
</div>
|
||||
|
||||
<!-- Logo Container -->
|
||||
<div class="p-4 bg-white rounded-xl flex items-center justify-center mb-6 border border-slate-700 min-h-[100px]">
|
||||
<a href="{{ page.contractor_url }}" target="_blank" rel="noopener" class="block hover:opacity-90 transition-opacity">
|
||||
<img src="{{ page.contractor_logo | relative_url }}" alt="{{ page.contractor_name }} Logo" class="max-h-20 max-w-full object-contain mx-auto">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-extrabold text-white font-heading mb-1">{{ page.contractor_name }}</h3>
|
||||
<p class="text-xs text-amber-400/90 font-medium mb-4">{{ page.contractor_tagline | default: "Licensed & Insured Trade Specialist" }}</p>
|
||||
|
||||
<p class="text-sm text-slate-300 leading-relaxed mb-6">
|
||||
{{ page.contractor_bio }}
|
||||
</p>
|
||||
|
||||
<!-- Link to Website -->
|
||||
<a href="{{ page.contractor_url }}" target="_blank" rel="noopener" class="w-full py-3 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-amber-400 border border-amber-500/30 hover:border-amber-500 text-center font-bold text-sm transition-all flex items-center justify-center gap-2 mb-6 shadow-sm">
|
||||
<span>Official Site / Profile</span>
|
||||
<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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
|
||||
</a>
|
||||
|
||||
<!-- Specs Box -->
|
||||
<div class="border-t border-slate-700/80 pt-6 space-y-3.5 text-xs text-slate-300">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-slate-400">Primary Location:</span>
|
||||
<span class="font-semibold text-white">{{ page.location }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-slate-400">Trade Type:</span>
|
||||
<span class="font-semibold text-amber-400">{{ page.trade_type }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-slate-400">Project Scope:</span>
|
||||
<span class="font-semibold text-white">{{ page.project_scope }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-slate-400">Materials:</span>
|
||||
<span class="font-semibold text-white">{{ page.materials_used }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-slate-400">Warranty:</span>
|
||||
<span class="font-semibold text-emerald-400">{{ page.warranty | default: "Standard Craftsmanship Warranty" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user