refactor: extract partials for post components and create separate page template

partials/feature-image.hbs

@@ -0,0 +1,10 @@
+<figure class="mb-12 rounded-lg overflow-hidden shadow-xl">
+    <img
+        class="w-full h-auto object-cover"
+        src="{{img_url feature_image size="xl"}}"
+        srcset="{{img_url feature_image size="l"}} 1000w,
+                {{img_url feature_image size="xl"}} 2000w"
+        sizes="(max-width: 1000px) 1000px, 2000px"
+        alt="{{title fallback="No Title"}}"
+    >
+</figure>

partials/post-navigation.hbs

@@ -0,0 +1,19 @@
+<nav class="hidden has-[a]:grid mt-16 max-w-3xl mx-auto grid-cols-1 md:grid-cols-2 gap-4 pt-12">
+    {{#prev_post}}
+        <div class="prev-post-nav">
+            <a href="{{url}}" class="group block p-6 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-all duration-300">
+                <span class="text-xs uppercase tracking-widest text-[var(--text-tertiary)] mb-2 block">&larr; Previous Post</span>
+                <h4 class="text-xl font-bold group-hover:text-[var(--brand-primary)] transition-colors duration-300">{{title}}</h4>
+            </a>
+        </div>
+    {{/prev_post}}
+
+    {{#next_post}}
+        <div class="next-post-nav text-right md:col-start-2">
+            <a href="{{url}}" class="group block p-6 bg-[var(--bg-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-all duration-300">
+                <span class="text-xs uppercase tracking-widest text-[var(--text-tertiary)] mb-2 block">Next Post &rarr;</span>
+                <h4 class="text-xl font-bold group-hover:text-[var(--brand-primary)] transition-colors duration-300">{{title}}</h4>
+            </a>
+        </div>
+    {{/next_post}}
+</nav>

partials/related-posts.hbs

@@ -0,0 +1,12 @@
+{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
+    {{#if related_posts}}
+        <section class="mt-16 pt-12 border-t border-[var(--bg-tertiary)]">
+            <h3 class="text-3xl font-bold mb-8 text-center">You might also like</h3>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
+                {{#foreach related_posts}}
+                    {{> "post-card"}}
+                {{/foreach}}
+            </div>
+        </section>
+    {{/if}}
+{{/get}}