update

src/App.js

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

src/components/Blogs/design1/BlogDesign1.js

@@ -23,16 +23,16 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
         </p>
       </div>
       {/* blog UI Design1 */}
-      <div className="w-full md:w-2/5 bg-red-400 flex items-center justify-around py-2 px-4">
+      <div className="w-full md:w-2/5 flex items-center justify-around py-2 px-4">
         <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">
               در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
               شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
               دیگران متوجه شوند.
@@ -42,14 +42,14 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
             {blogAuthor && (
               <div className=" flex items-center">
                 <img src={blogAuthorImg} alt="" />
-                <p className="text-xs text-lightGrayTextColor mr-2">
+                <p className="text-xs text-lightGrayTextColor mr-2 font-light">
                   حامد دژبانی نسب
                 </p>
               </div>
             )}
             {blogComments && (
               <div className=" flex items-center">
-                <p className="text-xs text-lightGrayTextColor ml-2">
+                <p className="text-xs text-lightGrayTextColor ml-2 font-light">
                   زمان مطالعه 30 دقیقه
                 </p>
                 <img src={commentIcon} alt="" />

src/components/Blogs/design2/BlogDesign2.js

@@ -7,7 +7,7 @@ import whiteCommentIcon from "../../../assets/icons/white-comment-icon.svg";
 
 const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
   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-green-100 p-2 rounded text-base">
@@ -23,7 +23,17 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
         </p>
       </div>
       {/* blog UI Design2 */}
-      <div className="relative w-full md:w-1/4">
+      <div
+        className="relative flex flex-col justify-end p-3"
+        style={{
+          backgroundImage: `url(${blogFeaturedImage2})`,
+          backgroundSize: "100% 100%",
+          backgroundRepeat: "no-repeat",
+          // minHeight: "300px",
+          height: "calc(100vh/3)",
+          maxHeight: "300px",
+        }}
+      >
         {dateButton && (
           <button className="bg-yellow-100 rounded p-1 text-sm absolute left-2 top-4">
             1400/09/19
@@ -34,26 +44,30 @@ const BlogDesign2 = ({ blogSubTitle, dateButton, tagButton }) => {
             تگ
           </button>
         )}
-        <img src={blogFeaturedImage2} alt="" className="w-full" />
-        <div className="absolute right-2 bottom-16 z-10">
-          <h2 className="text-white text-lg">
+        {/* <img src={blogFeaturedImage2} alt="" className="w-full" /> */}
+        <div className="z-10">
+          <h2 className="text-white text-base">
             آیا مواد غذایی پر فیبر مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className="text-white text-lg">شما چه فکری می کنید</h2>
+            <h2 className="text-white text-base">شما چه فکری می کنید</h2>
           )}
         </div>
-        <div className="z-10 flex item-center justify-around absolute right-2 bottom-1 w-full">
+        <div className="z-10 flex item-center justify-between w-full mt-4">
           {/* {blogAuthor && ( */}
           <div className="flex items-center">
-            <img src={blogAuthorImg} alt="" />
-            <p className="text-xs text-white mr-2">حامد دژبانی نسب</p>
+            <img src={blogAuthorImg} alt="" className="w-7 h-7" />
+            <p className="text-xs text-white font-light mr-2">
+              حامد دژبانی نسب
+            </p>
           </div>
           {/* // )} */}
           {/* {blogComments && ( */}
           <div className="flex items-center">
-            <p className="text-xs text-white ml-2">زمان مطالعه 30 دقیقه</p>
-            <img src={whiteCommentIcon} alt="" />
+            <p className="text-xs text-white font-light ml-2">
+              زمان مطالعه 30 دقیقه
+            </p>
+            <img src={whiteCommentIcon} alt="" className="w-7 h-7" />
           </div>
           {/* // )} */}
         </div>