update

src/App.js

@@ -17,28 +17,30 @@ import FooterDesign1 from "./components/footer/design1/FooterDesign1";
 import Testttt from "./components/testtttt/Testttt";
 import Design2D from "./components/Design2D/Design2D";
 import Functionality from "./components/functionality/Functionality";
+import Feedback from "./components/Feedback/index";
 
 function App() {
   return (
     <div className="App">
-      {/* <ProductDesign /> */}
+      {/* <ProductDesign />
-      {/* <VodProductDesign /> */}
+      <VodProductDesign />
-      {/* <BookDesign /> */}
+      <BookDesign />
-      {/* <ButtonDesign /> */}
+      <ButtonDesign />
-      {/* <ProductTags /> */}
+      <ProductTags />
-      {/* <CounterDesign /> */}
+      <CounterDesign />
-      {/* <BlogDesign1 /> */}
+      <BlogDesign1 />
-      {/* <BlogDesign2 /> */}
+      <BlogDesign2 />
-      {/* <BlogDesign3 /> */}
+      <BlogDesign3 />
-      {/* <BlogDesign4 /> */}
+      <BlogDesign4 />
-      {/* <BlogDesign5 /> */}
+      <BlogDesign5 />
-      {/* <BlogDesign6 /> */}
+      <BlogDesign6 />
-      {/* <HeaderDesign1 /> */}
+      <HeaderDesign1 />
-      {/* <ContactInfoSection /> */}
+      <ContactInfoSection />
-      {/* <FooterDesign1 /> */}
+      <FooterDesign1 /> */}
       {/* <Testttt /> */}
       {/* <Design2D /> */}
       <Functionality />
+      <Feedback />
     </div>
   );
 }

src/assets/icons/card-remove.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45.19" height="45.19" viewBox="0 0 45.19 45.19">
+  <g id="card-remove" transform="translate(8.485 8.485)">
+    <path id="Vector" d="M0,28.219,28.219,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="12"/>
+    <path id="Vector-2" data-name="Vector" d="M28.219,28.219,0,0" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="12"/>
+  </g>
+</svg>

src/assets/icons/gray-upward-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="70" height="53" viewBox="0 0 70 53">
+  <path id="Polygon_1" data-name="Polygon 1" d="M35,0,70,53H0Z" fill="#efefef"/>
+</svg>

src/components/Design2D/Design2D.js

