update

src/App.js

@@ -14,11 +14,12 @@ import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
 import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
 import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection";
 import FooterDesign1 from "./components/footer/design1/FooterDesign1";
+import Testttt from "./components/testtttt/Testttt";
 
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
+      <ProductDesign />
       {/* <VodProductDesign /> */}
       {/* <BookDesign /> */}
       {/* <ButtonDesign /> */}
@@ -31,8 +32,9 @@ function App() {
       {/* <BlogDesign5 /> */}
       {/* <BlogDesign6 /> */}
       {/* <HeaderDesign1 /> */}
-      <ContactInfoSection />
+      {/* <ContactInfoSection /> */}
       {/* <FooterDesign1 /> */}
+      <Testttt />
     </div>
   );
 }

src/components/productDesign/ProductDesign.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import "./ProductDesign.scss";
 
@@ -41,6 +41,8 @@ const ProductDesign = ({
   rangeWidth,
   addToCartHolder,
 }) => {
+  const [isHovering, setIsHovering] = useState(false);
+
   return (
     <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
@@ -112,7 +114,13 @@ const ProductDesign = ({
               {/* img */}
               <div className="flex-shrink-0">
                 {verticalImg && (
-                  <img src={book} alt="" className="w-full rounded-lg" />
+                  <img
+                    src={book}
+                    alt=""
+                    className="w-full rounded-lg cursor-pointer"
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
+                  />
                 )}
                 {horizontalImg && (
                   <img src={watermelon} alt="" className="w-full rounded-lg" />
@@ -151,6 +159,13 @@ const ProductDesign = ({
                   <ReactTooltip place="top" type="dark" effect="float" />
                 </div>
               )}
+              <div
+                className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${
+                  isHovering ? "" : "hidden"
+                }`}
+              >
+                <button>افزودن به سبد خرید</button>
+              </div>
             </div>
             {/* product content */}
             <div className="px-2">

src/components/testtttt/Testttt.js

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import blogImage from "../../assets/images/blog-featured-image.jpg";
+
+const Testttt = () => {
+  const [isHovering, setIsHovering] = useState(false);
+
+  return (
+    <div className="p-20 relative">
+      <button
+        className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer ${
+          isHovering ? "" : "hidden"
+        }`}
+      >
+        hover to see me
+      </button>
+      <img
+        src={blogImage}
+        alt=""
+        className="w-96"
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+      />
+    </div>
+  );
+};
+
+export default Testttt;

tailwind.config.js

@@ -38,6 +38,7 @@ module.exports = {
       discountPriceBg: "#F0FFF1",
       counterBg: "#66B1EB",
       incrementDecrementBg: "#2E7AB5",
+      blueBgColor: "#196EC0",
       darkGreenBg: "#038A99",
       lightGrayBgColor: "#818181",
       midGrayBgColor: "#DBDBDB",