update

src/App.js

@@ -9,6 +9,7 @@ import BlogDesign2 from "./components/Blogs/design2/BlogDesign2";
 import BlogDesign3 from "./components/Blogs/design3/BlogDesign3";
 import BlogDesign4 from "./components/Blogs/design4/BlogDesign4";
 import BlogDesign5 from "./components/Blogs/design5/BlogDesign5";
+import BlogDesign6 from "./components/Blogs/design6/BlogDesign6";
 
 function App() {
   return (
@@ -19,10 +20,11 @@ function App() {
       {/* <ProductTags /> */}
       {/* <CounterDesign /> */}
       <BlogDesign1 />
-      {/* <BlogDesign2 /> */}
-      {/* <BlogDesign3 /> */}
-      {/* <BlogDesign4 /> */}
+      <BlogDesign2 />
+      <BlogDesign3 />
+      <BlogDesign4 />
       <BlogDesign5 />
+      <BlogDesign6 />
     </div>
   );
 }

src/components/Blogs/design1/BlogDesign1.js

@@ -23,7 +23,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
         </p>
       </div>
       {/* blog UI Design1 */}
-      <div className="w-full md:w-2/5 flex items-center justify-around py-2 px-4">
+      <div className="w-full md:w-2/5 bg-red-400 flex items-center justify-around py-2 px-4">
         <div className="w-4/12">
           <img src={blogImage} alt="" className="w-full" />
         </div>

src/components/Blogs/design2/BlogDesign2.js

@@ -35,7 +35,7 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
           </button>
         )}
         <img src={blogFeaturedImage2} alt="" className="w-full" />
-        <div className="absolute right-2 bottom-16">
+        <div className="absolute right-2 bottom-16 z-10">
           <h2 className="text-white text-lg">
             آیا مواد غذایی پر فیبر مفید هستند؟
           </h2>
@@ -43,7 +43,7 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
             <h2 className="text-white text-lg">شما چه فکری می کنید</h2>
           )}
         </div>
-        <div className="flex item-center justify-around absolute right-2 bottom-1 w-full">
+        <div className="z-10 flex item-center justify-around absolute right-2 bottom-1 w-full">
           {/* {blogAuthor && ( */}
           <div className="flex items-center">
             <img src={blogAuthorImg} alt="" />
@@ -57,7 +57,14 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
           </div>
           {/* // )} */}
         </div>
-        {/* <div className="absolute right-2 bottom-20  h-16 w-11/12  shadow-2xl shdadow-black"></div> */}
+        <div
+          style={{
+            zIndex: 0,
+            background:
+              "linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(2,0,36,0) 100%)",
+          }}
+          className="absolute right-0 bottom-0 h-full w-full"
+        ></div>
       </div>
     </section>
   );

src/components/Blogs/design4/BlogDesign4.js

@@ -24,15 +24,17 @@ const BlogDesign4 = () => {
       </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">
+        <img
+          src={blogImage}
+          alt=""
+          className="h-full transform translate-x-1/3"
+        />
+        <div className="w-full transform translate-x-10">
+          <h2 className="text-base md:text-xl text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {/* {blogExcerpt && ( */}
-          <p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
+          <p className="text-sm md:text-base leading-6 my-3 text-grayTextColor">
             در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
             شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
             دیگران متوجه شوند.

src/components/Blogs/design5/BlogDesign5.js

@@ -23,7 +23,7 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
         </p>
       </div>
       {/* blog UI Design5 */}
-      <div className="w-full md:w-2/5 flex items-center justify-around p-6  rounded-md shadow-2xl	shadow-black	">
+      <div className="w-full md:w-2/5 flex items-center justify-around p-6  rounded-md shadow-md	">
         <div className="w-4/12">
           <img src={blogImage} alt="" className="w-full" />
         </div>

src/components/Blogs/design6/BlogDesign6.js

@@ -0,0 +1,68 @@
+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 BlogDesign6 = () => {
+  return (
+    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+      {/* title holder */}
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-productTitle bg-lime-200 p-2 rounded text-base">
+          طراحی بلاگ 6
+        </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/design6
+          </span>
+        </p>
+      </div>
+      {/* blog UI Design6 */}
+      <div className="">
+        <img
+          src={blogImage}
+          alt=""
+          className="w-full
+"
+        />
+        <div className="py-2">
+          <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 BlogDesign6;

src/components/counterDesign/CounterDesign.js

@@ -32,7 +32,7 @@ const CounterDesign = ({
           است.
         </p>
       </div>
-      <div className="flex-col items-center  justify-center">
+      <div className="flex flex-col items-center justify-center">
         {likeBtn && (
           <div className="flex items-center">
             <img src={blackLikeIcon} alt="" className="w-8 mb-4" />
@@ -64,7 +64,7 @@ export default CounterDesign;
 CounterDesign.defaultProps = {
   counterColor: "text-darkRedTextColor",
   // for icons
-  likeBtn: false,
-  counterIncreaseBtn: true,
-  counterDecreaseBtn: true,
+  likeBtn: true,
+  counterIncreaseBtn: false,
+  counterDecreaseBtn: false,
 };