@@ -13,6 +13,7 @@ const Design2D = ({ array }) => {
             <div
               className={`flex p-4 ${item1.bg}`}
               style={{ flex: item1.flex }}
+              key={index}
             >
               <div className="bg-indigo-300 w-full h-full flex items-center justify-center">
                 <p>inside the div</p>

src/components/Feedback/index.js

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+
+import removeCard from "../../assets/icons/card-remove.svg";
+
+import sadEmoji from "../../assets/icons/sad-emoji.svg";
+import smileEmoji from "../../assets/icons/smile-emoji.svg";
+import speechlessEmoji from "../../assets/icons/speechless-emoji.svg";
+import suspiciousEmoji from "../../assets/icons/suspicious-emoji.svg";
+import heartEmoji from "../../assets/icons/heart-emoji.svg";
+import upwardArrow from "../../assets/icons/gray-upward-icon.svg";
+
+const Feedback = ({ feedbacks }) => {
+  const [closeModal, setCloseModal] = useState(false);
+  const [activeFeedback, setActiveFeedback] = useState(null);
+  console.log(closeModal);
+
+  return (
+    <section
+      className="w-1/3 bg-white rounded shadow-sm border border-gray-500 mx-auto my-20 flex-col items-center justify-center relative"
+      style={{ display: closeModal ? "none" : "flex" }}
+    >
+      <div
+        className="bg-removeCardBgColor rounded-full p-2 absolute -top-5 right-10 cursor-pointer"
+        onClick={() => setCloseModal(true)}
+      >
+        <img src={removeCard} alt="" className="w-5" />
+      </div>
+      <h2 className="mt-10 text-productPrice">
+        نظر شما نسبت به رابط کاربری سایت جدیدمون چیه؟
+      </h2>
+      <div className="flex flex-row w-full justify-between">
+        {feedbacks.map((item, index) => (
+          <div
+            className="flex flex-col items-center mt-7 w-full px-4 pb-8 relative cursor-pointer"
+            key={index}
+            onClick={() => setActiveFeedback(item)}
+          >
+            <img
+              src={item.icon}
+              alt=""
+              className="transition duration-300 transform hover:-translate-y-1"
+            />
+            {activeFeedback === item && (
+              <>
+                <p>{item.name}</p>
+                <img
+                  src={upwardArrow}
+                  alt=""
+                  className="w-20 h-20  rounded-full absolute left-1/2 transform -translate-x-1/2 bottom-0 translate-y-2/3 z-10"
+                />
+              </>
+            )}
+          </div>
+        ))}
+      </div>
+      <textarea
+        className="resize-y w-full py-4 px-2 focus:outline-none text-sm h-44 z-20 bg-gray-100"
+        placeholder="به ما در رابطه تجربه کار با سایتمون بگید..."
+      ></textarea>
+      <button
+        className="text-white rounded px-10 py-2 my-5 self-end ml-10"
+        style={{ backgroundColor: "#246E8A" }}
+      >
+        ارسال
+      </button>
+    </section>
+  );
+};
+
+export default Feedback;
+
+Feedback.defaultProps = {
+  feedbacks: [
+    {
+      icon: heartEmoji,
+      name: "عالی",
+    },
+    {
+      icon: smileEmoji,
+      name: "خوب",
+    },
+    {
+      icon: speechlessEmoji,
+      name: "اوکیه",
+    },
+    {
+      icon: sadEmoji,
+      name: "بد",
+    },
+    {
+      icon: suspiciousEmoji,
+      name: "خیلی بد",
+    },
+  ],
+};

src/components/Tag/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+import blackCancleIcon from "../../assets/icons/black-cancle-icon.svg";
+
+const ProductTags = ({
+  titleColor,
+  title,
+  tagBgColor,
+  tagBorderColor,
+  icon,
+}) => {
+  return (
+    <button
+      className={`flex flex-row items-center rounded border-2 m-1 px-2 py-0.5 text-base ${titleColor} ${tagBorderColor} ${tagBgColor} `}
+    >
+      {title}
+      {icon && <img src={icon} alt="" className="mr-5 w-2.5" />}
+    </button>
+  );
+};
+
+export default ProductTags;
+
+ProductTags.defaultProps = {
+  title: "کتاب",
+  titleColor: "text-blue-600",
+  tagBgColor: "bg-blue-300 bg-opacity-10",
+  tagBorderColor: "border-blue-200",
+  // for icons
+  icon: blackCancleIcon,
+};

src/components/buttonDesign/ButtonDesign.js

@@ -141,7 +141,7 @@ export default ButtonDesign;
 
 ButtonDesign.defaultProps = {
   buttonBgColor: "bg-darkGreenBg",
-  buttonBgHoverColor: "bg-greenBookBg",
+  buttonBgHoverColor: "bg-gray-900",
   circleArrowBgClr: "bg-darkGreenBg",
   buttonTextColor: "text-white",
   buttonBorder: "border-b-4",

src/components/contactInfoSection/ContactInfoSection.js

@@ -25,7 +25,7 @@ const ContactInfoSection = ({
       <img
         src={customerSupport}
         alt=""
-        className="w-14 cursor-pointer customer-support transition delay-150 duration-500 hover:animate-bounce"
+        className="w-14 cursor-pointer customer-support animate-bounce"
       />
       <p
         className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}

src/components/functionality/Functionality.js

@@ -1,4 +1,5 @@
 import React from "react";
+import Tag from "../Tag";
 
 import crown from "../../assets/icons/crown-icon.svg";
 
@@ -25,6 +26,7 @@ const Functionality = ({
   buttonTitleBorder,
   buttonTitleBorderColor,
   buttonTitleHoverBgColor,
+  productTags,
 }) => {
   return (
     <section>
@@ -51,6 +53,9 @@ const Functionality = ({
                 >
                   {functionalityTag}
                 </span>
+                {/* {productTags.map((item, index) => (
+                  <Tag title={item} key={index} />
+                ))} */}
               </div>
               <p
                 className={`mt-2 text-justify text-sm leading-7  ${functionalityExcerptTextColor}`}
@@ -87,6 +92,7 @@ Functionality.defaultProps = {
   componentTitle: "امکانات و ویژگی های پلتفرم",
   functionalityTitle: "قابلیت امتیاز دهی",
   functionalityTag: "جدید",
+  // productTags: ["ارسال رایگان", "برچسب های دیگر", "دسته بندی به صورت کادو"],
   functionalityExcerpt: "جدید",
   footerTitle: "هزاران درصد تحفیف",
   footerExplanation:

src/components/productDesign/ProductDesign.js

@@ -42,6 +42,7 @@ const ProductDesign = ({
   mainPriceTitle,
 }) => {
   const [progressFlag, setProgressFlag] = useState(false);
+
   useEffect(() => {
     setTimeout(() => {
       setProgressFlag(true);

src/components/vodProductDesign/VodProductDesign.js

@@ -106,13 +106,9 @@ const VodProductDesign = ({
               </div>
               {/* play button */}
               <div
-                className={`playBtnImg rounded-full p-4 group-hover:p-5 ${playBtnBgColor}`}
+                className={` rounded-full p-4 group-hover:scale-125 transform transition-transform duration-300 ${playBtnBgColor}`}
               >
-                <img
+                <img src={whitePlayIcon} alt="" className=" w-5 h-5" />
-                  src={whitePlayIcon}
-                  alt=""
-                  className="playBtnImg w-5 h-5 group-hover:w-6 group-hover:h-6"
-                />
               </div>
               {/* select Color */}
               {colors && (

tailwind.config.js

@@ -58,6 +58,7 @@ module.exports = {
       playButtonIcon: "#0D0D0D99",
       playButtonIcon2: "#E8E8E899",
       blackBg: "#606060 ",
+      removeCardBgColor: "#FA472B",
     }),
     borderColor: (theme) => ({
       ...theme("colors"),