From ebf30d4f5ff558869ea383a4d379df0182539aa5 Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@protonmail.ch>
Date: Thu, 9 Apr 2026 18:51:53 -0600
Subject: [PATCH] now the cards look fine

---
 resources/js/pages/Home.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/resources/js/pages/Home.vue b/resources/js/pages/Home.vue
index 0f46a72..481fd01 100644
--- a/resources/js/pages/Home.vue
+++ b/resources/js/pages/Home.vue
@@ -33,7 +33,7 @@ function formatPrice(cents: number): string {
                 <div
                     v-for="product in products"
                     :key="product.id"
-                    class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
+                    class="flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
                 >
                     <img
                         v-if="product.image_url"
@@ -44,10 +44,15 @@ function formatPrice(cents: number): string {
                     <div v-else class="flex h-48 items-center justify-center bg-gray-100 dark:bg-gray-700">
                         <span class="text-sm text-gray-400">No image</span>
                     </div>
-                    <div class="p-5">
+                    <div class="flex flex-1 flex-col p-5">
                         <h2 class="mb-1 font-medium capitalize">{{ product.name }}</h2>
-                        <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ product.description }}</p>
-                        <p class="text-lg font-semibold">{{ formatPrice(product.price_cents) }}</p>
+                        <p class="mb-4 grow text-sm text-gray-500 dark:text-gray-400">{{ product.description }}</p>
+                        <div class="flex items-center justify-between">
+                            <p class="text-lg font-semibold">{{ formatPrice(product.price_cents) }}</p>
+                            <button type="button" class="rounded-md bg-gray-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-gray-700 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">
+                                Add
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>