jekyll-theme-zer0 0.5.0 → 0.7.0

data/_layouts/blog.html

@@ -4,275 +4,467 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
 ---
 <!--
   ===================================================================
-  BLOG LAYOUT - Modern blog homepage with featured content
+  BLOG LAYOUT - Full-Width News Homepage
   ===================================================================
   
   File: blog.html
   Path: _layouts/blog.html
   Inherits: root.html
-  Purpose: Full-featured blog homepage with content organization
+  Purpose: Main news homepage with full-width content sections
   Source: Adapted from Bootstrap 5.3 blog example
   
-  Template Logic:
-  - Creates a magazine-style blog layout with multiple content sections
-  - Features breaking news/highlighted posts prominently
-  - Displays featured posts in a card grid layout
-  - Includes sidebar with recent posts, archives, and categories
-  - Implements responsive design for mobile and desktop
-  - Provides navigation between posts with pagination
+  Layout Structure (NO SIDEBAR - Full Width):
+  1. Blog Header: Dark header with title and category navigation
+  2. Hero Section: Breaking news highlight with large image
+  3. Category Navigation: Quick links to all sections with article counts
+  4. Featured Stories: Top featured posts in card grid
+  5. Category Sections: Posts organized by top 3 categories
+  6. Latest Posts: Horizontal card list of recent posts
+  7. Tags & Archives: Discovery widgets
+  8. Newsletter: Subscription CTA
   
-  Layout Structure:
-  1. Blog Header: Subscribe, logo/title, search, and sign-up
-  2. Navigation Bar: Dynamic navigation from site data
-  3. Hero Section: Most recent breaking news post
-  4. Featured Posts: Grid of featured content
-  5. Main Content: Blog content with pagination
-  6. Sidebar: Recent posts, archives, categories, external links
-  
-  Content Logic:
-  - Breaking news: Posts with "breaking" category
-  - Featured posts: Posts with "featured: true" in frontmatter
-  - Recent posts: Latest 3 posts for sidebar
-  - Navigation: Dynamic from site.data.navigation.posts
-  
-  Responsive Features:
-  - Mobile-first responsive grid system
-  - Image optimization with responsive classes
-  - Collapsible navigation and mobile-friendly layout
+  Note: All cards are inlined to avoid Liquid nesting depth issues
   ===================================================================
 -->
 
 <!-- ================================ -->
-<!-- BLOG HEADER SECTION             -->
+<!-- BLOG HEADER                      -->
 <!-- ================================ -->
-<div class="container">
-    <header class="border-bottom lh-1 py-3">
-        <div class="row flex-nowrap justify-content-between align-items-center">
-            <!-- Subscription Link -->
-            <div class="col-4 pt-1">
-                <a class="link-secondary" href="#">Subscribe</a>
-            </div>
-            
-            <!-- Blog Title/Logo -->
-            <div class="col-4 text-center">
-                <a class="blog-header-logo text-body-emphasis text-decoration-none" href="#">
-                    {{ page.title }}
-                </a>
-            </div>
-            
-            <!-- Search and Sign-up -->
-            <div class="col-4 d-flex justify-content-end align-items-center">
-                <!-- Search Icon -->
-                <a class="link-secondary" href="#" aria-label="Search">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24">
-                        <title>Search</title>
-                        <circle cx="10.5" cy="10.5" r="7.5"/>
-                        <path d="M21 21l-5.2-5.2"/>
-                    </svg>
-                </a>
-                <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
-            </div>
-        </div>
-    </header>
-
-    <!-- ================================ -->
-    <!-- NAVIGATION BAR                   -->
-    <!-- ================================ -->
-    <!-- Dynamic navigation from site data configuration -->
-    <div class="nav-scroller py-1 mb-3 border-bottom">
-        <nav class="nav nav-underline justify-content-between">
-            {% for item in site.data.navigation.posts %}
-                <a class="nav-item nav-link link-body-emphasis" href="{{ item.url | relative_url }}">
-                    {{ item.title }}
-                </a>
-            {% endfor %}
+<div class="container-fluid bg-dark text-white py-3 mb-4">
+  <div class="container">
+    <div class="row align-items-center">
+      <div class="col-md-4">
+        <h1 class="h3 mb-0">
+          <i class="bi bi-newspaper me-2"></i>{{ page.title | default: "News" }}
+        </h1>
+      </div>
+      <div class="col-md-8">
+        <nav class="nav nav-pills justify-content-md-end flex-wrap">
+          <a class="nav-link text-white active" href="{{ site.baseurl }}/posts/">
+            <i class="bi bi-house me-1"></i>Home
+          </a>
+          {% for item in site.data.navigation.posts %}
+            <a class="nav-link text-white-50" href="{{ item.url | relative_url }}">
+              {% if item.icon %}<i class="bi bi-{{ item.icon }} me-1"></i>{% endif %}
+              {{ item.title }}
+            </a>
+          {% endfor %}
+          <a class="nav-link text-white-50" href="{{ site.baseurl }}/tags/">
+            <i class="bi bi-tags me-1"></i>Tags
+          </a>
         </nav>
