final home desing

nonpacks/templates/landing/home.html

@@ -78,26 +78,40 @@
     </div>
 </div>
 
-<div class="home-section">
-    <div class="home-section-header">
-        <h2>Latest packs</h2>
-        <a href="{% url 'library:browse' %}" class="home-section-link">View all <i class="fas fa-arrow-right"></i></a>
-    </div>
-
-    <div class="pack-grid">
-        {% for project in latest_projects %}
-            {% include 'library/_project_card.html' %}
-        {% empty %}
-            <div class="pack-card pack-card-empty">
-                <div class="pack-card-thumb">
-                    <i class="fas fa-box-open"></i>
-                </div>
-                <div class="pack-card-body">
-                    <h3>No packs yet</h3>
-                    <p class="pack-card-desc">Be the first to share a pack.</p>
+{% for row in home_rows %}
+<div class="home-cat-row">
+    {% for section in row %}
+    <div class="home-cat-block">
+        <div class="home-section-header">
+            <h2>{{ section.label }}</h2>
+            <a href="{% url 'library:browse' %}?category={{ section.value }}" class="home-section-link">View all <i class="fas fa-arrow-right"></i></a>
+        </div>
+        <div class="home-cat-cols">
+            <div class="home-cat-col">
+                <h3 class="home-cat-head"><i class="fas fa-fire"></i> Popular</h3>
+                <div class="pack-row-list">
+                    {% for project in section.popular %}
+                        {% include 'library/_project_card_row.html' %}
+                    {% empty %}
+                        <p class="empty-hint">None yet.</p>
+                    {% endfor %}
                 </div>
             </div>
-        {% endfor %}
+            <div class="home-cat-divider" role="separator"></div>
+            <div class="home-cat-col">
+                <h3 class="home-cat-head"><i class="fas fa-clock"></i> Recent</h3>
+                <div class="pack-row-list">
+                    {% for project in section.recent %}
+                        {% include 'library/_project_card_row.html' %}
+                    {% empty %}
+                        <p class="empty-hint">None yet.</p>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
     </div>
+    {% if not forloop.last %}<div class="home-cat-row-divider" role="separator"></div>{% endif %}
+    {% endfor %}
 </div>
+{% endfor %}
 {% endblock %}

nonpacks/templates/library/_project_card_row.html

@@ -0,0 +1,21 @@
+{% load static %}
+<a href="{% url 'library:project_detail' project.slug %}" class="pack-card-row">
+    <div class="pack-card-row-thumb">
+        {% if project.thumbnail %}
+            <img src="{{ project.thumbnail_url }}" alt="">
+        {% else %}
+            <i class="fas fa-box-open pack-card-thumb-icon"></i>
+        {% endif %}
+    </div>
+    <div class="pack-card-row-body">
+        <h4>{{ project.title }}</h4>
+        <p class="pack-card-row-author"><i class="fas fa-user"></i> {{ project.owner.username }}</p>
+        {% with latest=project.versions.all|first %}
+        <p class="pack-card-row-meta">
+            <span><i class="fas fa-tag"></i> {{ latest.version_name|default:"no versions" }}</span>
+            <span><i class="fas fa-download"></i> {{ project.downloads_total|default:project.downloads }}</span>
+            <span><i class="fas fa-thumbs-up"></i> {{ project.rating_score }}</span>
+        </p>
+        {% endwith %}
+    </div>
+</a>