update

src/App.js

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

src/components/Blogs/design1/BlogDesign1.js

@@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
 const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+    <section className="w-4/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,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="flex items-center justify-around py-2 px-4">
         <div className="w-4/12">
           <img src={blogImage} alt="" className="w-full" />
         </div>
@@ -38,7 +38,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
               دیگران متوجه شوند.
             </p>
           )}
-          <div className=" flex item-center justify-between mt-5">
+          <div className="flex item-center justify-between w-full mt-4">
             {blogAuthor && (
               <div className="flex items-center">
                 <img src={blogAuthorImg} alt="" className="w-7 h-7" />

src/components/Blogs/design4/BlogDesign4.js

@@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
 const BlogDesign4 = () => {
   return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-20 mb-8">
+    <section className="w-4/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">
@@ -23,18 +23,18 @@ const BlogDesign4 = () => {
         </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="flex items-center justify-between relative py-2 px-4 rounded-xl border border-gray-300">
         <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 className="text-base text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {/* {blogExcerpt && ( */}
-          <p className="text-sm md:text-base leading-6 my-3 text-grayTextColor">
+          <p className="text-sm text-justify leading-6 my-3 text-grayTextColor">
             در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
             شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
             دیگران متوجه شوند.
@@ -43,18 +43,18 @@ const BlogDesign4 = () => {
           <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>

src/components/Blogs/design5/BlogDesign5.js

@@ -7,7 +7,7 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
 const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
-    <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
+    <section className="w-4/12 mx-auto p-4 bg-gray-200 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,37 +23,37 @@ 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-md	">
+      <div className="flex items-center justify-around p-6  rounded-md shadow-md bg-white">
         <div className="w-4/12">
           <img src={blogImage} alt="" className="w-full" />
         </div>
         <div className="w-8/12 mr-4">
-          <h2 className="text-base md:text-xl text-justify text-grayTextColor">
+          <h2 className="text-base text-justify text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogExcerpt && (
-            <p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
+            <p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
               در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
               شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
               دیگران متوجه شوند.
             </p>
           )}
 
-          <div className=" flex item-center justify-between mt-5">
+          <div className="flex item-center justify-between w-full mt-4">
             {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>

src/components/Blogs/design6/BlogDesign6.js

@@ -5,9 +5,9 @@ import blogAuthorImg from "../../../assets/images/blog-author.png";
 
 import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 
-const BlogDesign6 = () => {
+const BlogDesign6 = ({ blogExcerpt, 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">
@@ -24,40 +24,35 @@ const BlogDesign6 = () => {
       </div>
       {/* blog UI Design6 */}
       <div className="">
-        <img
+        <img src={blogImage} alt="" className="w-full" />
-          src={blogImage}
-          alt=""
-          className="w-full
-"
-        />
         <div className="py-2">
-          <h2 className="text-base md:text-xl text-justify text-grayTextColor">
+          <h2 className="text-base text-justify text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
-          {/* {blogExcerpt && ( */}
+          {blogExcerpt && (
-          <p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
+            <p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
               در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
               شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
               دیگران متوجه شوند.
             </p>
-          {/* // )} */}
+          )}
-          <div className=" flex item-center justify-between mt-5">
+          <div className="flex item-center justify-between w-full mt-4">
-            {/* {blogAuthor && ( */}
+            {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>
               </div>
-            {/* // )} */}
+            )}
-            {/* {blogComments && ( */}
+            {blogComments && (
               <div className=" flex items-center">
                 <p className="text-xs text-lightGrayTextColor ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
-              <img src={commentIcon} alt="" />
+                <img src={commentIcon} alt="" className="w-7 h-7" />
               </div>
-            {/* // )} */}
+            )}
           </div>
         </div>
       </div>
@@ -66,3 +61,9 @@ const BlogDesign6 = () => {
 };
 
 export default BlogDesign6;
+
+BlogDesign6.defaultProps = {
+  blogExcerpt: true,
+  blogAuthor: true,
+  blogComments: true,
+};