update

src/App.js

@@ -21,8 +21,8 @@ function App() {
       {/* <BookDesign /> */}
       {/* <ButtonDesign /> */}
       {/* <ProductTags /> */}
-      <CounterDesign />
+      {/* <CounterDesign /> */}
-      {/* <BlogDesign1 /> */}
+      <BlogDesign1 />
       {/* <BlogDesign2 /> */}
       {/* <BlogDesign3 /> */}
       {/* <BlogDesign4 /> */}

src/components/Blogs/design1/BlogDesign1.js

@@ -8,7 +8,6 @@ import commentIcon from "../../../assets/icons/black-comment-icon.svg";
 const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
   return (
     <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">
           طراحی بلاگ 1
@@ -24,24 +23,24 @@ const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
       </div>
       {/* blog UI Design1 */}
       <div className="flex items-center justify-around py-2 px-4">
-        <div className="w-4/12">
+        <div className="bg-blue-400">
-          <img src={blogImage} alt="" className="w-full" />
+          <img src={blogImage} alt="" className="w-96" />
         </div>
-        <div className="w-8/12 mr-4">
+        <div className="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 my-1 text-grayTextColor">
               در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
               شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
               دیگران متوجه شوند.
             </p>
           )}
-          <div className="flex item-center justify-between w-full mt-4">
+          <div className="flex item-center justify-between w-full mt-2">
             {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 mr-2 font-light">
                   حامد دژبانی نسب
                 </p>
@@ -52,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-7 h-7" />
+                <img src={commentIcon} alt="" className="w-6 h-6" />
               </div>
             )}
           </div>