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 /> */}
+      <ProductDesign />
-      {/* <ButtonDesign /> */}
+      <BookDesign />
-      {/* <ProductTags /> */}
+      <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,7 +38,6 @@ 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>
@@ -124,7 +123,6 @@ const ButtonDesign = ({
         </div>
       </div>
     </section>
-    </div>
   );
 };
 

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"),