initial commit

templates/products/_article_list.html

@@ -0,0 +1,69 @@
+{% if articles %}
+<section aria-label="Content sections">
+  <div class="articles-list">
+    {% for article in articles %}
+    <article class="article-card glass-card fade-in" aria-labelledby="article-{{ article.pk }}-title">
+      {% if article.badge %}<div class="article-card-header"><div class="section-badge article-badge">{{ article.badge }}</div></div>{% endif %}
+      <h3 class="article-title" id="article-{{ article.pk }}-title">{{ article.title }}</h3>
+      <div class="article-description rich-content" data-readmore="260">{{ article.rendered_description }}</div>
+      {% if article.sections.all %}
+      <div class="article-sections">
+        <dl class="article-sections-list">
+          {% for section in article.sections.all %}
+          <div class="article-section-item">
+            <dt class="section-key">{{ section.title }}</dt>
+            <dd class="section-value rich-content" data-readmore="160">{{ section.rendered_value }}</dd>
+          </div>
+          {% endfor %}
+        </dl>
+      </div>
+      {% endif %}
+      {% if article.citations.all %}
+      <div class="article-citations" id="article-{{ article.pk }}-citations">
+        <h4 class="article-citations-title">Citations</h4>
+        <ol class="article-citations-list">
+          {% for citation in article.citations.all %}
+          <li class="article-citation-item">
+            <span class="citation-text">{{ citation.text }}</span>
+            {% if citation.url %}
+            <span class="citation-actions">
+              <a href="{{ citation.url }}" class="citation-link" target="_blank" rel="noopener noreferrer" aria-label="Open citation source">
+                <svg width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <path d="M7 3H3a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1V9M10 2h4m0 0v4m0-4L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </a>
+              <button type="button" class="citation-copy" data-citation-url="{{ citation.url }}" aria-label="Copy citation link">
+                <svg class="citation-copy-icon" width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <rect x="5" y="5" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.5"/>
+                  <path d="M3 11V3a1 1 0 011-1h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                </svg>
+                <svg class="citation-copy-icon-done" width="13" height="13" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <path d="M3.5 8.5L6.5 11.5L12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                <span class="citation-copy-feedback" aria-live="polite" hidden>Copied!</span>
+              </button>
+            </span>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ol>
+      </div>
+      {% endif %}
+      {% if article.citation_count_display is not None or article.citation_count_label %}
+      {% if article.citations.exists %}
+      <a href="#article-{{ article.pk }}-citations" class="citation-count-badge" aria-label="{% if article.citation_count_display %}{{ article.citation_count_display }} {% endif %}{% if article.citation_count_label %}{{ article.citation_count_label }}{% endif %}">
+        {% if article.citation_count_display is not None %}<span class="citation-count-number">{{ article.citation_count_display }}</span>{% endif %}
+        {% if article.citation_count_label %}<span class="citation-count-label">{{ article.citation_count_label }}</span>{% endif %}
+      </a>
+      {% else %}
+      <div class="citation-count-badge" aria-label="{% if article.citation_count_display %}{{ article.citation_count_display }} {% endif %}{% if article.citation_count_label %}{{ article.citation_count_label }}{% endif %}">
+        {% if article.citation_count_display is not None %}<span class="citation-count-number">{{ article.citation_count_display }}</span>{% endif %}
+        {% if article.citation_count_label %}<span class="citation-count-label">{{ article.citation_count_label }}</span>{% endif %}
+      </div>
+      {% endif %}
+      {% endif %}
+    </article>
+    {% endfor %}
+  </div>
+</section>
+{% endif %}

templates/products/_installable_download_channel.html

@@ -0,0 +1,34 @@
+{% load static %}
+<div class="sub-downloads-channel{% if channel.is_previous %} sub-downloads-channel--prev{% endif %}">
+  {% include "products/_release_channel_badge.html" with version=channel.version %}
+  {% if channel.install_cells %}
+  <div class="sub-downloads-grid">
+    {% for cell in channel.install_cells %}
+    <div class="sub-dl-item">
+      <div class="sub-dl-icon-wrap">
+        {% if cell.icon %}
+        <img src="{% static cell.icon %}" alt="" width="32" height="32" class="platform-icon sub-dl-icon" aria-hidden="true" />
+        {% else %}
+        <span class="sub-dl-source-mark" aria-hidden="true">
+          <svg class="sub-dl-source-svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.85" stroke-linecap="round">
+            <polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
+          </svg>
+        </span>
+        {% endif %}
+      </div>
+      <span class="sub-dl-platform">{{ cell.label }}</span>
+      <span class="download-version">{{ channel.version.version }}</span>
+      <a href="{{ cell.url }}" class="btn-primary btn--sm"{% if cell.external %} target="_blank" rel="noopener noreferrer"{% endif %}>{% if cell.label == "Source code" %}Source{% else %}Download{% endif %}</a>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+  {% if channel.version.package_resource_url %}
+  <p class="sub-install-extra-resource">
+    <a href="{{ channel.version.package_resource_url }}" target="_blank" rel="noopener noreferrer">Package resource</a>
+  </p>
+  {% endif %}
+  {% if channel.version.release_notes %}
+  <p class="sub-release-notes">{{ channel.version.release_notes }}</p>
+  {% endif %}
+</div>