+      </div>
     </div>
+  </div>
 </div>
 
-<!-- ================================ -->
-<!-- MAIN CONTENT CONTAINER          -->
-<!-- ================================ -->
 <main class="container">
-    
-    <!-- ================================ -->
-    <!-- HERO SECTION - Breaking News     -->
-    <!-- ================================ -->
-    <!-- Featured highlight of most recent breaking news post -->
-    {% assign breaking_news_posts = site.posts | where: "categories", "breaking" %}
-    {% assign most_recent_post = breaking_news_posts | first %}
 
-    <div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
-        <div class="row">
-            <!-- Breaking News Content -->
-            <div class="col-lg-6">
-                <h1 class="display-4 fst-italic">{{ most_recent_post.title }}</h1>
-                <p class="lead my-3">{{ most_recent_post.excerpt }}</p>
-                <p class="lead mb-0">
-                    <a href="{{ site.baseurl }}{{ most_recent_post.url }}" class="text-body-emphasis fw-bold">
-                        Continue reading...
-                    </a>
-                </p>
-            </div>
-            
-            <!-- Breaking News Image -->
-            <div class="col-lg-6">
-                <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ most_recent_post.preview }}" 
-                     alt="Preview image" class="img-fluid">
-            </div>
+  <!-- ================================ -->
+  <!-- HERO - BREAKING NEWS             -->
+  <!-- ================================ -->
+  {% assign breaking_posts = site.posts | where: "breaking", true | where_exp: "post", "post.layout != 'blog'" %}
+  {% assign hero_post = breaking_posts | first %}
+  
+  {% unless hero_post %}
+    {% assign hero_post = site.posts | where: "featured", true | where_exp: "post", "post.layout != 'blog'" | first %}
+  {% endunless %}
+  
+  {% if hero_post %}
+  <section class="hero-section mb-5">
+    <div class="row g-0 bg-body-secondary rounded-4 overflow-hidden shadow">
+      <div class="col-lg-6 p-4 p-lg-5 d-flex flex-column justify-content-center">
+        {% if hero_post.breaking %}
+        <span class="badge bg-danger mb-3 align-self-start">
+          <i class="bi bi-lightning-fill me-1"></i>Breaking News
+        </span>
+        {% elsif hero_post.featured %}
+        <span class="badge bg-warning text-dark mb-3 align-self-start">
+          <i class="bi bi-star-fill me-1"></i>Featured
+        </span>
+        {% endif %}
+        <h1 class="display-5 fw-bold mb-3">{{ hero_post.title }}</h1>
+        <p class="lead text-muted mb-4">{{ hero_post.excerpt | strip_html | truncate: 200 }}</p>
+        <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
+          <small class="text-muted">
+            <i class="bi bi-calendar me-1"></i>{{ hero_post.date | date: "%B %d, %Y" }}
+          </small>
+          {% if hero_post.author %}
+            <small class="text-muted">
+              <i class="bi bi-person me-1"></i>{{ hero_post.author }}
+            </small>
+          {% endif %}
+          {% if hero_post.categories.size > 0 %}
+            <a href="{{ site.baseurl }}/posts/{{ hero_post.categories | first | slugify }}/" class="badge bg-primary text-decoration-none">
+              {{ hero_post.categories | first }}
+            </a>
+          {% endif %}
         </div>
