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

@@ -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]">

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>
+  <div class="flex justify-between mt-4">
-  <p class="text-gray-400 text-xs">⭐4.5</p>
+    <p class="text-sm truncate font-medium text-gray-800 hover:text-blue-500">
-  <p class="text-gray-400 text-xs">
+      {{ product.title }}
-    Price:
-    <span class="line-through italic mr-1">{{ product.actualPrice }}</span>
-    <span class="font-bold">{{ product.listPrice }}/-</span>
     </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>

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;
 

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" />
   }

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>

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,