Add content to shop page

src/allmende_payment_system/templates/shop.html.jinja

@@ -0,0 +1,61 @@
+{% extends "base.html.jinja" %}
+{% block content %}
+    <!-- Shop Landing Page Header -->
+    <div class="mb-4">
+        <h2 class="h4 mb-3">Shop</h2>
+        <p class="text-muted">In welchem Bereich möchtest du einkaufen?</p>
+    </div>
+
+<div class="row g-3">
+    {% for area in areas %}
+    <div class="col-md-6 col-lg-4">
+        <a href="#" class="text-decoration-none">
+            <div class="card h-100 border-0 shadow-sm">
+                <div class="card-body d-flex align-items-center p-3">
+                    <!-- Image on the left -->
+                    <div class="me-3" style="width: 120px; flex-shrink: 0;">
+                        <img
+                            src="/static/img/{{ area.image_path }}"
+                            alt="{{ area.name }}"
+                            class="img-fluid rounded"
+                            style="max-height: 100px; width: 100%; object-fit: contain;"
+                        >
+                    </div>
+                    <!-- Title and description on the right -->
+                    <div class="flex-grow-1">
+                        <h5 class="card-title mb-1">{{ area.name }}</h5>
+                        <p class="card-text text-muted small mb-0">{{ area.description or '' }}</p>
+                    </div>
+                </div>
+            </div>
+        </a>
+    </div>
+    {% endfor %}
+</div>
+
+    <!-- Optional: Featured Products Section -->
+{#    <div class="mt-5">#}
+{#        <div class="d-flex justify-content-between align-items-center mb-3">#}
+{#            <h2 class="h4 mb-0">Featured Products</h2>#}
+{#            <a href="#" class="btn btn-outline-primary btn-sm">View All</a>#}
+{#        </div>#}
+{#        <div class="alert alert-info">#}
+{#            Featured products will appear here#}
+{#        </div>#}
+{#    </div>#}
+{% endblock %}
+
+{% block styles %}
+<style>
+    /* Hover effect for shop tiles */
+    .hover-shadow:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+        transition: all 0.3s ease;
+    }
+    .card {
+        border: none;
+        transition: all 0.3s ease;
+    }
+</style>
+{% endblock %}