+        <a href="{{ hero_post.url | relative_url }}" class="btn btn-primary btn-lg align-self-start">
+          Read Full Story <i class="bi bi-arrow-right ms-2"></i>
+        </a>
+      </div>
+      <div class="col-lg-6">
+        {% if hero_post.preview %}
+          <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ hero_post.preview }}" 
+               class="w-100 h-100" style="object-fit: cover; min-height: 400px;" 
+               alt="{{ hero_post.title }}" loading="lazy">
+        {% else %}
+          <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.og_image }}" 
+               class="w-100 h-100" style="object-fit: cover; min-height: 400px;" 
+               alt="Featured image" loading="lazy">
+        {% endif %}
+      </div>
     </div>
+  </section>
+  {% endif %}
 
-    <!-- ================================ -->
-    <!-- FEATURED POSTS GRID             -->
-    <!-- ================================ -->
-    <!-- Two-column grid of featured posts marked with 'featured: true' -->
-    <div class="row mb-2">
-        {% assign featured_posts = site.posts | where: "featured", true %}
-        {% for post in featured_posts %}
-            <div class="col-md-6">
-                <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
-                    <!-- Post Content -->
-                    <div class="col p-4 d-flex flex-column position-static">
-                        <strong class="d-inline-block mb-2 text-primary-emphasis">
-                            {{ post.categories[0] }}
-                        </strong>
-                        <h3 class="mb-0">{{ post.title }}</h3>
-                        <div class="mb-1 text-body-secondary">{{ post.date | date: "%b %d" }}</div>
-                        <p class="card-text mb-auto">{{ post.excerpt | strip_html | truncate: 200 }}</p>
-                        <a href="{{ site.baseurl }}{{ post.url }}" class="icon-link gap-1 icon-link-hover stretched-link">
-                            Continue reading
-                            <svg class="bi"><use xlink:href="#chevron-right"/></svg>
-                        </a>
-                    </div>
-                    
-                    <!-- Post Preview Image -->
-                    <div class="col-md-6 d-none d-lg-block">
-                        <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ post.preview }}" 
-                             alt="Post preview image" class="img-fluid">
-                    </div>
-                </div>
+  <!-- ================================ -->
+  <!-- CATEGORY QUICK NAVIGATION        -->
+  <!-- ================================ -->
+  <section class="category-nav mb-5">
+    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-6 g-3">
+      {% for nav_item in site.data.navigation.posts %}
+        {% assign cat_posts = site.posts | where_exp: "post", "post.categories contains nav_item.title" %}
+        <div class="col">
+          <a href="{{ nav_item.url | relative_url }}" 
+             class="card text-center h-100 text-decoration-none border-0 shadow-sm hover-lift">
+            <div class="card-body py-4">
+              <i class="bi bi-{{ nav_item.icon | default: 'folder' }} fs-2 text-primary mb-2 d-block"></i>
+              <h6 class="card-title mb-1">{{ nav_item.title }}</h6>
+              <small class="text-muted">{{ cat_posts.size }} articles</small>
             </div>
-        {% endfor %}
+          </a>
+        </div>
+      {% endfor %}
     </div>
+  </section>
 
