update

src/components/bookDesign/BookDesign.js

@@ -4,21 +4,27 @@ import bookPage from "../../assets/images/Path2.svg";
 
 const BookDesign = () => {
   return (
-    <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>
+      <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>
   );
 };

src/index.scss

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