initial commit

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 %}