From 8d2f620816b3315e751e7d697b2fe45bf37755c2 Mon Sep 17 00:00:00 2001
From: Stephany Ikebudu <stephikebudu@gmail.com>
Date: Wed, 16 Oct 2024 12:25:57 +0100
Subject: [PATCH 1/3] update product card style

---
 src/components/items.jsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/items.jsx b/src/components/items.jsx
index d752b8f..dc3f1e0 100644
--- a/src/components/items.jsx
+++ b/src/components/items.jsx
@@ -1,19 +1,25 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { TiPlus } from "react-icons/ti";
 
 const Items = (props) => {
     return (
-        <div className='w-[280px] hover:scale-105 transition duration-150 hover:shadow-2xl max-[1280px]:w-[220px] max-[1280px]:text-[14px] max-[1024px]:w-[170px] max-[1024px]:text-[13px] max-[800px]:w-[120px] max-[800px]:text-[12px] max-[500px]:w-[160px]'>
+        <div className='shadow-md p-2 xl:p-3 rounded-lg xl:rounded-2xl w-[280px] hover:scale-105 transition duration-150 hover:shadow-2xl max-[1280px]:w-[220px] max-[1280px]:text-[14px] max-[1024px]:w-[170px] max-[1024px]:text-[13px] max-[800px]:w-[120px] max-[800px]:text-[12px] max-[500px]:w-[160px]'>
             <Link to={`/product/${props.id}`} onClick={() => window.scrollTo(0, 0)}>
-                <img className='w-full h-auto max-[1280px]:w-full max-[1024px]:w-full max-[800px]:w-full max-[500px]:w-full' src={props.image} alt={props.name} />
+                <img className='rounded-md xl:rounded-lg shadow w-full h-auto max-[1280px]:w-full max-[1024px]:w-full max-[800px]:w-full max-[500px]:w-full' src={props.image} alt={props.name} />
             </Link>
             <p className='mt-2 mb-2 text-center'>{props.name}</p>
-            <div className='item-prices flex justify-between items-center'>
-                <div className='item-price-new text-[#374151] text-[18px] font-bold max-[1280px]:text-[14px] max-[1024px]:text-[13px] max-[800px]:text-[12px]'>
-                    ${props.new_price}
+            <div className='flex items-center justify-between'>
+                <div className='item-prices flex gap-2 items-center'>
+                    <div className='item-price-new text-[#374151] text-[18px] font-bold max-[1280px]:text-[14px] max-[1024px]:text-[13px] max-[800px]:text-[12px]'>
+                        ${props.new_price}
+                    </div>
+                    <div className='items-price-old text-[#8c8c8c] text-[18px] font-semibold line-through max-[1280px]:text-[14px] max-[1024px]:text-[13px] max-[800px]:text-[12px]'>
+                        ${props.old_price}
+                    </div>
                 </div>
-                <div className='items-price-old text-[#8c8c8c] text-[18px] font-semibold line-through max-[1280px]:text-[14px] max-[1024px]:text-[13px] max-[800px]:text-[12px]'>
-                    ${props.old_price}
+                <div className='flex items-center justify-center rounded-full bg-gradient-to-r from-[#5A585A] to-[#090947] h-5 w-5'>
+                    <TiPlus color="white" />
                 </div>
             </div>
             

From 17bbc18fc139ca12e6dcbcac0d373e2c5b4153e9 Mon Sep 17 00:00:00 2001
From: Stephany Ikebudu <stephikebudu@gmail.com>
Date: Wed, 16 Oct 2024 12:27:30 +0100
Subject: [PATCH 2/3] implement responsive design and maintain grid consistency
 across categories section

---
 src/pages/ShopCategory.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ShopCategory.jsx b/src/pages/ShopCategory.jsx
index e66be3a..3dc2bf4 100644
--- a/src/pages/ShopCategory.jsx
+++ b/src/pages/ShopCategory.jsx
@@ -30,7 +30,7 @@ const ShopCategory = (props) => {
       </div>
 
       {/* Updated grid settings for spacing on mobile */}
-      <div className='mt-[20px] mb-[20px] mx-10 md:mx-40 grid grid-cols-2 md:grid-cols-4 gap-5'>
+      <div className='mt-[20px] mb-[20px] mx-10 md:mx-40 flex flex-wrap justify-center gap-6'>
         {all_product.map((item, i) => {
           if (props.category === item.category) {
             return (

From 66271e039d5759b8e47f3b422528b93649f7aaa2 Mon Sep 17 00:00:00 2001
From: Stephany Ikebudu <stephikebudu@gmail.com>
Date: Wed, 16 Oct 2024 13:11:41 +0100
Subject: [PATCH 3/3] style: minor update to review style

---
 src/components/items.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/items.jsx b/src/components/items.jsx
index fec4cef..ebabedc 100644
--- a/src/components/items.jsx
+++ b/src/components/items.jsx
@@ -25,7 +25,7 @@ const Item = (props) => {
                 </div>
             </div>
 
-            <div className='flex items-center justify-start gap-1 mt-2'>
+            <div className='flex items-center justify-start gap-1 mt-3'>
                 {Array.from({ length: 5 }, (_, index) => (
                     <img
                         key={index}
@@ -37,8 +37,8 @@ const Item = (props) => {
             </div>
 
             {/* Review Count */}
-            <div className='text-black text-sm text-left mt-1 ml-1'>
-                ({props.reviewCount} reviews)
+            <div className='text-[#8c8c8c] font-extrabold text-xs text-left mt-1 ml-1'>
+                {props.reviewCount} reviews
             </div>
             
         </div>