delete 1 file and update 1 file

public/images/index.js

@@ -1,83 +0,0 @@
-import blogImage from "../assets/blog-featured-image.jpg";
-import blogAuthorImg from "../assets/blog-author.png";
-import commentIcon from "../assets/light-gray-comment-icon.svg";
-
-const BlogDesign1 = ({
-  blogExcerpt,
-  blogAuthor,
-  blogComments,
-  commentNumBgColor,
-  commentNumTextColor,
-  commentNumTopPosition,
-  commentNumRightPosition,
-}) => {
-  return (
-    <section className="w-4/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
-      <div className="flex items-strech justify-around p-2">
-        <div className="w-2/5">
-          <img src={blogImage} alt="" className="w-full h-full" />
-        </div>
-        <div className="w-3/5 mr-4 flex flex-col justify-between py-2">
-          <div>
-            <h2 className="text-base text-justify text-grayTextColor font-bold leading-6">
-              آیا مواد غذای پر فیبر و مفید هستند؟
-            </h2>
-            {blogExcerpt && (
-              <p className="text-justify text-sm leading-6 my-1 text-grayTextColor mt-3">
-                در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته
-                خواهد شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند
-                کند تا دیگران متوجه شوند.
-              </p>
-            )}
-          </div>
-          <div className="flex item-center justify-between w-full mt-2">
-            {blogAuthor && (
-              <div className="flex items-center">
-                <img src={blogAuthorImg} alt="" className="w-8 h-8" />
-                <p className="text-sm text-lightGrayTextColor mr-2 font-light">
-                  حامد دژبانی نسب
-                </p>
-              </div>
-            )}
-            {blogComments && (
-              <div className="flex items-center">
-                <p className="text-sm text-lightGrayTextColor ml-2 font-light">
-                  زمان مطالعه 30 دقیقه
-                </p>
-                <div className="relative">
-                  <img src={commentIcon} alt="" className="w-7 h-7" />
-                  <span
-                    className={`comment-num absolute ${commentNumBgColor} ${commentNumTextColor} ${commentNumTopPosition} ${commentNumRightPosition}`}
-                  >
-                    26
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default BlogDesign1;
-
-// background color i used in commnet number background color
-// bg-lightGrayBgColor
-// bg-white
-
-// text color i used for comment number text color:
-// text-grayTextColor
-// text-white
-
-BlogDesign1.defaultProps = {
-  blogExcerpt: true,
-  blogAuthor: true,
-  blogComments: true,
-
-  commentNumBgColor: "bg-lightGrayBgColor",
-  commentNumTextColor: "text-white",
-  commentNumTopPosition: "-top-2",
-  commentNumRightPosition: "-right-2",
-};

src/components/CardDesgin/ProcessCard/index.js

@@ -1,9 +1,9 @@
 import React from "react";
 import Button from "../../ButtonDesign/Button";
 
-const ProcessCard = ({ processes, title, hint, items }) => {
+const ProcessCard = ({ processes, title, hint, items, options }) => {
   return (
-    <section className="w-[600px] border border-gray-400 rounded">
+    <section className="flex flex-row border border-gray-400 rounded">
       {/* right */}
       <div className="flex flex-1 flex-col">
         {/* top */}
@@ -48,14 +48,25 @@ const ProcessCard = ({ processes, title, hint, items }) => {
                 className="flex flex-row flex-1 items-center justify-center flex-grow"
               >
                 <img src={item.icon} alt="" className="w-4 h-4 ml-1" />
-                <p className="text-xs">{item.name}</p>
-                <p className="text-xs mr-1">{item.ans}</p>
+                <p className="text-xs text-blue-900">{item.name}</p>
+                <p className="text-xs mr-1 text-blue-900">{item.ans}</p>
               </div>
             ))}
           </div>
         </div>
       </div>
       {/* left */}
+      <div className="flex flex-col  justify-center p-2 border-r border-gray-400 gap-y-4">
+        {options.map((option, j) => (
+          <div key={j} className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center">
+              <img src={option.icon} alt="icon" className="w-5" />
+              <p className="text-xs mr-1">{option.title}</p>
+            </div>
+            <p className="text-xs mr-7">{option.content}</p>
+          </div>
+        ))}
+      </div>
     </section>
   );
 };
@@ -106,4 +117,37 @@ ProcessCard.defaultProps = {
       ans: "دارد",
     },
   ],
+
+  options: [
+    {
+      icon: "images/square.svg",
+      title: "تاخیر",
+      content: "5 ساعت",
+    },
+    {
+      icon: "images/square.svg",
+      title: "شرایط اجرا",
+      content: "2 مورد",
+    },
+    {
+      icon: "images/square.svg",
+      title: "تابع شروع",
+      content: "ندارد",
+    },
+    {
+      icon: "images/square.svg",
+      title: "مثلث",
+      content: "5 ساعت",
+    },
+    {
+      icon: "images/square.svg",
+      title: "تایید خودکار",
+      content: "5 ساعت",
+    },
+    {
+      icon: "images/square.svg",
+      title: "تابع انجام",
+      content: "ندارد",
+    },
+  ],
 };