From 2de5485690b02d57f33ed92a9a744b0e63a9c1cd Mon Sep 17 00:00:00 2001
From: "CTO (Paperclip Agent)" <cto@basicstack.de>
Date: Sat, 11 Jul 2026 15:50:03 +0000
Subject: [PATCH] Change package card design to vertical centered layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented design specification from DEV-247:
- Changed card layout from horizontal to vertical centered
- Logo centered at top (64×64px, increased from 56px)
- Title centered below logo with 16px gap
- Description centered below title with 12px gap
- Added card elevation shadow by default
- Links centered at bottom with 20px top gap
- All content centered with text-align: center
- Typography: title 20px/600, description 14px
- Colors: text-primary for title, text-secondary for description

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 pages/packages/index.vue | 79 +++++++++++++++++-----------------------
 1 file changed, 33 insertions(+), 46 deletions(-)

diff --git a/pages/packages/index.vue b/pages/packages/index.vue
index 324ac9f..ffad763 100644
--- a/pages/packages/index.vue
+++ b/pages/packages/index.vue
@@ -15,27 +15,18 @@
           :to="`/packages/${pkg.slug}`"
           class="package-card card"
         >
-          <div class="package-header">
-            <img
-              v-if="pkg.logo"
-              :src="getAssetUrl(pkg.logo)"
-              :alt="pkg.name + ' logo'"
-              class="package-logo"
-            />
-            <div v-else class="package-logo-placeholder">{{ pkg.name[0] }}</div>
-            <div class="package-info">
-              <h2 class="package-name">{{ pkg.name }}</h2>
-              <div class="package-meta">
-                <span v-if="pkg.screenshots && pkg.screenshots.length > 0" class="badge badge-primary">
-                  {{ pkg.screenshots.length }} screenshot{{ pkg.screenshots.length !== 1 ? 's' : '' }}
-                </span>
-                <span v-if="pkg.deployment_details && pkg.deployment_details.length > 0" class="badge badge-primary">
-                  Deploy docs
-                </span>
-              </div>
-            </div>
-          </div>
+          <img
+            v-if="pkg.logo"
+            :src="getAssetUrl(pkg.logo)"
+            :alt="pkg.name + ' logo'"
+            class="package-logo"
+          />
+          <div v-else class="package-logo-placeholder">{{ pkg.name[0] }}</div>
+
+          <h2 class="package-name">{{ pkg.name }}</h2>
+
           <p class="package-desc">{{ pkg.short_description }}</p>
+
           <div class="package-links" v-if="pkg.website_url || pkg.documentation_url">
             <span v-if="pkg.website_url" class="link-badge">Website</span>
             <span v-if="pkg.documentation_url" class="link-badge">Docs</span>
@@ -92,63 +83,59 @@ useSeoMeta({
   transition: box-shadow 0.2s, transform 0.2s;
   display: flex;
   flex-direction: column;
-  gap: var(--space-md);
+  align-items: center;
+  text-align: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
+  min-width: 280px;
+  max-width: 360px;
 }
 
 .package-card:hover {
-  box-shadow: var(--shadow-lg);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);
   transform: translateY(-2px);
   text-decoration: none;
 }
 
-.package-header {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-md);
-}
-
 .package-logo {
-  width: 56px;
-  height: 56px;
+  width: 64px;
+  height: 64px;
   object-fit: contain;
-  flex-shrink: 0;
+  margin-bottom: var(--space-md);
 }
 
 .package-logo-placeholder {
-  width: 56px;
-  height: 56px;
+  width: 64px;
+  height: 64px;
   border-radius: var(--radius-md);
   background: var(--color-primary);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   font-weight: 700;
-  flex-shrink: 0;
+  margin-bottom: var(--space-md);
 }
 
 .package-name {
-  font-size: 1.125rem;
-  margin: 0 0 var(--space-xs);
-}
-
-.package-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-xs);
+  font-size: var(--text-xl);
+  font-weight: 600;
+  margin: 0 0 var(--space-sm);
+  color: var(--color-text-primary);
 }
 
 .package-desc {
-  color: var(--color-text-muted);
-  font-size: 0.9375rem;
-  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  margin: 0 0 20px;
   flex: 1;
 }
 
 .package-links {
   display: flex;
   gap: var(--space-sm);
+  justify-content: center;
 }
 
 .link-badge {