update

src/App.js

@@ -15,7 +15,7 @@ import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
+      <ProductDesign />
       {/* <BookDesign /> */}
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
@@ -26,7 +26,7 @@ function App() {
       {/* <BlogDesign4 /> */}
       {/* <BlogDesign5 /> */}
       {/* <BlogDesign6 /> */}
-      <HeaderDesign1 />
+      {/* <HeaderDesign1 /> */}
     </div>
   );
 }

src/components/productDesign/ProductDesign.js

@@ -22,6 +22,11 @@ const ProductDesign = ({
   productTags,
   priceDirection,
   productTitleAlignment,
+  priceHolder,
+  productHolderBorder,
+  productHolderBorderColor,
+  productTitleColor,
+  productCat,
 }) => {
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
@@ -66,7 +71,9 @@ const ProductDesign = ({
       {/* product UI Design */}
       <div className="flex flex-wrap sm:flex-nowrap justify-around">
         <div className="w-full flex flex-wrap items-center justify-around my-10 px-4">
-          <div className="w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm border-2 border-productDesignBorderColor p-2 my-3">
+          <div
+            className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
+          >
             <div className="w-full relative">
               {discountPricePercent && (
                 <div className="bg-discountPriceBg absolute left-2 top-4 rounded-md px-2 py-1">
@@ -101,16 +108,21 @@ const ProductDesign = ({
             </div>
             <div className="mt-4">
               <h2
-                className={`text-productTitle leading-4 text-base 2xl:text-lg ${productTitleAlignment}`}
+                className={`text-productTitle leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
               >
                 نسخه چاپی علموم تجربه هفتم
               </h2>
               {productContent && (
-                <p className="text-justify text-productContent mt-2 text-sm leading-6">
+                <p className="text-justify text-productContent mt-2 text-xs leading-6">
                   این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
                   دیگری نیز دارد.
                 </p>
               )}
+              {productCat && (
+                <span className="text-darkCrimsonTextColor text-xs font-light">
+                  پایه سوم
+                </span>
+              )}
             </div>
             {star && (
               <div className="flex items-center mt-2">
@@ -120,36 +132,38 @@ const ProductDesign = ({
                 </span>
               </div>
             )}
-            <div
+            {priceHolder && (
-              className={`flex items-center justify-between ${priceDirection}`}
+              <div
-            >
+                className={`flex items-center justify-between ${priceDirection}`}
-              {/* price */}
+              >
-              <div className="mt-2">
+                {/* price */}
-                <div
+                <div className="mt-2">
-                  className={`${
+                  <div
-                    priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
+                    className={`${
+                      priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
+                    }`}
+                  >
+                    <span className="text-xs text-borderColor ml-2">قیمت</span>
+                    {discountPrice && (
+                      <p className="line-through text-xs text-borderColor mr-2">
+                        145<span>تومان</span>
+                      </p>
+                    )}
+                  </div>
+                  <p className="text-sm text-productPrice font-semibold inline">
+                    145.000<span>تومان</span>
+                  </p>
+                </div>
+                {/* add to cart */}
+                <button
+                  className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
+                    priceDirection.indexOf("col") !== -1 ? "w-full" : ""
                   }`}
                 >
-                  <span className="text-xs text-borderColor ml-2">قیمت</span>
+                  اضافه کردن به سبد خرید
-                  {discountPrice && (
+                </button>
-                    <p className="line-through text-xs text-borderColor mr-2">
-                      145<span>تومان</span>
-                    </p>
-                  )}
-                </div>
-                <p className="text-sm text-productPrice font-semibold inline">
-                  145.000<span>تومان</span>
-                </p>
               </div>
-              {/* add to cart */}
+            )}
-              <button
-                className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 ${
-                  priceDirection.indexOf("col") !== -1 ? "w-full" : ""
-                }`}
-              >
-                اضافه کردن به سبد خرید
-              </button>
-            </div>
             {productTags && (
               <div className="mt-2 flex flex-wrap">
                 <button className="rounded bg-productTagBg text-productTag m-1 px-4 py-1 text-xs">
@@ -163,6 +177,9 @@ const ProductDesign = ({
                 </button>
               </div>
             )}
+            <div className="bg-rangeBgColor h-3 w-full rounded mt-4">
+              <div className="bg-rangeFillBgColor h-3 w-44 rounded"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -172,15 +189,26 @@ const ProductDesign = ({
 
 export default ProductDesign;
 
+// text colors i used for product title:
+// text-darkCrimsonTextColor
+// text-productTitle
+
 ProductDesign.defaultProps = {
-  colors: true,
+  colors: false,
-  likeBtn: true,
+  likeBtn: false,
-  discount: true,
+  discount: false,
-  discountPricePercent: true,
+  discountPricePercent: false,
-  discountPrice: true,
+  discountPrice: false,
-  productContent: true,
+  productContent: false,
-  star: true,
+  star: false,
-  productTags: true,
+  productTags: false,
+  priceHolder: false,
+  productCat: true,
+  productTitleColor: "text-darkCrimsonTextColor",
+  productHolderBorder: "border-0",
+  productHolderBorderColor: "border-grayBorderColor",
   priceDirection: "flex-row",
   productTitleAlignment: "text-justify",
 };
+
+// border-2 border-productDesignBorderColor

tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
       lightBlueTextColor: "#06BACE",
       darkBlueTextColor: "#0615CE",
       darkRedTextColor: "#CE3B06",
+      darkCrimsonTextColor: "#05335F",
     }),
     backgroundColor: (theme) => ({
       ...theme("colors"),
@@ -48,6 +49,8 @@ module.exports = {
       lightSkyBlueBookBg: "#B2D6EE",
       darkNavyBlueBookBg: "#0E0E0E",
       darkCrimsonBgColor: "#132F52",
+      rangeBgColor: "#D3E9FF",
+      rangeFillBgColor: "#68A8E6",
     }),
     borderColor: (theme) => ({
       ...theme("colors"),