-    <!-- ================================ -->
-    <!-- MAIN CONTENT AND SIDEBAR        -->
-    <!-- ================================ -->
-    <div class="row g-5">
-        <!-- ========================== -->
-        <!-- MAIN CONTENT COLUMN        -->
-        <!-- ========================== -->
-        <div class="col-md-8">
-            <h3 class="pb-4 mb-4 fst-italic border-bottom">From the Firehose</h3>
-
-            <!-- Blog Post Content -->
-            <article class="blog-post">
-                {{ content }}
-            </article>
-
-            <!-- ========================== -->
-            <!-- POST PAGINATION            -->
-            <!-- ========================== -->
-            <!-- Previous and Next page navigation -->
-            <nav aria-label="Page navigation">
-                <ul class="pagination pagination-lg justify-content-center">
-                    <li class="page-item">
-                        {% if page.previous %}
-                            <a class="page-link" href="{{ page.previous.url | prepend: site.baseurl }}">
-                                Previous: {{ page.previous.title }}
-                            </a>
-                        {% else %}
-                            <a class="page-link" href="#" aria-disabled="true">Previous</a>
-                        {% endif %}
-                    </li>
-                    <li class="page-item">
-                        {% if page.next %}
-                            <a class="page-link" href="{{ page.next.url | prepend: site.baseurl }}">
-                                Next: {{ page.next.title }}
-                            </a>
-                        {% else %}
-                            <a class="page-link" href="#" aria-disabled="true">Next</a>
-                        {% endif %}
-                    </li>
-                </ul>
-            </nav>
+  <!-- ================================ -->
+  <!-- FEATURED STORIES                 -->
+  <!-- ================================ -->
+  {% assign featured_posts = site.posts | where: "featured", true | where_exp: "post", "post.layout != 'blog'" %}
+  {% if featured_posts.size > 0 %}
+  <section class="featured-section mb-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h2 class="h3 mb-0">
+        <i class="bi bi-star-fill text-warning me-2"></i>Featured Stories
+      </h2>
+    </div>
+    
+    <div class="row g-4">
+      <!-- Main Featured Post -->
+      {% assign main_featured = featured_posts | first %}
+      <div class="col-lg-6">
+        <div class="card h-100 border-0 shadow">
+          <div class="position-relative">
+            <span class="badge bg-warning text-dark position-absolute top-0 end-0 m-3 z-1">
+              <i class="bi bi-star-fill me-1"></i>Featured
+            </span>
+            <a href="{{ main_featured.url | relative_url }}">
+              {% if main_featured.preview %}
+                <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ main_featured.preview }}" 
+                     class="card-img-top" style="height: 300px; object-fit: cover;" 
+                     alt="{{ main_featured.title }}" loading="lazy">
+              {% else %}
+                <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
+                     class="card-img-top" style="height: 300px; object-fit: cover;" 
+                     alt="Preview" loading="lazy">
+              {% endif %}
+            </a>
+          </div>
+          <div class="card-body">
+            {% if main_featured.categories.size > 0 %}
+              <a href="{{ site.baseurl }}/posts/{{ main_featured.categories | first | slugify }}/" 
+                 class="badge bg-primary text-decoration-none mb-2">
+                {{ main_featured.categories | first }}
+              </a>
+            {% endif %}
+            <h4 class="card-title">
+              <a href="{{ main_featured.url | relative_url }}" class="text-decoration-none text-body-emphasis">
+                {{ main_featured.title }}
+              </a>
+            </h4>
+            <p class="card-text text-muted">{{ main_featured.excerpt | strip_html | truncate: 150 }}</p>
+          </div>
+          <div class="card-footer bg-transparent">
+            <small class="text-muted">
+              <i class="bi bi-calendar me-1"></i>{{ main_featured.date | date: "%b %d, %Y" }}
+              {% if main_featured.author %}
+                <span class="mx-2">•</span>
+                <i class="bi bi-person me-1"></i>{{ main_featured.author }}
+              {% endif %}
+            </small>
+          </div>
         </div>