templates/products/_release_channel_badge.html

@@ -0,0 +1,10 @@
+{% if version.display_channel_label %}
+<span class="release-channel-label release-channel-label--{{ version.display_channel_css_modifier }}">
+  {% if version.release_channel == "stable" %}
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+  </svg>
+  {% endif %}
+  {{ version.display_channel_label }}
+</span>
+{% endif %}

templates/products/_releases_section.html

@@ -0,0 +1,69 @@
+{% load static %}
+{% if show_releases_section %}
+{% if distribution_installable %}
+<section class="sub-downloads fade-in" aria-labelledby="sub-dl-heading">
+  <div class="sub-downloads-header">
+    <h2 class="sub-downloads-title" id="sub-dl-heading">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
+      </svg>
+      Downloads
+    </h2>
+    {% if downloads_section_link %}
+    <a href="{{ downloads_section_link.url }}" class="sub-downloads-corner-link link-arrow" target="_blank" rel="noopener noreferrer">{{ downloads_section_link.text }}</a>
+    {% endif %}
+  </div>
+
+  {% if featured_version %}
+  {% include "products/_installable_download_channel.html" with channel=featured_channel %}
+  {% endif %}
+
+  {% for channel in inline_download_channels %}
+  {% include "products/_installable_download_channel.html" %}
+  {% endfor %}
+
+  {% if show_older_versions_link %}
+  <p class="sub-older-versions-inner">
+    <a href="{{ versions_archive_url }}" class="link-arrow">Older releases</a>
+  </p>
+  {% endif %}
+</section>
+
+{% elif distribution_package %}
+<section class="sub-downloads sub-downloads--package fade-in" aria-labelledby="sub-resources-heading">
+  <div class="sub-downloads-header">
+    <h2 class="sub-downloads-title" id="sub-resources-heading">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+      </svg>
+      Resources
+    </h2>
+    {% if downloads_section_link %}
+    <a href="{{ downloads_section_link.url }}" class="sub-downloads-corner-link link-arrow" target="_blank" rel="noopener noreferrer">{{ downloads_section_link.text }}</a>
+    {% endif %}
+  </div>
+  <ul class="pkg-version-list" role="list">
+    {% for ver in package_versions %}
+    <li class="pkg-version-row">
+      <div class="pkg-version-meta">
+        <span class="download-version">{{ ver.version }}</span>
+        {% include "products/_release_channel_badge.html" with version=ver %}
+      </div>
+      <div class="pkg-version-actions">
+        {% if ver.package_resource_url %}
+        <a href="{{ ver.package_resource_url }}" class="btn-primary btn--sm" target="_blank" rel="noopener noreferrer">{{ package_resource_button_text }}</a>
+        {% endif %}
+        {% if ver.resolved_source_code_url %}
+        <a href="{{ ver.resolved_source_code_url }}" class="btn-ghost btn--sm"{% if ver.source_code_url %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ package_source_button_text }}</a>
+        {% endif %}
+      </div>
+      {% if ver.release_notes %}
+      <p class="pkg-version-notes">{{ ver.release_notes }}</p>
+      {% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+</section>
+{% endif %}
+{% endif %}

templates/products/_versions_archive_body.html

@@ -0,0 +1,70 @@
+{% load static %}
+{% if not archive_versions %}
+<p class="versions-empty glass-card">There are no archived releases{% if sub_product %} for this module{% else %} for this product{% endif %}.</p>
+{% elif distribution_installable %}
+<div class="versions-table-wrap glass-card fade-in">
+  <table class="versions-table">
+    <thead>
+      <tr>
+        <th scope="col">Version</th>
+        {% for fname, label, icon in archive_specs %}
+        <th scope="col">{{ label }}</th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% for row in archive_rows_installable %}
+      <tr>
+        <th scope="row">
+          <span class="versions-table-version">{{ row.version_obj.version }}</span>
+          {% include "products/_release_channel_badge.html" with version=row.version_obj %}
+        </th>
+        {% for cell in row.cells %}
+        <td>
+          {% if cell.url %}
+            {% if cell.icon %}
+            <a href="{{ cell.url }}" class="versions-table-link"{% if cell.external %} target="_blank" rel="noopener noreferrer"{% endif %}>
+              <img src="{% static cell.icon %}" alt="" width="22" height="22" class="versions-table-icon" aria-hidden="true" />
+              <span class="sr-only">{{ cell.label }}</span>
+            </a>
+            {% else %}
+            <a href="{{ cell.url }}" class="versions-table-text-link"{% if cell.external %} target="_blank" rel="noopener noreferrer"{% endif %}>Source</a>
+            {% endif %}
+          {% else %}
+          <span class="versions-na">—</span>
+          {% endif %}
+        </td>
+        {% endfor %}
+      </tr>
+      {% if row.version_obj.release_notes %}
+      <tr class="versions-notes-row">
+        <td colspan="{{ archive_specs|length|add:1 }}">
+          <span class="versions-notes-label">Notes</span>
+          <p class="versions-notes-body">{{ row.version_obj.release_notes }}</p>
+        </td>
+      </tr>
+      {% endif %}
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+{% else %}
+<ul class="versions-package-list" role="list">
+  {% for ver in archive_versions %}
+  <li class="versions-package-card glass-card fade-in">
+    <div class="versions-package-head">
+      <div class="pkg-version-meta">
+        <span class="download-version">{{ ver.version }}</span>
+        {% include "products/_release_channel_badge.html" with version=ver %}
+      </div>
+      {% if ver.package_resource_url %}
+      <a href="{{ ver.package_resource_url }}" class="btn-ghost btn--sm" target="_blank" rel="noopener noreferrer">{{ package_resource_button_text }}</a>
+      {% endif %}
+    </div>
+    {% if ver.release_notes %}
+    <p class="versions-notes-body">{{ ver.release_notes }}</p>
+    {% endif %}
+  </li>
+  {% endfor %}
+</ul>
+{% endif %}

