update

src/App.js

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

src/components/Blogs/design1/BlogDesign1.js

@@ -22,11 +22,11 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
         </p>
       </div>
       {/* blog UI Design1 */}
-      <div className="flex items-center justify-around py-2 px-4">
+      <div className="flex items-strech justify-around p-2">
-        <div className="bg-blue-400">
+        <div className="w-2/5">
-          <img src={blogImage} alt="" className="w-96" />
+          <img src={blogImage} alt="" className="w-full h-full" />
         </div>
-        <div className="mr-4">
+        <div className="w-3/5 mr-4 flex flex-col justify-around">
           <h2 className="text-sm text-justify text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
@@ -51,7 +51,7 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
                 <p className="text-xs text-lightGrayTextColor ml-2 font-light">
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" className="w-6 h-6" />
+                <img src={commentIcon} alt="" className="w-5 h-5" />
               </div>
             )}
           </div>

src/components/Blogs/design2/BlogDesign2.js

@@ -1,5 +1,7 @@
 import React from "react";
 
+import "./BlogDesign2.scss";
+
 import blogFeaturedImage2 from "../../../assets/images/blog-featured-image2.jpg";
 import blogAuthorImg from "../../../assets/images/blog-author.png";
 
@@ -30,7 +32,7 @@ const BlogDesign2 = ({
       </div>
       {/* blog UI Design2 */}
       <div
-        className="relative flex flex-col justify-end p-3"
+        className="parent relative flex flex-col justify-end p-3 cursor-pointer"
         style={{
           backgroundImage: `url(${blogFeaturedImage2})`,
           backgroundSize: "100% 100%",
@@ -50,18 +52,18 @@ const BlogDesign2 = ({
             تگ
           </button>
         )}
-        <div className="z-10">
+        <div className="z-10 child-text">
-          <h2 className="text-white text-base">
+          <h2 className="text-white text-sm">
             آیا مواد غذایی پر فیبر مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className="text-white text-base mt-2">شما چه فکری می کنید</h2>
+            <h2 className="text-white text-sm mt-2">شما چه فکری می کنید</h2>
           )}
         </div>
-        <div className="z-10 flex item-center justify-between w-full mt-4">
+        <div className="z-10 flex item-center justify-between w-full mt-4 child-text">
           {blogAuthor && (
             <div className="flex items-center">
-              <img src={blogAuthorImg} alt="" className="w-7 h-7" />
+              <img src={blogAuthorImg} alt="" className="w-6 h-6" />
               <p className="text-xs text-white font-light mr-2">
                 حامد دژبانی نسب
               </p>
@@ -72,7 +74,7 @@ const BlogDesign2 = ({
               <p className="text-xs text-white font-light ml-2">
                 زمان مطالعه 30 دقیقه
               </p>
-              <img src={whiteCommentIcon} alt="" className="w-7 h-7" />
+              <img src={whiteCommentIcon} alt="" className="w-6 h-6" />
             </div>
           )}
         </div>

src/components/Blogs/design2/BlogDesign2.scss

@@ -0,0 +1,7 @@
+.child-text {
+  transition: all 0.4s;
+}
+.parent:hover .child-text {
+  transition: all 0.4s;
+  transform: translateY(-7px) !important;
+}

src/components/Blogs/design3/BlogDesign3.js

@@ -42,18 +42,18 @@ const BlogDesign3 = ({
       >
         {/* <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 ${blogTitleColor}`}>
+          <h2 className={`text-sm text-justify ${blogTitleColor}`}>
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogSubTitle && (
-            <h2 className={`text-base text-justify mt-2 ${blogTitleColor}`}>
+            <h2 className={`text-sm text-justify mt-2 ${blogTitleColor}`}>
               نظر شما چیه
             </h2>
           )}
           <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" />
+                <img src={blogAuthorImg} alt="" className="w-6 h-6" />
                 <p
                   className={`text-xs font-light mr-2 ${blogCommentAuthorTextColor}`}
                 >
@@ -68,7 +68,7 @@ const BlogDesign3 = ({
                 >
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" className="w-7 h-7" />
+                <img src={commentIcon} alt="" className="w-6 h-6" />
               </div>
             )}
           </div>

src/components/Blogs/design4/BlogDesign4.js

@@ -23,40 +23,32 @@ const BlogDesign4 = () => {
         </p>
       </div>
       {/* blog UI Design4 */}
-      <div className="flex items-center justify-between relative py-2 px-4 rounded-xl border border-gray-300">
+      <div className="flex items-strech justify-between relative p-2 rounded-xl border border-gray-300 ">
-        <img
+        <div className="w-2/5 transform translate-x-1/3">
-          src={blogImage}
+          <img src={blogImage} alt="" className="w-full h-full " />
-          alt=""
+        </div>
-          className="h-full transform translate-x-1/3"
+        <div className="w-3/5 flex flex-col justify-around transform translate-x-10">
-        />
+          <h2 className="text-sm text-grayTextColor">
-        <div className="w-full transform translate-x-10">
-          <h2 className="text-base text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
-          {/* {blogExcerpt && ( */}
+          <p className="text-xs text-justify leading-6 text-grayTextColor">
-          <p className="text-sm text-justify leading-6 my-3 text-grayTextColor">
             در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
             شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
             دیگران متوجه شوند.
           </p>
-          {/* // )} */}
+          <div className=" flex item-center justify-between">
-          <div className=" flex item-center justify-between mt-5">
-            {/* {blogAuthor && ( */}
             <div className=" flex items-center">
-              <img src={blogAuthorImg} alt="" className="w-7 h-7" />
+              <img src={blogAuthorImg} alt="" className="w-6 h-6" />
               <p className="text-xs text-lightGrayTextColor font-light mr-2">
                 حامد دژبانی نسب
               </p>
             </div>
-            {/* // )} */}
-            {/* {blogComments && ( */}
             <div className=" flex items-center">
               <p className="text-xs text-lightGrayTextColor font-light ml-2">
                 زمان مطالعه 30 دقیقه
               </p>
-              <img src={commentIcon} alt="" className="w-7 h-7" />
+              <img src={commentIcon} alt="" className="w-6 h-6" />
             </div>
-            {/* // )} */}
           </div>
         </div>
       </div>

src/components/Blogs/design5/BlogDesign5.js

@@ -23,26 +23,26 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
         </p>
       </div>
       {/* blog UI Design5 */}
-      <div className="flex items-center justify-around p-6  rounded-md shadow-md bg-white">
+      <div className="flex items-strech justify-around p-4 rounded-md shadow-md bg-white">
-        <div className="w-4/12">
+        <div className="w-2/5">
-          <img src={blogImage} alt="" className="w-full" />
+          <img src={blogImage} alt="" className="w-full h-full" />
         </div>
-        <div className="w-8/12 mr-4">
+        <div className="w-3/5 flex flex-col justify-around mr-4">
-          <h2 className="text-base text-justify text-grayTextColor">
+          <h2 className="text-sm text-justify text-grayTextColor">
             آیا مواد غذای پر فیبر و مفید هستند؟
           </h2>
           {blogExcerpt && (
-            <p className="text-justify text-sm leading-6 my-3 text-grayTextColor">
+            <p className="text-justify text-xs leading-6 text-grayTextColor">
               در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
               شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
               دیگران متوجه شوند.
             </p>
           )}
 
-          <div className="flex item-center justify-between w-full mt-4">
+          <div className="flex item-center justify-between w-full">
             {blogAuthor && (
               <div className="flex items-center">
-                <img src={blogAuthorImg} alt="" className="w-7 h-7" />
+                <img src={blogAuthorImg} alt="" className="w-6 h-6" />
                 <p className="text-xs text-lightGrayTextColor font-light mr-2">
                   حامد دژبانی نسب
                 </p>
@@ -53,7 +53,7 @@ const BlogDesign5 = ({ blogExcerpt, blogAuthor, blogComments }) => {
                 <p className="text-xs text-lightGrayTextColor font-light ml-2">
                   زمان مطالعه 30 دقیقه
                 </p>
-                <img src={commentIcon} alt="" className="w-7 h-7" />
+                <img src={commentIcon} alt="" className="w-6 h-6" />
               </div>
             )}
           </div>