-
-        <!-- ========================== -->
-        <!-- SIDEBAR COLUMN             -->
-        <!-- ========================== -->
-        <div class="col-md-4">
-            <div class="position-sticky" style="top: 2rem;">
-                
-                <!-- About Section -->
-                <div class="p-4 mb-3 bg-body-tertiary rounded">
-                    <h4 class="fst-italic">About</h4>
-                    <p class="mb-0">
-                        Customize this section to tell your visitors a little bit about your publication, 
-                        writers, content, or something else entirely. Totally up to you.
-                    </p>
+      </div>
+      
+      <!-- Secondary Featured Posts -->
+      <div class="col-lg-6">
+        <div class="row row-cols-1 row-cols-md-2 g-4">
+          {% for fpost in featured_posts offset:1 limit:4 %}
+            <div class="col">
+              <div class="card h-100 border-0 shadow-sm hover-lift">
+                <a href="{{ fpost.url | relative_url }}">
+                  {% if fpost.preview %}
+                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ fpost.preview }}" 
+                         class="card-img-top" style="height: 120px; object-fit: cover;" 
+                         alt="{{ fpost.title }}" loading="lazy">
+                  {% else %}
+                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
+                         class="card-img-top" style="height: 120px; object-fit: cover;" 
+                         alt="Preview" loading="lazy">
+                  {% endif %}
+                </a>
+                <div class="card-body py-3">
+                  <h6 class="card-title mb-1">
+                    <a href="{{ fpost.url | relative_url }}" class="text-decoration-none text-body-emphasis">
+                      {{ fpost.title | truncate: 50 }}
+                    </a>
+                  </h6>
+                  <small class="text-muted">{{ fpost.date | date: "%b %d" }}</small>
                 </div>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </section>
+  {% endif %}
 
-                <!-- Recent Posts Section -->
-                <div>
-                    <h4 class="fst-italic">Recent posts</h4>
-                    <ul class="list-unstyled">
-                        {% for post in site.posts limit:3 %}
-                            <li>
-                                <a class="d-flex flex-column flex-lg-row gap-3 align-items-start align-items-lg-center py-3 link-body-emphasis text-decoration-none border-top" 
-                                   href="{{site.baseurl}}/{{ post.url }}">
-                                    <img class="bd-placeholder-img" 
-                                         src="{{ site.baseurl }}/{{ site.public_folder }}/{{ page.preview | default: site.og_image }}" 
-                                         width="50%" alt="Preview image">
-                                    <div class="col-lg-8">
-                                        <h6 class="mb-0">{{ post.title }}</h6>
-                                        <small class="text-body-secondary">{{ post.date | date: "%B %d, %Y" }}</small>
-                                    </div>
-                                </a>
-                            </li>
-                        {% endfor %}
-                    </ul>
-                </div>
+  <!-- ================================ -->
+  <!-- POSTS BY CATEGORY                -->
+  <!-- ================================ -->
+  {% for nav_item in site.data.navigation.posts limit: 3 %}
+    {% assign cat_posts = site.posts | where_exp: "post", "post.categories contains nav_item.title" | where_exp: "post", "post.layout != 'blog'" %}
+    {% if cat_posts.size > 0 %}
+    <section class="category-section mb-5 pb-4 border-bottom">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <h2 class="h4 mb-0">
+          <i class="bi bi-{{ nav_item.icon | default: 'folder' }} text-primary me-2"></i>{{ nav_item.title }}
+        </h2>
+        <a href="{{ nav_item.url | relative_url }}" class="btn btn-outline-secondary btn-sm">
+          View All {{ nav_item.title }} <i class="bi bi-arrow-right ms-1"></i>
+        </a>
+      </div>
+      
+      <div class="row g-4">
+        {% for cpost in cat_posts limit: 4 %}
+          <div class="col-md-6 col-lg-3">
+            <div class="card h-100 border-0 shadow-sm hover-lift">
+              <a href="{{ cpost.url | relative_url }}">
+                {% if cpost.preview %}
+                  <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ cpost.preview }}" 
+                       class="card-img-top" style="height: 140px; object-fit: cover;" 
+                       alt="{{ cpost.title }}" loading="lazy">
+                {% else %}
+                  <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
+                       class="card-img-top" style="height: 140px; object-fit: cover;" 
+                       alt="Preview" loading="lazy">
+                {% endif %}
+              </a>
+              <div class="card-body">
+                <h6 class="card-title">
+                  <a href="{{ cpost.url | relative_url }}" class="text-decoration-none text-body-emphasis">
+                    {{ cpost.title | truncate: 55 }}
+                  </a>
+                </h6>
+                <p class="card-text small text-muted mb-0">
+                  {{ cpost.excerpt | strip_html | truncate: 80 }}
+                </p>
+              </div>
+              <div class="card-footer bg-transparent border-0 pt-0">
+                <small class="text-muted">
+                  <i class="bi bi-calendar me-1"></i>{{ cpost.date | date: "%b %d, %Y" }}
+                </small>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+  {% endfor %}
 
