update

src/App.js

@@ -58,13 +58,13 @@ function App() {
         {/* <Testttt /> */}
         {/* <Design2D /> */}
         {/* <Features /> */}
-        <Feedback />
+        {/* <Feedback /> */}
         {/* <Alert /> */}
         {/* <Toast /> */}
-        <ProductSuggestion />
+        {/* <ProductSuggestion /> */}
         {/* <ProductImage /> */}
-        <ProductTab />
-        {/* <ProductStatusCard /> */}
+        {/* <ProductTab /> */}
+        <ProductStatusCard />
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}

src/components/Advertisement/design1/index.js

@@ -2,23 +2,26 @@ import React from "react";
 
 const AdvertisementDesign1 = () => {
   return (
-    <section className="mx-auto bg-white m-10 w-full sm:w-8/12 md:w-5/12	lg:w-3/12	p-5 px-16">
+    <section className="mx-auto bg-white m-10 w-full sm:w-8/12 md:w-5/12 lg:w-3/12">
       <div
-        className="w-full h-96 rounded-3xl relative"
+        className="w-full h-96 rounded-3xl relative overflow-hidden"
         style={{ backgroundColor: "#E3F2FF" }}
       >
         <div
-          style={{ backgroundColor: "#00FFFF44" }}
-          className="rounded-full w-40 h-40 absolute left-1/2 top-1/2 transform -translate-x-1/4 -translate-y-3/4"
+          style={{
+            width: "calc(100vw / 8)",
+            height: "calc(100vw / 8)",
+          }}
+          className="rounded-full absolute  left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-600 bg-opacity-20 backdrop-filter backdrop-blur-md"
         ></div>
-        <div
+        {/* <div
           style={{ backgroundColor: "#6E6EEF44" }}
           className="rounded-full w-52 h-52 absolute left-1/2 top-1/2 transform -translate-x-1/4 -translate-y-1/4"
         ></div>
         <div
           style={{ backgroundColor: "#06BACE44" }}
           className="rounded-full w-52 h-52 absolute left-1/2 top-1/2 transform -translate-x-2/3 -translate-y-2/4"
-        ></div>
+        ></div> */}
         <div className="absolute right-0 bottom-0 h-full w-full flex flex-col justify-center p-10">
           <h2 className="text-lg">تبلیغات دانوینی</h2>
           <p className="text-sm text-justify leading-6 mt-2">

src/components/Advertisement/design2/index.js

@@ -18,16 +18,16 @@ const AdvertisementDesign2 = () => {
           </button>
         </div>
         <div
-          style={{ backgroundColor: "#00FFFF55" }}
-          className="rounded-full w-32 h-32 absolute left-1/4 top-1/3 transform -translate-x-1/2 -translate-y-1/2 z-20 backdrop-blur-sm"
+          style={{ backgroundColor: "#00FFFF33" }}
+          className="rounded-full w-32 h-32 absolute left-1/4 top-1/3 transform -translate-x-1/2 -translate-y-1/2 z-20 backdrop-filter backdrop-blur-md"
         ></div>
         <div
-          style={{ backgroundColor: "#6E6EEF55" }}
-          className="rounded-full w-44 h-44 absolute left-1/4 -bottom-2/4 transform -translate-x-1/2 -translate-y-1/2 z-10 backdrop-blur-sm"
+          style={{ backgroundColor: "#6E6EEF33" }}
+          className="rounded-full w-44 h-44 absolute left-1/4 -bottom-2/4 transform -translate-x-1/2 -translate-y-1/2 z-10 backdrop-filter backdrop-blur-md"
         ></div>
         <div
           style={{ backgroundColor: "white" }}
-          className="rounded-full w-44 h-44 absolute left-0 top-2 backdrop-blur-sm"
+          className="rounded-full w-44 h-44 absolute left-0 top-2 backdrop-filter backdrop-blur-md"
         ></div>
       </div>
     </section>

src/components/ProductImage/index.js

@@ -1,14 +1,34 @@
 import React from "react";
 
+import "./index.scss";
+
 import productImg from "./productImg.svg";
 
-const ProductImage = () => {
+const ProductImage = ({ images }) => {
+  console.log(images.length);
+  if (images.length > 3) {
+  }
+
   return (
     <section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg">
       <div className="w-4/12	flex flex-row h-72">
-        <div className="flex flex-col items-center ml-4 overflow-y-scroll">
-          {[0, 1, 2, 3, 4].map((item, index) => (
-            <img src={productImg} alt="" className=" w-20 rounded-sm mb-2" />
+        <div className="flex flex-col items-center justify-between ml-4 w-20 h-full bg-red-500">
+          {images.slice(0, 4).map((image, index) => (
+            <div className="relative">
+              <img
+                key={index}
+                src={productImg}
+                alt=""
+                className={`rounded-sm`}
+                style={{ height: "calc(100% - 8px)" }}
+              />
+              {/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
+              {Number(index) === 3 && (
+                <div className="absolute w-full h-full bg-black bg-opacity-40 left-0 top-0 flex justify-center items-center text-white">
+                  <strong>{images.length - 3}</strong>
+                </div>
+              )}
+            </div>
           ))}
         </div>
         <img src={productImg} alt="" className="h-full" />
@@ -16,5 +36,28 @@ const ProductImage = () => {
     </section>
   );
 };
+// {[0, 1, 2, 3, 4].map((item, index) => (
+
+//   ))}
 
 export default ProductImage;
+
+ProductImage.defaultProps = {
+  images: [
+    {
+      image: productImg,
+    },
+    {
+      image: productImg,
+    },
+    {
+      image: productImg,
+    },
+    {
+      image: productImg,
+    },
+    {
+      image: productImg,
+    },
+  ],
+};

src/components/ProductImage/index.scss

@@ -0,0 +1,9 @@
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

src/components/ProductStatusCard/index.js

@@ -21,7 +21,7 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
               key={index}
             >
               <div className="flex flex-row items-center">
-                <img src={item.icon} alt="" className="w-10 h-10" />
+                <img src={item.icon} alt="" className="w-8" />
                 <div className="flex flex-col mr-3">
                   <p className="text-sm">
                     <span className="font-bold">{item.subtitle}</span>
@@ -37,17 +37,15 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
                   )}
                 </div>
               </div>
-              {item.alertIcon && (
-                <img src={circle} alt="" className="w-8 h-8" />
-              )}
+              {item.alertIcon && <img src={circle} alt="" className="w-5" />}
             </div>
             <div className="border-b border-gray-300"></div>
           </div>
         ))}
         <div className="flex flex-col items-center">
-          <p className="text-2xl text-blue-600 mt-5 mb-2">
+          <p className="text-lg text-blue-600 mt-5 mb-2">
             {productPrice}
-            <span className="text-lg text-gray-700 font-light">تومان</span>
+            <span className="text-sm text-gray-700 font-light">تومان</span>
           </p>
           <p className="text-xs font-light text-gray-600">
             با خرید این کالا
@@ -56,7 +54,7 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
           </p>
         </div>
         <div className="w-full flex flex-col items-center">
-          <button className="w-11/12 mt-5 mb-2 rounded bg-blue-400 text-white px-5 py-4 text-lg hover:bg-blue-600 transtition ease-linear duration-300">
+          <button className="w-6/12 mt-5 mb-2 rounded bg-blue-400 text-white p-2 text-sm hover:bg-blue-600 transtition ease-linear duration-300">
             افزودن به سبد خرید
           </button>
         </div>