update 2 files and delete 7 files

src/components/Features/index.js

@@ -1,33 +1,31 @@
 import React from "react";
+import Button from "../ButtonDesign/Button";
 
-const Features = ({ features }) => {
+const Features = ({ featureTitle, features }) => {
   return (
-    <section className="bg-white border-2 border-gray-400 rounded m-7">
-      <h2 className="text-lg font-sansbold text-productTitle mr-7 my-5">
-        امکانات و ویژگی ها
+    <section className="bg-white border-2 border-gray-400 rounded">
+      <h2 className="mr-7 my-5 text-lg font-sansbold text-[#246E8A]">
+        {featureTitle}
       </h2>
       <div className="w-full flex flex-wrap justify-around items-center">
         {features.map((feature, index) => (
-          <div className="flex flex-row w-2/5 p-5" key={index}>
+          <div className="w-1/2 flex flex-row p-5" key={index}>
             <div
-              className="rounded p-2 ml-5 flex items-center"
+              className={`flex items-center ml-5 p-2 rounded h-fit`}
               style={{
                 backgroundColor: feature.iconBgColor,
-                height: "fit-content",
               }}
             >
-              <img src={feature.icon} alt="" className="w-10 h-10" />
+              <img src={feature.icon} alt="icon" className="w-10" />
             </div>
             <div className="flex flex-col">
               <div className="flex items-center">
-                <strong className={`text-base font-medium`}>
-                  {feature.title}
-                </strong>
-                <span
-                  className={`mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100`}
-                >
-                  {feature.status}
-                </span>
+                <strong className="text-base">{feature.title}</strong>
+                {feature.status && (
+                  <span className="mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100">
+                    {feature.status}
+                  </span>
+                )}
               </div>
               <p className="mt-1 text-justify text-sm leading-6">
                 {feature.content}
@@ -36,23 +34,22 @@ const Features = ({ features }) => {
           </div>
         ))}
       </div>
+      {/* footer */}
       <div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 ">
         <div>
-          <h2 className="font-semibold text-base">هزاران درصد تحفیف</h2>
+          <h2 className="text-base">هزاران درصد تحفیف</h2>
           <p className="mt-4 text-sm">
             با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار
             شوید
           </p>
         </div>
-        <button
-          className="px-7 py-3 text-sm sm:text-base mt-5 sm:mt-0 rounded-md text-blue-600 hover:text-white
-          bg-white
-          hover:bg-blue-600
-          border-2
-          border-blue-600 cursor-pointer"
-        >
-          مشاهده امکانات
-        </button>
+        <Button
+          text={"مشاهده امکانات"}
+          className="mt-5 sm:mt-0 px-7 py-3 bg-white
+          hover:bg-blue-600 text-sm sm:text-base text-blue-600 hover:text-white rounded-md border-2
+          border-blue-600 cursor-pointer 
+          "
+        />
       </div>
     </section>
   );
@@ -61,6 +58,8 @@ const Features = ({ features }) => {
 export default Features;
 
 Features.defaultProps = {
+  featureTitle: "امکانات و ویژگی ها",
+
   features: [
     {
       icon: "images/crown-icon.svg",
@@ -106,7 +105,7 @@ Features.defaultProps = {
       icon: "images/plane.svg",
       iconBgColor: "#E5FFC4",
       title: "نحوه ارسال جعبه خاطرات",
-      status: "جدید",
+      status: null,
       content:
         "قابلیت امتیاز دهی به مطالب از جمله امکانات این سامانه می باشد تا به جامعه هدف کارکنان کمک نمایید.",
     },

src/components/Feedback/index.js

@@ -1,27 +1,25 @@
 import React, { useState } from "react";
 
-import removeCard from "../../assets/icons/card-remove.svg";
+import removeCard from "./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";
-import Button from "../Button";
+import sadEmoji from "./sad-emoji.svg";
+import smileEmoji from "./smile-emoji.svg";
+import speechlessEmoji from "./speechless-emoji.svg";
+import suspiciousEmoji from "./suspicious-emoji.svg";
+import heartEmoji from "./heart-emoji.svg";
+import upwardArrow from "./gray-upward-icon.svg";
 
 const Feedback = ({ feedbacks }) => {
   const [closeModal, setCloseModal] = useState(false);
   const [activeFeedback, setActiveFeedback] = useState(null);
-  console.log(closeModal);
 
   return (
-    <section
-      className="w-full lg:w-1/3 bg-white rounded shadow-sm border border-gray-500 mx-auto my-20 flex-col items-center justify-center relative"
+    <sections
+      className="w-full lg:w-1/3 bg-white rounded shadow-sm border border-gray-500 mx-auto my-20 flex-col items-center justify-center relative px-4"
       style={{ display: closeModal ? "none" : "flex" }}
     >
       <div
-        className="bg-removeCardBgColor rounded-full p-2 absolute -top-5 right-10 cursor-pointer"
+        className="bg-red-500 rounded-full p-2 absolute -top-5 right-10 cursor-pointer"
         onClick={() => setCloseModal(true)}
       >
         <img src={removeCard} alt="" className="w-5" />
@@ -32,7 +30,7 @@ const Feedback = ({ feedbacks }) => {
       <div className="flex flex-row justify-between">
         {feedbacks.map((item, index) => (
           <div
-            className="flex flex-col items-center mt-7 w-full px-4 pb-8 relative cursor-pointer"
+            className={`flex flex-col items-center mt-7 w-full px-4 ${activeFeedback ? 'pb-8' : 'pb-0'} relative cursor-pointer transition-all duration-500`}
             key={index}
             onClick={() => setActiveFeedback(item)}
           >
@@ -41,28 +39,36 @@ const Feedback = ({ feedbacks }) => {
               alt=""
               className="transition duration-300 transform hover:-translate-y-1 w-14 h-14"
             />
-            {activeFeedback === item && (
-              <>
-                <p className="text-sm mt-3">{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"
-                />
-              </>
-            )}
+            <p
+              className={`text-sm mt-3 transition-all duration-500 ${
+                activeFeedback === item ? "opacity-100" : "opacity-0"
+              } `}
+            >
+              {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 transition-all duration-500 ${
+                activeFeedback === item ? "opacity-100" : "opacity-0"
+              }`}
+            />
           </div>
         ))}
       </div>
       <textarea
-        className="resize-y w-full py-4 px-2 focus:outline-none text-sm h-44 z-20 bg-gray-100"
+        className={`resize-y w-full px-2 focus:outline-none text-sm transition-all duration-500 z-20 bg-gray-100 rounded-md ${
+          activeFeedback ? "h-44 py-4" : "h-0 py-0"
+        }`}
         placeholder="به ما در رابطه تجربه کار با سایتمون بگید..."
       ></textarea>
-      <Button
-        className={`bg-blue-400 text-white rounded px-10 py-2 my-5 self-end ml-10 text-xs`}
-        text={"ارسال"}
-      />
-    </section>
+      <button
+        className="text-white rounded px-8 py-2 my-5 self-end ml-4"
+        style={{ backgroundColor: "#246E8A" }}
+      >
+        ارسال
+      </button>
+    </sections>
   );
 };