-                <!-- Archives Section -->
-                <!-- Note: This section uses static links - consider making dynamic -->
-                <div class="p-4">
-                    <h4 class="fst-italic">Archives</h4>
-                    <ol class="list-unstyled mb-0">
-                        <li><a href="#">March 2021</a></li>
-                        <li><a href="#">February 2021</a></li>
-                        <li><a href="#">January 2021</a></li>
-                        <li><a href="#">December 2020</a></li>
-                        <li><a href="#">November 2020</a></li>
-                        <li><a href="#">October 2020</a></li>
-                        <li><a href="#">September 2020</a></li>
-                        <li><a href="#">August 2020</a></li>
-                        <li><a href="#">July 2020</a></li>
-                        <li><a href="#">June 2020</a></li>
-                        <li><a href="#">May 2020</a></li>
-                        <li><a href="#">April 2020</a></li>
-                    </ol>
+  <!-- ================================ -->
+  <!-- LATEST POSTS                     -->
+  <!-- ================================ -->
+  {% assign latest_posts = site.posts | where_exp: "post", "post.layout != 'blog'" %}
+  <section class="latest-section mb-5">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <h2 class="h4 mb-0">
+        <i class="bi bi-clock-history text-secondary me-2"></i>Latest Posts
+      </h2>
+    </div>
+    
+    <div class="row g-4">
+      {% for lpost in latest_posts limit: 6 %}
+        <div class="col-md-6 col-lg-4">
+          <div class="card border-0 shadow-sm h-100 hover-lift">
+            <div class="row g-0">
+              <div class="col-4">
+                <a href="{{ lpost.url | relative_url }}">
+                  {% if lpost.preview %}
+                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ lpost.preview }}" 
+                         class="rounded-start h-100 w-100" style="object-fit: cover; min-height: 120px;" 
+                         alt="{{ lpost.title }}" loading="lazy">
+                  {% else %}
+                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
+                         class="rounded-start h-100 w-100" style="object-fit: cover; min-height: 120px;" 
+                         alt="Preview" loading="lazy">
+                  {% endif %}
+                </a>
+              </div>
+              <div class="col-8">
+                <div class="card-body py-2 px-3">
+                  {% if lpost.categories.size > 0 %}
+                    <span class="badge bg-secondary mb-1">{{ lpost.categories | first }}</span>
+                  {% endif %}
+                  <h6 class="card-title mb-1">
+                    <a href="{{ lpost.url | relative_url }}" class="text-decoration-none text-body-emphasis">
+                      {{ lpost.title | truncate: 45 }}
+                    </a>
+                  </h6>
+                  <small class="text-muted">
+                    <i class="bi bi-calendar me-1"></i>{{ lpost.date | date: "%b %d" }}
+                    {% if lpost.featured %}
+                      <span class="badge bg-warning text-dark ms-1">Featured</span>
+                    {% endif %}
+                  </small>
                 </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </section>
 
-                <!-- Categories Section -->
-                <div class="p-4">
-                    {% include navigation/sidebar-categories.html %}
-                </div>
+  <!-- ================================ -->
+  <!-- PAGE CONTENT (if any)            -->
+  <!-- ================================ -->
+  {% if content != blank %}
+  <section class="page-content mb-5">
+    <div class="card border-0 shadow-sm">
+      <div class="card-body p-4 p-lg-5">
+        {{ content }}
+      </div>
+    </div>
+  </section>
+  {% endif %}
 