templates/products/main_detail.html

@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+{% load static %}
+
+
+{% block title %}{{ main_product.name }}{% endblock %}
+{% block meta_description %}{{ main_product.short_description }}{% endblock %}
+
+{% block content %}
+
+<section class="page-hero" aria-labelledby="main-product-heading">
+  <div class="page-hero-blobs" aria-hidden="true">
+    <div class="blob blob--1"></div>
+    <div class="blob blob--2"></div>
+    <div class="blob blob--3"></div>
+  </div>
+  <div class="container">
+    <nav class="breadcrumb" aria-label="Breadcrumb">
+      <ol class="breadcrumb-list" role="list">
+        <li><a href="{% url 'pages:home' %}">Home</a></li>
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li><a href="{% url 'products:overview' %}">Products</a></li>
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li aria-current="page">{{ main_product.name }}</li>
+      </ol>
+    </nav>
+    <div class="page-hero-content">
+      <div class="section-badge">Product</div>
+      <h1 class="page-hero-title" id="main-product-heading">{{ main_product.name }}</h1>
+      <p class="page-hero-subtitle">{{ main_product.short_description }}</p>
+    </div>
+  </div>
+</section>
+
+<section class="section main-product-layout" aria-labelledby="product-desc-heading">
+  <div class="container">
+    <div class="main-product-main">
+      <div class="product-detail-intro glass-card fade-in">
+        <div class="product-detail-image">
+          {% if main_product.image %}
+          <img src="{{ main_product.image.url }}" alt="{{ main_product.name }}" loading="lazy" />
+          {% else %}
+          <img src="{% static 'images/logo.png' %}" alt="{{ main_product.name }} logo" loading="lazy" class="product-logo-img" />
+          {% endif %}
+        </div>
+        <div class="product-detail-text">
+          <h2 id="product-desc-heading">About {{ main_product.name }}</h2>
+          <div class="product-detail-desc rich-content" data-readmore="220">{{ main_product.rendered_description }}</div>
+        </div>
+      </div>
+
+      {% include "products/_releases_section.html" %}
+    </div>
+  </div>
+</section>
+
+{% include "partials/_page_videos.html" with videos=product_videos %}
+
+{% if articles %}
+<section class="section" aria-label="Product articles">
+  <div class="container">
+    {% include "products/_article_list.html" %}
+  </div>
+</section>
+{% endif %}
+
+{% with subs=main_product.sub_products.all %}
+{% if subs %}
+<section class="section" aria-labelledby="subproducts-heading">
+  <div class="container">
+    <div class="section-header">
+      <div class="section-badge">Modules</div>
+      <h2 class="section-title" id="subproducts-heading">{{ main_product.name }} Modules</h2>
+      <p class="section-desc">
+        Explore the different modules and capabilities within {{ main_product.name }}.
+      </p>
+    </div>
+    <div class="subproducts-grid">
+      {% for sub in subs %}
+      {% if sub.is_active %}
+      <a href="{{ sub.get_absolute_url }}" class="subproduct-card glass-card fade-in">
+        {% if sub.image %}
+        <div class="subproduct-card-image">
+          <img src="{{ sub.image.url }}" alt="{{ sub.name }}" loading="lazy" />
+        </div>
+        {% endif %}
+        <div class="subproduct-card-body">
+          <h3 class="subproduct-card-title">{{ sub.name }}</h3>
+          <p class="subproduct-card-desc" data-readmore="88">{{ sub.short_description }}</p>
+          <span class="subproduct-card-link">
+            Learn More
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+              <path d="M3 7H11M11 7L8 4M11 7L8 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </span>
+        </div>
+      </a>
+      {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</section>
+{% endif %}
+{% endwith %}
+
+{% endblock %}

templates/products/overview.html

@@ -0,0 +1,73 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}Products{% endblock %}
+{% block meta_description %}Explore Tecvico's suite of products and solutions.{% endblock %}
+
+{% block content %}
+
+<section class="page-hero" aria-labelledby="products-overview-heading">
+  <div class="page-hero-blobs" aria-hidden="true">
+    <div class="blob blob--1"></div>
+    <div class="blob blob--2"></div>
+  </div>
+  <div class="container">
+    <div class="page-hero-content">
+      <div class="section-badge">Software Suite</div>
+      <h1 class="page-hero-title" id="products-overview-heading">Our Products</h1>
+      <p class="page-hero-subtitle">Advanced tools for medical imaging research and radiomics analysis.</p>
+    </div>
+  </div>
+</section>
+
+<section class="section" aria-labelledby="products-list-heading">
+  <div class="container">
+    <h2 class="sr-only" id="products-list-heading">Product List</h2>
+    {% if main_products %}
+    <div class="products-overview-grid">
+      {% for product in main_products %}
+      <div class="product-overview-card glass-card fade-in">
+        {% if product.image %}
+        <div class="product-overview-image">
+          <img src="{{ product.image.url }}" alt="{{ product.name }}" loading="lazy" />
+        </div>
+        {% endif %}
+        <div class="product-overview-body">
+          <h2 class="product-overview-title">{{ product.name }}</h2>
+          <p class="product-overview-short">{{ product.short_description }}</p>
+          <p class="product-overview-desc" data-readmore="110">{{ product.description }}</p>
+          <a href="{{ product.get_absolute_url }}" class="btn-primary">Explore {{ product.name }}</a>
+        </div>
+        {% with subs=product.sub_products.all %}
+        {% if subs %}
+        <div class="product-overview-subs">
+          <h3 class="product-overview-subs-title">Modules</h3>
+          <ul class="product-overview-subs-list" role="list">
+            {% for sub in subs %}
+            {% if sub.is_active %}
+            <li>
+              <a href="{{ sub.get_absolute_url }}" class="sub-link-chip">
+                {{ sub.name }}
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+                  <path d="M2.5 6H9.5M9.5 6L7 3.5M9.5 6L7 8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </a>
+            </li>
+            {% endif %}
+            {% endfor %}
+          </ul>
+        </div>
+        {% endif %}
+        {% endwith %}
+      </div>
+      {% endfor %}
+    </div>
+    {% else %}
+    <div class="empty-state-block glass-card">
+      <p>No products available at this time. Check back soon.</p>
+    </div>
+    {% endif %}
+  </div>
+</section>
+
+{% endblock %}

