mohamad
92 lines
3.4 KiB
HTML
92 lines
3.4 KiB
HTML
{% 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 %}
|