mohamad
89 lines
3.2 KiB
HTML
89 lines
3.2 KiB
HTML
{% 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" aria-labelledby="product-desc-heading">
|
||
<div class="container">
|
||
<div class="product-detail-intro glass-card fade-in">
|
||
<h2 class="sr-only" id="product-desc-heading">About {{ main_product.name }}</h2>
|
||
{% if main_product.image %}
|
||
<div class="product-detail-image">
|
||
<img src="{{ main_product.image.url }}" alt="{{ main_product.name }}" loading="lazy" />
|
||
</div>
|
||
{% endif %}
|
||
<div class="product-detail-text">
|
||
<p class="product-detail-desc">{{ main_product.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{% 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">{{ 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 %}
|