templates/products/sub_detail.html

@@ -0,0 +1,91 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}{{ sub_product.name }} — {{ main_product.name }}{% endblock %}
+{% block meta_description %}{{ sub_product.short_description }}{% endblock %}
+
+{% block content %}
+
+<section class="page-hero" aria-labelledby="sub-product-heading">
+  <div class="page-hero-blobs" aria-hidden="true">
+    <div class="blob blob--1"></div>
+    <div class="blob blob--2"></div>
+  </div>
+  <div class="container">
+    <nav class="breadcrumb" aria-label="Breadcrumb">
+      <ol class="breadcrumb-list" role="list">
+        <li><a href="{% url 'pages:home' %}">Home</a></li>
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li><a href="{% url 'products:overview' %}">Products</a></li>
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li><a href="{{ main_product.get_absolute_url }}">{{ main_product.name }}</a></li>
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li aria-current="page">{{ sub_product.name }}</li>
+      </ol>
+    </nav>
+    <div class="page-hero-content">
+      <div class="section-badge">{{ main_product.name }}</div>
+      <h1 class="page-hero-title" id="sub-product-heading">{{ sub_product.name }}</h1>
+      <p class="page-hero-subtitle">{{ sub_product.short_description }}</p>
+    </div>
+  </div>
+</section>
+
+<div class="section sub-product-layout">
+  <div class="container">
+    <div class="sub-product-grid">
+
+      <main class="sub-product-main">
+        {% if sub_product.image %}
+        <div class="sub-product-image glass-card fade-in">
+          <img src="{{ sub_product.image.url }}" alt="{{ sub_product.name }}" loading="lazy" />
+        </div>
+        {% endif %}
+
+        <div class="sub-product-desc glass-card fade-in">
+          <h2>About {{ sub_product.name }}</h2>
+          <div class="rich-content" data-readmore="220">{{ sub_product.rendered_description }}</div>
+        </div>
+
+        {% include "products/_releases_section.html" %}
+
+        {% include "partials/_page_videos.html" with videos=product_videos %}
+
+        {% include "products/_article_list.html" %}
+      </main>
+
+      <aside class="sub-product-sidebar" aria-label="Related modules">
+        <div class="sidebar-sticky">
+          <div class="sidebar-section glass-card">
+            <h3 class="sidebar-title">
+              <a href="{{ main_product.get_absolute_url }}">{{ main_product.name }}</a> Modules
+            </h3>
+            {% if siblings %}
+            <ul class="sidebar-list" role="list">
+              {% for sibling in siblings %}
+              <li>
+                <a href="{{ sibling.get_absolute_url }}" class="sidebar-link">
+                  <span class="sidebar-dot" aria-hidden="true"></span>
+                  {{ sibling.name }}
+                </a>
+              </li>
+              {% endfor %}
+            </ul>
+            {% else %}
+            <p class="sidebar-empty">No other modules in this product.</p>
+            {% endif %}
+          </div>
+          <a href="{{ main_product.get_absolute_url }}" class="btn-ghost sidebar-back-btn">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path d="M10 3L5 8L10 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+            Back to {{ main_product.name }}
+          </a>
+        </div>
+      </aside>
+
+    </div>
+  </div>
+</div>
+
+{% endblock %}

