update 7 files

src/components/Advertisements/Design1/index.js

@@ -1,8 +1,9 @@
 import React from "react";
+import Button from "../../Button";
 
 const AdvertisementDesign1 = () => {
   return (
-    <div className="w-72 h-96 rounded-3xl relative overflow-hidden bg-[#E3F2FF]">
+    <div className="w-[320px] h-[396px] bg-[#E3F2FF] rounded-3xl relative overflow-hidden">
       <div
         style={{
           width: "calc(100vw / 10)",
@@ -10,7 +11,7 @@ const AdvertisementDesign1 = () => {
           left: "20%",
           top: "15%",
         }}
-        className="rounded-full absolute bg-blue-200 bg-opacity-30 backdrop-filter backdrop-blur-md z-30"
+        className="bg-blue-200 bg-opacity-30 absolute rounded-full backdrop-filter backdrop-blur-md z-30"
       ></div>
       <div
         style={{
@@ -19,7 +20,7 @@ const AdvertisementDesign1 = () => {
           right: "25%",
           bottom: "4%",
         }}
-        className="rounded-full absolute bg-purple-200 bg-opacity-30 backdrop-filter backdrop-blur-md"
+        className="bg-purple-200 bg-opacity-30 absolute rounded-full backdrop-filter backdrop-blur-md"
       ></div>
       <div
         style={{
@@ -28,18 +29,19 @@ const AdvertisementDesign1 = () => {
           right: "3%",
           top: "15%",
         }}
-        className="rounded-full absolute bg-green-200 bg-opacity-40 backdrop-filter backdrop-blur-md"
+        className="bg-green-200 bg-opacity-40 absolute rounded-full backdrop-filter backdrop-blur-md"
       ></div>
-      <div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10 z-50">
+      <div className="w-full h-full flex flex-col justify-center p-10 absolute right-0 bottom-0 z-50">
         <h2 className="text-lg">تبلیغات دانوینی</h2>
-        <p className="text-sm text-justify leading-6 mt-2">
+        <p className="mt-2 text-sm text-justify leading-6">
           لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
           از طراحان گرافیک است.
         </p>
       </div>
-      <button className="rounded-sm text-base border p-3 w-6/12 absolute left-1/2 bottom-2 transform -translate-x-1/2 -translate-y-1/2 z-50">
+      <Button
-        دانلود اپلیکیشن
+        text="دانلود اپلیکیشن"
-      </button>
+        className="p-3 text-base rounded-sm border absolute left-1/2 bottom-0 transform -translate-x-1/2 -translate-y-1/2 z-50"
+      />
     </div>
   );
 };

src/components/Advertisements/Design2/index.js

@@ -1,54 +1,42 @@
 import React from "react";
+import Button from "../../Button";
 
 const AdvertisementDesign2 = () => {
   return (
-    <section className="mx-auto bg-white m-10 w-4/12  p-2">
+    <div className="w-fit h-[226px] relative bg-[#E3F2FF] rounded-3xl">
-      <div
+      <div className="w-8/12 flex flex-col justify-center p-10">
-        className="h-56 rounded-3xl relative"
+        <h2 className="text-lg">تبلیغات دانوینی</h2>
-        style={{ backgroundColor: "#E3F2FF" }}
+        <p className="text-sm text-justify leading-6 mt-2">
-      >
+          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده
-        <div className="flex flex-col justify-center p-10 w-7/12">
+          از طراحان گرافیک است.
-          <h2 className="text-lg">تبلیغات دانوینی</h2>
+        </p>
-          <p className="text-sm text-justify leading-6 mt-2">
+        <Button
-            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+          text="دانلود اپلیکیشن"
-            استفاده از طراحان گرافیک است.
+          className="w-fit self-end p-3 bg-[#132F52] text-sm text-white border rounded-lg"
-          </p>
+        />
-          <button className="rounded-lg text-sm border p-3 w-8/12 mx-auto bg-darkCrimsonBgColor text-white mt-2">
-            دانلود اپلیکیشن
-          </button>
-        </div>
-        <div
-          style={{
-            backgroundColor: "#00FFFF33",
-            width: "calc(100vw / 15)",
-            height: "calc(100vw / 15)",
-            left: "20%",
-            top: "15%",
-          }}
-          className="rounded-full absolute z-20 backdrop-filter backdrop-blur-md"
-        ></div>
-        <div
-          style={{
-            backgroundColor: "#6E6EEF66",
-            width: "calc(100vw / 10)",
-            height: "calc(100vw / 10)",
-            left: "7%",
-            bottom: "-15%",
-          }}
-          className="rounded-full absolute z-10 backdrop-filter backdrop-blur-md"
-        ></div>
-        <div
-          style={{
-            backgroundColor: "white",
-            width: "calc(100vw / 12)",
-            height: "calc(100vw / 12)",
-            left: "0%",
-            top: "10%",
-          }}
-          className="rounded-full absolute backdrop-filter backdrop-blur-md"
-        ></div>
       </div>
-    </section>
+      <div
+        style={{
+          width: "calc(100vw / 15)",
+          height: "calc(100vw / 15)",
+        }}
+        className="bg-[#00FFFF33] absolute left-[20%] top-[15%] rounded-full backdrop-filter backdrop-blur-md z-20"
+      ></div>
+      <div
+        style={{
+          width: "calc(100vw / 10)",
+          height: "calc(100vw / 10)",
+        }}
+        className="bg-[#6E6EEF66] absolute left-[4%] top-[7%] rounded-full backdrop-filter backdrop-blur-md z-10"
+      ></div>
+      <div
+        style={{
+          width: "calc(100vw / 12)",
+          height: "calc(100vw / 12)",
+        }}
+        className="bg-white absolute left-[14%] bottom-[2%] rounded-full backdrop-filter backdrop-blur-md"
+      ></div>
+    </div>
   );
 };
 

src/components/Button/index.js

@@ -15,7 +15,7 @@ const Button = ({
       {text}
       {icon && (
         <span className={`${iconHolderClassName}`}>
-          <img src={icon} alt="" className={`${iconClassName}`} />
+          <img src={icon} alt="icon" className={`${iconClassName}`} />
         </span>
       )}
     </button>

src/redux/data.js

@@ -4,9 +4,6 @@ import Design2D from "../components/Design2D";
 import AddToCartCard from "../components/AddToCart";
 import Advertisements from "../components/Advertisements";
 
-import AdvertisementDesign1 from "../components/Advertisement/design1";
-import AdvertisementDesign2 from "../components/Advertisement/design2";
-
 // import ButtonDesign from "./components/buttonDesign/ButtonDesign";
 // import ProductDesign from "./components/productDesign/ProductDesign";
 // import ProductTags from "./components/productTags/ProductTags";
@@ -149,26 +146,6 @@ const components = [
       code: null,
     },
   },
-  {
-    name: "Advertisement",
-    author: "Andalib",
-    props: [],
-    content: {
-      name: "Design1",
-      component: <AdvertisementDesign1 />,
-      code: null,
-    },
-  },
-  {
-    name: "Advertisement",
-    author: "Andalib",
-    props: [],
-    content: {
-      name: "Design2",
-      component: <AdvertisementDesign2 />,
-      code: null,
-    },
-  },
 ];
 
 export default components;