Adding the product card componets

This commit add the product UI card that will be used to list product in a grid system on the homepage and archive pages

package.json

@@ -23,6 +23,7 @@
     "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
     "redux": "^5.0.1"

src/components/productCard.tsx

@@ -0,0 +1,53 @@
+import { Link } from 'react-router-dom';
+import { FiPlus } from 'react-icons/fi';
+import { FaRegHeart } from 'react-icons/fa';
+
+function ProductCard() {
+  return (
+    <div className="product-card rounded-md shadow-md ">
+      <div className="card-img-container w-full">
+        <img
+          src="https://teddybusinessgroup.com/wp-content/uploads/2023/11/32A4G-1-300x300.webp"
+          alt="product"
+          className="product-card-img rounded-t-md w-full"
+        />
+        <span className="p-2 bg-red-600 text-white font-normal rounded-lg text-xs">
+          10% Off
+        </span>
+      </div>
+      <div className="card-content p-4">
+        <div className="flex">
+          <Link to="/">
+            <h3 className="text-xl">Product name</h3>
+          </Link>
+
+          <button
+            type="button"
+            aria-label="addToWishlist"
+            className="rounded p-2.5 bg-gray-400 text-black"
+          >
+            <FaRegHeart />
+          </button>
+        </div>
+        <p>Ullamco tempor duis mollit ullamco incididunt culpa elit commodo.</p>
+        <div className="flex">
+          <span className="text-sm">4.7</span>
+        </div>
+        <div className="flex">
+          <p className="text-2xl font-bold text-red-600">
+            $12,099
+            <span className="text-sm font-normal text-black">$18,999</span>
+          </p>
+          <button
+            type="button"
+            aria-label="addToCart"
+            className="rounded p-2.5 bg-violet-800 text-white"
+          >
+            <FiPlus />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default ProductCard;

src/pages/Home.tsx

@@ -1,5 +1,11 @@
+import ProductCard from '@/components/productCard';
+
 function Home() {
-  return <p className="text-blueBg">Welcome to Dynamites E-commerce</p>;
+  return (
+    <div className="container mx-auto grid grid-cols-4 gap-4">
+      <ProductCard />
+    </div>
+  );
 }
 
 export default Home;