src/components/bookDesign/BookDesign.js

@@ -4,27 +4,21 @@ import bookPage from "../../assets/images/Path2.svg";
 
 const BookDesign = () => {
   return (
-    <section>
-      <section className="my-24 mx-24 flex">
-        <div className="flex relative ">
-          <img
-            src={book}
-            alt=""
-            className="rounded-md z-40 transform -translate-x-3 w-72 h-full"
-          />
-          <img src={bookPage} 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-0 -bottom-0 h-12 shadow-2xl shadow-black"></div>
-        </div>
-      </section>
-
-      {/* <section className="m-52">
-        <div className="relative flex justify-center w-1/6 text-center rounded-md">
-          <img src={book} alt="" className=" rounded-sm z-20" />
-          <img src={bookPage} alt="" className="z-10" />
-          <div className="w-full bg-greenBookBg rounded-l-md transform translate-x-6"></div>
-        </div>
-      </section> */}
+    <section className="my-24 mx-24 flex">
+      <div className="flex relative bg-rose-400">
+        <img
+          src={book}
+          alt=""
+          className="rounded-md z-40 transform -translate-x-2"
+        />
+        <img src={bookPage} alt="" className="z-30" />
+        <div className="bg-greenBookBg w-4 rounded-l-md transform translate-x-3 z-10"></div>
+        {/* <div className="bg-greenBookBg rounded-l-md w-20 transform translate-x-4 z-10"></div> */}
+        <div
+          className="absolute left-0 -bottom-0 h-8 rounded-full z-50 shadow-lg bg-slate-700"
+          style={{ width: 216 }}
+        ></div>
+      </div>
     </section>
   );
 };

src/index.scss

@@ -10,5 +10,4 @@
 body {
   font-family: iransans-medium;
   direction: rtl;
-  // background-color: tan;
 }