delete 1 file and update 1 file

src/components/Blogss/design2/BlogDesign2.scss

@@ -1,7 +0,0 @@
-.child-text {
-  transition: all 0.4s;
-}
-.parent:hover .child-text {
-  transition: all 0.4s;
-  transform: translateY(-7px) !important;
-}

src/components/Blogss/design3/index.js

@@ -1,26 +1,19 @@
 import React from "react";
-
+import CommentIcon from "../../MiniComponents/CommentIcon";
-import blogFeaturedImage2 from "../assets/blog-featured-image2.jpg";
-import blogAuthorImg from "../assets/blog-author.png";
-import commentIcon from "../assets/light-gray-comment-icon.svg";
 
 const BlogDesign3 = ({
+  blogTitle,
   blogSubTitle,
+  featuredImage,
   blogAuthor,
+  blogAuthorImg,
   blogComments,
-  blogTitleColor,
-  blogCommentAuthorTextColor,
-  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 flex-col justify-end relative p-3"
+      className="min-w-[550px] relative flex flex-col justify-end  p-3"
       style={{
-          backgroundImage: `url(${blogFeaturedImage2})`,
+        backgroundImage: `url(${featuredImage})`,
         backgroundSize: "100% 100%",
         backgroundRepeat: "no-repeat",
         // minHeight: "300px",
@@ -30,78 +23,49 @@ const BlogDesign3 = ({
     >
       {/* <img src={blogFeaturedImage2} alt="" /> */}
       <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
-          <h2
+        {blogTitle && (
-            className={`text-base text-justify font-bold leading-6 ${blogTitleColor}`}
+          <h2 className="text-[#646464] text-base text-justify font-sansbold leading-6">
-          >
+            {blogTitle}
-            آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
+        )}
         {blogSubTitle && (
-            <h2
+          <h2 className="text-[#646464] text-base mt-2 font-sansbold leading-6">
-              className={`text-base text-justify mt-2 font-bold leading-6 ${blogTitleColor}`}
+            شما چه فکری می کنید
-            >
-              نظر شما چیه
           </h2>
         )}
         <div className="flex item-center justify-between w-full mt-4">
           {blogAuthor && (
-              <div className=" flex items-center">
+            <div className="flex items-center">
-                <img src={blogAuthorImg} alt="" className="w-8 h-8" />
+              <img src={blogAuthorImg} alt="author" className="w-8" />
-                <p
+              <p className="mr-2 text-sm text-[#2a2a2a]">{blogAuthor}</p>
-                  className={`text-sm font-light mr-2 ${blogCommentAuthorTextColor}`}
-                >
-                  حامد دژبانی نسب
-                </p>
             </div>
           )}
           {blogComments && (
-              <div className=" flex items-center">
+            <div className="flex items-center">
-                <p
+              <p className="ml-2 text-sm text-[#2a2a2a]">{blogComments}</p>
-                  className={`text-sm font-light ml-2 ${blogCommentAuthorTextColor}`}
+              <CommentIcon
-                >
+                commentClassName="w-7"
-                  زمان مطالعه 30 دقیقه
+                commentNum={"26"}
-                </p>
+                className="w-5 h-5 bg-[#818181] text-white text-[10px] font-sansbold absolute top-0 right-0 transform translate-x-1 -translate-y-2"
-                <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 BlogDesign3;
 
-//different text colors i used:
-// text-darkBlueTextColor2
-// text-productTitle
-// text-lightGrayTextColor
-
-// 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
-
 BlogDesign3.defaultProps = {
-  blogTitleColor: "text-lightGrayTextColor",
+  blogTitle: `آیا مواد غذای پر فیبر و مفید هستند؟`,
-  blogCommentAuthorTextColor: "text-lightGrayTextColor",
+  blogSubTitle: `شما چه فکری می کنید`,
+
+  featuredImage: "images/blog-featured-image2.jpg",
 
-  blogSubTitle: true,
+  blogAuthor: `حامد دژبانی نسب`,
-  blogAuthor: true,
+  blogAuthorImg: "images/blog-author.png",
-  blogComments: true,
 
-  commentNumBgColor: "bg-lightGrayBgColor",
+  blogComments: `زمان مطالعه 30 دقیقه`,
-  commentNumTextColor: "text-white",
-  commentNumTopPosition: "-top-2",
-  commentNumRightPosition: "-right-2",
 };