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,107 +1,71 @@
 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
-      <div
+      className="min-w-[550px] relative flex flex-col justify-end  p-3"
-        className="flex flex-col justify-end relative p-3"
+      style={{
-        style={{
+        backgroundImage: `url(${featuredImage})`,
-          backgroundImage: `url(${blogFeaturedImage2})`,
+        backgroundSize: "100% 100%",
-          backgroundSize: "100% 100%",
+        backgroundRepeat: "no-repeat",
-          backgroundRepeat: "no-repeat",
+        // minHeight: "300px",
-          // minHeight: "300px",
+        height: "calc(100vh/3)",
-          height: "calc(100vh/3)",
+        maxHeight: "300px",
-          maxHeight: "300px",
+      }}
-        }}
+    >
-      >
+      {/* <img src={blogFeaturedImage2} alt="" /> */}
-        {/* <img src={blogFeaturedImage2} alt="" /> */}
+      <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
-        <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
+        {blogTitle && (
-          <h2
+          <h2 className="text-[#646464] text-base text-justify font-sansbold leading-6">
-            className={`text-base text-justify font-bold leading-6 ${blogTitleColor}`}
+            {blogTitle}
-          >
+          </h2>
-            آیا مواد غذای پر فیبر و مفید هستند؟
+        )}
+        {blogSubTitle && (
+          <h2 className="text-[#646464] text-base mt-2 font-sansbold leading-6">
+            شما چه فکری می کنید
           </h2>
-          {blogSubTitle && (
+        )}
-            <h2
+        <div className="flex item-center justify-between w-full mt-4">
-              className={`text-base text-justify mt-2 font-bold leading-6 ${blogTitleColor}`}
+          {blogAuthor && (
-            >
+            <div className="flex items-center">
-              نظر شما چیه
+              <img src={blogAuthorImg} alt="author" className="w-8" />
-            </h2>
+              <p className="mr-2 text-sm text-[#2a2a2a]">{blogAuthor}</p>
+            </div>
+          )}
+          {blogComments && (
+            <div className="flex items-center">
+              <p className="ml-2 text-sm text-[#2a2a2a]">{blogComments}</p>
+              <CommentIcon
+                commentClassName="w-7"
+                commentNum={"26"}
+                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>
           )}
-          <div className="flex item-center justify-between w-full mt-4">
-            {blogAuthor && (
-              <div className=" flex items-center">
-                <img src={blogAuthorImg} alt="" className="w-8 h-8" />
-                <p
-                  className={`text-sm font-light mr-2 ${blogCommentAuthorTextColor}`}
-                >
-                  حامد دژبانی نسب
-                </p>
-              </div>
-            )}
-            {blogComments && (
-              <div className=" flex items-center">
-                <p
-                  className={`text-sm font-light ml-2 ${blogCommentAuthorTextColor}`}
-                >
-                  زمان مطالعه 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>
+    </div>
   );
 };
 
 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",
 };