update

src/App.js

@@ -7,6 +7,7 @@ import { BookDesign } from "./components/bookDesign/BookDesign";
 import BlogDesign1 from "./components/Blogs/design1/BlogDesign1";
 import BlogDesign2 from "./components/Blogs/design2/BlogDesign2";
 import BlogDesign3 from "./components/Blogs/design3/BlogDesign3";
+import BlogDesign4 from "./components/Blogs/design4/BlogDesign4";
 
 function App() {
   return (
@@ -16,9 +17,10 @@ function App() {
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
       {/* <CounterDesign /> */}
-      {/* <BlogDesign1 /> */}
-      <BlogDesign2 />
+      <BlogDesign1 />
+      {/* <BlogDesign2 /> */}
       {/* <BlogDesign3 /> */}
+      <BlogDesign4 />
     </div>
   );
 }

src/components/Blogs/design4/BlogDesign4.js

@@ -1,7 +1,65 @@
 import React from "react";
 
+import blogImage from "../../../assets/images/blog-featured-image.jpg";
+import blogAuthorImg from "../../../assets/images/blog-author.png";
+
+import commentIcon from "../../../assets/icons/black-comment-icon.svg";
+
 const BlogDesign4 = () => {
-  return <div></div>;
+  return (
+    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
+      {/* title holder */}
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-black bg-pink-200 p-2 rounded text-base">
+          طراحی بلاگ 4
+        </h2>
+      </div>
+      <div className="mb-6">
+        <p className="leading-10">
+          آدرس:
+          <span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
+            blogs/design4
+          </span>
+        </p>
+      </div>
+      {/* blog UI Design4 */}
+      <div className="w-full md:w-2/6 flex items-center justify-between relative py-2 px-4 rounded-xl border border-gray-300">
+        <div className="w-4/12 absolute top-3 -right-12 ">
+          <img src={blogImage} alt="" className="w-44 " />
+        </div>
+        <div className="w-8/12 mr-36">
+          <h2 className="text-base md:text-xl text-justify text-grayTextColor">
+            آیا مواد غذای پر فیبر و مفید هستند؟
+          </h2>
+          {/* {blogExcerpt && ( */}
+          <p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
+            در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
+            شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
+            دیگران متوجه شوند.
+          </p>
+          {/* // )} */}
+          <div className=" flex item-center justify-between mt-5">
+            {/* {blogAuthor && ( */}
+            <div className=" flex items-center">
+              <img src={blogAuthorImg} alt="" />
+              <p className="text-xs text-lightGrayTextColor mr-2">
+                حامد دژبانی نسب
+              </p>
+            </div>
+            {/* // )} */}
+            {/* {blogComments && ( */}
+            <div className=" flex items-center">
+              <p className="text-xs text-lightGrayTextColor ml-2">
+                زمان مطالعه 30 دقیقه
+              </p>
+              <img src={commentIcon} alt="" />
+            </div>
+            {/* // )} */}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 };
 
 export default BlogDesign4;