book design component added

src/App.js

@@ -3,13 +3,15 @@ import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 import ProductDesign from "./components/productDesign/ProductDesign";
 import ProductTags from "./components/productTags/ProductTags";
 import CounterDesign from "./components/counterDesign/CounterDesign";
+import { BookDesign } from "./components/bookDesign/BookDesign";
 
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
-      {/* <ButtonDesign /> */}
-      {/* <ProductTags /> */}
+      <ProductDesign />
+      <BookDesign />
+      <ButtonDesign />
+      <ProductTags />
       <CounterDesign />
     </div>
   );

src/components/bookDesign/BookDesign.js

@@ -0,0 +1,31 @@
+import React from "react";
+// import "./BookDesign.scss";
+
+import book from "../../assets/images/book.svg";
+import bookCover from "../../assets/images/book-white-cover.svg";
+
+export const BookDesign = () => {
+  return (
+    <section className="w-11/12 mx-auto p-4 bg-gray-300 rounded-md shadow-md my-8">
+      {/* title holder */}
+      <div className="mb-6">
+        <button className="text-lg text-productTitle text-base bg-white p-1 rounded shadow">
+          طراحی کتاب
+        </button>
+      </div>
+      {/* Book Ui Design */}
+      <section className="my-24 mx-24 flex flex-wrap justify-center">
+        <div className="flex relative">
+          <img
+            src={book}
+            alt=""
+            className="rounded-md z-40 transform -translate-x-3 w-full sm:w-72 h-full"
+          />
+          <img src={bookCover} alt="" className="z-30 h-full" />
+          <div className="bg-greenBookBg w-7 rounded-l-md transform translate-x-4 z-10"></div>
+          <div className="w-10/12 absolute left-7 -bottom-0 h-11 shadow-2xl shadow-black"></div>
+        </div>
+      </section>
+    </section>
+  );
+};

src/components/buttonDesign/ButtonDesign.js

@@ -38,93 +38,91 @@ const ButtonDesign = ({
   circleArrow,
 }) => {
   return (
-    <div>
-      <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
-        <div className="flex items-center justify-between">
-          <h2 className="text-lg text-black">طراحی دکمه های سایت</h2>
+    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg text-black">طراحی دکمه های سایت</h2>
+      </div>
+      <div className="my-4">
+        <p className="leading-10">
+          نام این کامپوننت
+          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
+            buttonDesign
+          </span>
+          است.
+        </p>
+      </div>
+      {/* Button UI Design */}
+      <div className="flex flex-wrap justify-around items-center">
+        <div>
+          <button
+            className={`flex items-center  text-sm md:text-base ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
+          >
+            اطلاعات بیشتر
+            {leftArrowWhite && (
+              <img
+                src={whiteLeftArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {rightArrowWhite && (
+              <img
+                src={whiteRightArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {upwardArrowWhite && (
+              <img
+                src={whiteUpwardArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {downwardArrowWhite && (
+              <img
+                src={whiteDownwardArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {leftArrowBlack && (
+              <img
+                src={blackLeftArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {rightArrowBlack && (
+              <img
+                src={blackRightArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {upwardArrowBlack && (
+              <img
+                src={blackUpwardArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {downwardArrowBlack && (
+              <img
+                src={blackDownwardArrow}
+                alt=""
+                className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
+              />
+            )}
+            {circleArrow && (
+              <span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}>
+                <img src={whiteLeftArrow} alt="" className="w-4" />
+              </span>
+            )}
+          </button>
         </div>
-        <div className="my-4">
-          <p className="leading-10">
-            نام این کامپوننت
-            <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
-              buttonDesign
-            </span>
-            است.
-          </p>
-        </div>
-        {/* Button UI Design */}
-        <div className="flex flex-wrap justify-around items-center">
-          <div>
-            <button
-              className={`flex items-center  text-sm md:text-base ${buttonBgColor} ${buttonTextColor} ${buttonBorder} ${buttonBorderColor} ${buttonBorderRadius} ${buttonPaddingX} ${buttonPaddingY}`}
-            >
-              اطلاعات بیشتر
-              {leftArrowWhite && (
-                <img
-                  src={whiteLeftArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {rightArrowWhite && (
-                <img
-                  src={whiteRightArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {upwardArrowWhite && (
-                <img
-                  src={whiteUpwardArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {downwardArrowWhite && (
-                <img
-                  src={whiteDownwardArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {leftArrowBlack && (
-                <img
-                  src={blackLeftArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {rightArrowBlack && (
-                <img
-                  src={blackRightArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {upwardArrowBlack && (
-                <img
-                  src={blackUpwardArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {downwardArrowBlack && (
-                <img
-                  src={blackDownwardArrow}
-                  alt=""
-                  className={`${imageMarginRight} ${imageWidth} ${imageHeight} `}
-                />
-              )}
-              {circleArrow && (
-                <span className={`rounded-full p-2 mr-2 ${circleArrowBgClr} `}>
-                  <img src={whiteLeftArrow} alt="" className="w-4" />
-                </span>
-              )}
-            </button>
-          </div>
-        </div>
-      </section>
-    </div>
+      </div>
+    </section>
   );
 };
 

tailwind.config.js

@@ -41,6 +41,7 @@ module.exports = {
       lightBlueBgColor: "#8891FC11", //opacity should be 10 % instead of 100%
       lightGreenBgColor: "#5DCE0611", //opacity should be 3 % instead of 100%
       lightPurpleBgColor: "#A680FF11", //opacity should be 8 % instead of 100%
+      greenBookBg: "#5DA041",
     }),
     borderColor: (theme) => ({
       ...theme("colors"),