-                <!-- External Links Section -->
-                <div class="p-4">
-                    <h4 class="fst-italic">Elsewhere</h4>
-                    <ol class="list-unstyled">
-                        <li><a href="#">GitHub</a></li>
-                        <li><a href="#">Twitter</a></li>
-                        <li><a href="#">Facebook</a></li>
-                    </ol>
+  <!-- ================================ -->
+  <!-- TAGS & ARCHIVES                  -->
+  <!-- ================================ -->
+  <section class="footer-widgets mb-5">
+    <div class="row g-4">
+      <!-- Popular Tags -->
+      <div class="col-md-6">
+        <div class="card h-100 border-0 bg-body-tertiary">
+          <div class="card-body">
+            <h5 class="card-title mb-3">
+              <i class="bi bi-tags me-2"></i>Popular Tags
+            </h5>
+            {% assign all_tags = "" | split: "" %}
+            {% for post in site.posts %}
+              {% for tag in post.tags %}
+                {% assign all_tags = all_tags | push: tag %}
+              {% endfor %}
+            {% endfor %}
+            {% assign unique_tags = all_tags | uniq | slice: 0, 15 %}
+            <div class="d-flex flex-wrap gap-2">
+              {% for tag in unique_tags %}
+                <a href="{{ site.baseurl }}/tags/#{{ tag | slugify }}" 
+                   class="badge bg-secondary text-decoration-none fs-6">
+                  {{ tag }}
+                </a>
+              {% endfor %}
+            </div>
+            <a href="{{ site.baseurl }}/tags/" class="btn btn-sm btn-outline-primary mt-3">
+              Browse All Tags <i class="bi bi-arrow-right ms-1"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Archives -->
+      <div class="col-md-6">
+        <div class="card h-100 border-0 bg-body-tertiary">
+          <div class="card-body">
+            <h5 class="card-title mb-3">
+              <i class="bi bi-archive me-2"></i>Archives
+            </h5>
+            {% assign posts_by_year = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
+            <div class="row">
+              {% for year in posts_by_year limit: 2 %}
+                <div class="col-6">
+                  <h6 class="text-muted mb-2">{{ year.name }}</h6>
+                  {% assign months = year.items | group_by_exp: "post", "post.date | date: '%B'" %}
+                  <ul class="list-unstyled small">
+                    {% for month in months limit: 6 %}
+                      <li class="mb-1">
+                        <a href="{{ '/archives/' | relative_url }}#{{ month.name | slugify }}-{{ year.name }}" 
+                           class="text-decoration-none">
+                          {{ month.name }}
+                          <span class="badge bg-light text-dark">{{ month.items.size }}</span>
+                        </a>
+                      </li>
+                    {% endfor %}
+                  </ul>
                 </div>
+              {% endfor %}
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </section>
+
+  <!-- ================================ -->
+  <!-- NEWSLETTER SIGNUP                -->
+  <!-- ================================ -->
+  <section class="newsletter-section mb-5">
+    <div class="card border-0 bg-primary text-white">
+      <div class="card-body p-4 p-lg-5 text-center">
+        <i class="bi bi-envelope-paper fs-1 mb-3 d-block"></i>
+        <h3 class="mb-3">Stay Updated</h3>
+        <p class="mb-4 opacity-75">Subscribe to get the latest news and updates delivered to your inbox.</p>
+        <form class="row g-2 justify-content-center">
+          <div class="col-md-4">
+            <input type="email" class="form-control form-control-lg" placeholder="Enter your email">
+          </div>
+          <div class="col-auto">
+            <button type="submit" class="btn btn-light btn-lg">
+              Subscribe <i class="bi bi-send ms-1"></i>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </section>
 
 </main>
 
+<style>
+  .hover-lift {
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+  }
+  .hover-lift:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  }
+  .card {
+    transition: transform 0.2s ease-in-out;
+  }
+  .hero-section img {
+    min-height: 300px;
+  }
+  @media (max-width: 767px) {
+    .hero-section img {
+      min-height: 200px;
+    }
+  }
+</style>
+