Add "more info" and "add to cart" buttons on the product cards (#9)

* Enhance ProductCard component with action buttons and improved layout

* Fix selector for product title styling and adjust padding on hover

* Refactor CSS variables for product card and button styles into global.css

* Fix image path in ProductCard component for correct asset loading

Author: Vianpyro

src/components/ProductCard.astro

@@ -7,16 +7,17 @@ const { product_name } = Astro.props;
 
 <Fragment>
     <div class="product-card" style=`background-image: url("product/${product_id}.png");`>
-        <h1>{product_name}</h1>
+        <div class="product-card-content">
+            <h1>{product_name}</h1>
+            <div class="product-card-actions">
+                <button class="product-more-info">More info</button>
+                <button class="product-add-cart">Add to cart</button>
+            </div>
+        </div>
     </div>
 </Fragment>
 
 <style>
-    :root {
-        --card-size-wide: 350px;
-        --card-size-narrow: calc(var(--card-size-wide) / 2);
-    }
-
     .product-card {
         align-items: center;
         background-position: center;
@@ -29,18 +30,70 @@ const { product_name } = Astro.props;
         justify-content: end;
         min-width: var(--card-size-wide);
         min-height: var(--card-size-wide);
+        position: relative;
+        overflow: hidden;
+    }
+
+    .product-card-content {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
     }
 
     .product-card > * {
         background-color: light-dark(rgb(255 255 255 / 0.5), rgb(0 0 0 / 0.5));
         border-radius: inherit;
         overflow: hidden;
-        padding: var(--spacing-small);
         text-align: center;
         width: 100%;
     }
 
-    @media screen and (width<=850px) {
+    .product-card-content > h1 {
+        padding: var(--spacing-small);
+    }
+
+    .product-card-actions {
+        cursor: default;
+        display: flex;
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+        width: 100%;
+    }
+
+    .product-card-actions button {
+        border: none;
+        border-radius: var(--button-border-radius);
+        cursor: pointer;
+        font-size: var(--button-font-size);
+        padding: var(--button-padding);
+        width: 100%;
+    }
+
+    .product-card-actions button.product-more-info {
+        background-color: light-dark(#409eff, #3178c6);
+    }
+
+    .product-card-actions button.product-add-cart {
+        background-color: light-dark(#41b883, #1f883d);
+    }
+
+    .product-card:hover .product-card-actions {
+        max-height: calc(2rem + var(--spacing-small));
+        opacity: 1;
+        transition-delay: 0.05s;
+    }
+
+    .product-card:hover .product-card-content > h1 {
+        padding: calc(var(--spacing-small) / 2);
+    }
+
+    .product-card-actions button:hover {
+        filter: brightness(var(--button-hover-brightness));
+    }
+
+    @media screen and (width <= 850px) {
         h1 {
             font-size: 0.75rem;
         }

src/styles/global.css

@@ -1,21 +1,37 @@
 :root {
     color-scheme: light dark;
 
-    /* 
-    Define spacing sizes for margins, paddings, and gaps. 
-    Use these to ensure consistent spacing throughout the UI. 
+    /*
+    Define spacing sizes for margins, paddings, and gaps.
+    Use these to ensure consistent spacing throughout the UI.
     */
     --spacing-small: 0.4rem;
     --spacing-medium: 1.6rem;
     --spacing-large: 3.2rem;
 
-    /* 
-    Define border-radius sizes for rounded corners. 
+    /*
+    Define border-radius sizes for rounded corners.
     Use these to maintain a cohesive design for buttons, cards, and other UI elements.
     */
     --border-radius-small: 8px;
     --border-radius-medium: 16px;
     --border-radius-large: 32px;
+
+    /*
+    Product card sizes for different screen widths.
+    Use these to ensure cards are responsive and maintain a consistent size across the UI.
+     */
+    --card-size-wide: 350px;
+    --card-size-narrow: calc(var(--card-size-wide) / 2);
+
+    /*
+    Define button styles for consistent appearance across the UI.
+    Use these variables to maintain a cohesive design for buttons.
+     */
+    --button-padding: var(--spacing-small);
+    --button-font-size: 1rem;
+    --button-border-radius: var(--border-radius-small);
+    --button-hover-brightness: 1.25;
 }
 
 * {