From 27a04c6458b4946d122467a498b73fd367e9ade5 Mon Sep 17 00:00:00 2001
From: kusowl <kushal.saha@outlook.com>
Date: Wed, 11 Mar 2026 11:25:07 +0530
Subject: [PATCH] minor: some quick design and color changes

make the dropdown hover color from gradient to simple gray shade
make the button 3d
change the product card design in home page
add add to cart button in the home page
change design of button ghost
---
 src/app/core/layouts/header/header.html       |  2 +-
 .../components/product-card/product-card.html | 26 +++++++++++++------
 .../components/product-card/product-card.ts   |  4 ++-
 src/app/features/product/product.html         |  2 +-
 .../product/show-product/show-product.html    | 10 +++----
 src/styles.css                                |  8 +++---
 6 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/app/core/layouts/header/header.html b/src/app/core/layouts/header/header.html
index cc34412..c2c6a7e 100644
--- a/src/app/core/layouts/header/header.html
+++ b/src/app/core/layouts/header/header.html
@@ -3,7 +3,7 @@
     class="bg-gray-50 wrapper py-4 flex gap-x-5 sm:gap-x-10 items-center shadow-lg shadow-gray-400/20"
   >
     <div class="">
-      <a class="px-3 py-1 bg-gray-800 text-white" href="/">eKart</a>
+      <a class="px-3 py-1 bg-blue-600 text-white" href="/">eKart</a>
     </div>
 
     <div class="flex-1 grid grid-cols-[1fr_auto]">
diff --git a/src/app/features/product/components/product-card/product-card.html b/src/app/features/product/components/product-card/product-card.html
index 73f1c6f..6a68712 100644
--- a/src/app/features/product/components/product-card/product-card.html
+++ b/src/app/features/product/components/product-card/product-card.html
@@ -5,15 +5,25 @@
     class="absolute top-5 right-5"
   />
   <!--Product image-->
-  <div class="bg-gray-200 rounded-xl h-40">
+  <div class="bg-gray-200 rounded-xl h-60">
     <img [src]="product.productImages[0]" alt="" class="object-cover rounded-xl w-full h-full" />
   </div>
 
-  <p class="text-gray-400 text-sm truncate">{{ product.title }}</p>
-  <p class="text-gray-400 text-xs">⭐4.5</p>
-  <p class="text-gray-400 text-xs">
-    Price:
-    <span class="line-through italic mr-1">{{ product.actualPrice }}</span>
-    <span class="font-bold">{{ product.listPrice }}/-</span>
-  </p>
+  <div class="flex justify-between mt-4">
+    <p class="text-sm truncate font-medium text-gray-800 hover:text-blue-500">
+      {{ product.title }}
+    </p>
+    <p class="text-gray-400 text-xs">⭐4.5</p>
+  </div>
+  <div class="flex justify-between mt-4">
+    <div class="">
+      <p class="text-gray-400 text-xs line-through italic">Rs. {{ product.listPrice }}</p>
+      <p class="font-medium text-lg">Rs. {{ product.actualPrice }}</p>
+    </div>
+    <div>
+      <button class="btn btn-primary p-3" title="Add to cart">
+        <lucide-angular [img]="ShoppingCartIcon" class="w-4" />
+      </button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/features/product/components/product-card/product-card.ts b/src/app/features/product/components/product-card/product-card.ts
index 04e3263..6abd996 100644
--- a/src/app/features/product/components/product-card/product-card.ts
+++ b/src/app/features/product/components/product-card/product-card.ts
@@ -2,15 +2,17 @@ import { Component, inject, Input } from "@angular/core";
 import { ProductModel } from "../../../../core/models/product.model";
 import { Router } from "@angular/router";
 import { FavoriteButton } from "../../../../shared/components/favorite-button/favorite-button";
+import { LucideAngularModule, ShoppingCart } from "lucide-angular";
 
 @Component({
   selector: "app-product-card",
   standalone: true,
-  imports: [FavoriteButton],
+  imports: [FavoriteButton, LucideAngularModule],
   templateUrl: "./product-card.html",
 })
 export class ProductCard {
   readonly router = inject(Router);
+  readonly ShoppingCartIcon = ShoppingCart;
 
   @Input() product!: ProductModel;
 
diff --git a/src/app/features/product/product.html b/src/app/features/product/product.html
index 67121c9..c94f682 100644
--- a/src/app/features/product/product.html
+++ b/src/app/features/product/product.html
@@ -4,7 +4,7 @@
   <p class="text-3xl text-gray-700 font-sans">Our Product</p>
 </section>
 
-<section class="mt-4 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 wrapper">
+<section class="mt-10 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5 gap-4 wrapper">
   @for (product of products(); track product) {
   <app-product-card [product]="product" />
   }
diff --git a/src/app/features/product/show-product/show-product.html b/src/app/features/product/show-product/show-product.html
index 8ccf6be..c90e589 100644
--- a/src/app/features/product/show-product/show-product.html
+++ b/src/app/features/product/show-product/show-product.html
@@ -23,15 +23,15 @@
           />
           <button
             (click)="prevImage()"
-            class="absolute top-45 left-2 p-2! rounded-full! btn btn-ghost"
+            class="absolute top-45 left-2 p-2! rounded-full! btn btn-ghost backdrop-blur-xs"
           >
-            <lucide-angular [img]="ArrowLeftIcon" class="w-4 h-4" />
+            <lucide-angular [img]="ArrowLeftIcon" class="w-4 h-4 text-gray-200" />
           </button>
           <button
             (click)="nextImage()"
-            class="absolute top-45 right-2 p-2! rounded-full! btn btn-ghost"
+            class="absolute top-45 right-2 p-2! rounded-full! btn btn-ghost backdrop-blur-xs"
           >
-            <lucide-angular [img]="ArrowRightIcon" class="w-4 h-4" />
+            <lucide-angular [img]="ArrowRightIcon" class="w-4 h-4 text-gray-200" />
           </button>
         </div>
 
@@ -104,7 +104,7 @@
             <input
               type="text"
               value="1"
-              class="w-12 text-center btn btn-ghost rounded-none! border-x-0!"
+              class="w-12 text-center border-y border-gray-300"
               readonly
             />
             <button class="px-4 py-2 btn btn-ghost rounded-l-none!">+</button>
diff --git a/src/styles.css b/src/styles.css
index 4ecbfd4..0f9fd15 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -25,15 +25,15 @@ body {
 }
 
 .btn-ghost {
-  @apply text-gray-600 border border-gray-300 hover:bg-gray-800 hover:text-gray-200;
+  @apply text-gray-600 border border-b-3 border-gray-300 hover:bg-gray-200/70 hover:text-gray-700;
 }
 
 .btn-black {
-  @apply text-gray-100 bg-gray-800 border border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
+  @apply text-gray-100 bg-gray-800 border border-b-3 border-gray-800 hover:bg-gray-200 hover:text-gray-800 hover:border-gray-400;
 }
 
 .btn-primary {
-  @apply text-gray-100 bg-blue-700 border border-blue-800 hover:bg-blue-200 hover:text-blue-800 hover:border-blue-400;
+  @apply text-blue-100 bg-blue-600 border border-b-3 border-blue-900 hover:bg-blue-700;
 }
 
 .card {
@@ -70,7 +70,7 @@ body {
 }
 
 .dropdown li {
-  @apply rounded-lg hover:bg-linear-to-r hover:from-teal-300 hover:to-transparent px-5 py-1;
+  @apply rounded-lg hover:bg-linear-to-r hover:bg-gray-100 px-5 py-1;
 }
 
 h1,