templates/products/versions_archive.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+
+{% block title %}Older releases — {% if sub_product %}{{ sub_product.name }} — {% endif %}{{ main_product.name }}{% endblock %}
+{% block meta_description %}Archived releases{% if sub_product %} for {{ sub_product.name }}{% else %} for {{ main_product.name }}{% endif %}.{% endblock %}
+
+{% block content %}
+
+<section class="page-hero" aria-labelledby="versions-heading">
+  <div class="page-hero-blobs" aria-hidden="true">
+    <div class="blob blob--1"></div>
+    <div class="blob blob--2"></div>
+  </div>
+  <div class="container">
+    <nav class="breadcrumb" aria-label="Breadcrumb">
+      <ol class="breadcrumb-list" role="list">
+        <li><a href="{% url 'pages:home' %}">Home</a></li>
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li><a href="{% url 'products:overview' %}">Products</a></li>
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li><a href="{{ main_product.get_absolute_url }}">{{ main_product.name }}</a></li>
+        {% if sub_product %}
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li><a href="{{ sub_product.get_absolute_url }}">{{ sub_product.name }}</a></li>
+        {% endif %}
+        <li aria-hidden="true" class="breadcrumb-sep">›</li>
+        <li aria-current="page">Older releases</li>
+      </ol>
+    </nav>
+    <div class="page-hero-content">
+      <div class="section-badge">{% if sub_product %}{{ sub_product.name }}{% else %}{{ main_product.name }}{% endif %}</div>
+      <h1 class="page-hero-title" id="versions-heading">Older releases</h1>
+      <p class="page-hero-subtitle">Archived versions of this {% if sub_product %}module{% else %}product{% endif %}.</p>
+    </div>
+  </div>
+</section>
+
+<section class="section versions-archive-section">
+  <div class="container">
+    {% include "products/_versions_archive_body.html" %}
+  </div>
+</section>
+
+{% endblock %}