update

src/App.js

@@ -19,12 +19,12 @@ function App() {
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
       {/* <CounterDesign /> */}
-      {/* <BlogDesign1 /> */}
+      <BlogDesign1 />
       <BlogDesign2 />
-      {/* <BlogDesign3 /> */}
+      <BlogDesign3 />
-      {/* <BlogDesign4 /> */}
+      <BlogDesign4 />
-      {/* <BlogDesign5 /> */}
+      <BlogDesign5 />
-      {/* <BlogDesign6 /> */}
+      <BlogDesign6 />
     </div>
   );
 }

src/components/Blogs/design1/BlogDesign1.js

@@ -41,7 +41,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
           <div className=" flex item-center justify-between mt-5">
             {blogAuthor && (
               <div className=" flex items-center">
-                <img src={blogAuthorImg} alt="" />
+                <img src={blogAuthorImg} alt="" className="w-7 h-7" />
                 <p className="text-xs text-lightGrayTextColor mr-2 font-light">
                   حامد دژبانی نسب
                 </p>
@@ -52,7 +52,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
                 <p className="text-xs text-lightGrayTextColor ml-2 font-light">
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" />
+                <img src={commentIcon} alt="" className="w-7 h-7" />
               </div>
             )}
           </div>

src/components/Blogs/design2/BlogDesign2.js

@@ -5,7 +5,13 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
 
-const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
+const BlogDesign2 = ({
+  blogSubTitle,
+  dateButton,
+  tagButton,
+  blogAuthor,
+  blogComments,
+}) => {
   return (
     <section className="w-3/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
       {/* title holder */}
@@ -44,32 +50,31 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
             تگ
           </button>
         )}
-        {/* <img src={blogFeaturedImage2} alt="" className="w-full" /> */}
         <div className="z-10">
           <h2 className="text-white text-base">
             آیا مواد غذایی پر فیبر مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className="text-white text-base">شما چه فکری می کنید</h2>
+            <h2 className="text-white text-base mt-2">شما چه فکری می کنید</h2>
           )}
         </div>
         <div className="z-10 flex item-center justify-between w-full mt-4">
-          {/* {blogAuthor && ( */}
+          {blogAuthor && (
             <div className="flex items-center">
               <img src={blogAuthorImg} alt="" className="w-7 h-7" />
               <p className="text-xs text-white font-light mr-2">
                 حامد دژبانی نسب
               </p>
             </div>
-          {/* // )} */}
+          )}
-          {/* {blogComments && ( */}
+          {blogComments && (
             <div className="flex items-center">
               <p className="text-xs text-white font-light ml-2">
                 زمان مطالعه 30 دقیقه
               </p>
               <img src={whiteCommentIcon} alt="" className="w-7 h-7" />
             </div>
-          {/* // )} */}
+          )}
         </div>
         <div
           style={{
@@ -88,6 +93,8 @@ export default BlogDesign2;
 
 BlogDesign2.defaultProps = {
   blogSubTitle: true,
-  dateButton: false,
+  dateButton: true,
-  tagButton: true,
+  tagButton: false,
+  blogAuthor: true,
+  blogComments: true,
 };

src/components/Blogs/design3/BlogDesign3.js

@@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
 const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
   return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+    <section className="w-3/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">
@@ -23,33 +23,42 @@ const BlogDesign3 = ({ blogSubTitle, blogAuthor, blogComments }) => {
         </p>
       </div>
       {/* blog UI Design3 */}
-      <div className="w-full md:w-1/4 relative">
+      <div
-        <img src={blogFeaturedImage2} alt="" />
+        className="flex flex-col justify-end relative p-3"
-        <div className="w-11/12	m-auto p-2 rounded-lg shadow-md bg-white absolute -bottom-16 right-4 ">
+        style={{
-          <h2 className="text-base md:text-xl text-justify text-productTitle">
+          backgroundImage: `url(${blogFeaturedImage2})`,
+          backgroundSize: "100% 100%",
+          backgroundRepeat: "no-repeat",
+          // minHeight: "300px",
+          height: "calc(100vh/3)",
+          maxHeight: "300px",
+        }}
+      >
+        {/* <img src={blogFeaturedImage2} alt="" /> */}
+        <div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
+          <h2 className="text-base text-justify text-productTitle ">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className="text-base md:text-xl text-justify text-productTitle mt-2">
+            <h2 className="text-base text-justify text-productTitle mt-2">
               نظر شما چیه
             </h2>
           )}
-
+          <div className="flex item-center justify-between w-full mt-4">
-          <div className=" flex item-center justify-between mt-5">
             {blogAuthor && (
               <div className=" flex items-center">
-                <img src={blogAuthorImg} alt="" />
+                <img src={blogAuthorImg} alt="" className="w-7 h-7" />
-                <p className="text-xs text-lightGrayTextColor mr-2">
+                <p className="text-xs text-lightGrayTextColor font-light mr-2">
                   حامد دژبانی نسب
                 </p>
               </div>
             )}
             {blogComments && (
               <div className=" flex items-center">
-                <p className="text-xs text-lightGrayTextColor ml-2">
+                <p className="text-xs text-lightGrayTextColor font-light ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" />
+                <img src={commentIcon} alt="" className="w-7 h-7" />
               </div>
             )}
           </div>