Added card article for category blog page

resources/sass/home/home.scss

@@ -236,27 +236,7 @@ a {
 
 }
 
-// pagination
-.pagination-holder {
-    margin-top: 2rem;
-    .pagination {
-        padding-right: 0;
-    }
-    .page-item:first-child .page-link {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        border-top-right-radius: 0.25rem;
-        border-bottom-right-radius: 0.25rem;
-    }
-    .page-item:last-child .page-link {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-top-left-radius: 0.25rem;
-        border-bottom-left-radius: 0.25rem;
-    }
-}
-
-// latest article
+// latest article in single bolg page
 .latest-article {
     .card {
         background: transparent;
@@ -292,3 +272,94 @@ a {
         font-size: 80%;
     }
 }
+
+// pagination
+.pagination-holder {
+    margin-top: 2rem;
+    .pagination {
+        padding-right: 0;
+    }
+    .page-item:first-child .page-link {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
+    }
+    .page-item:last-child .page-link {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-top-left-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+    }
+}
+
+// style for category blog page
+.article-category-title-holder {
+    color: $primary;
+    line-height: 2;
+}
+.article-category-content-holder {
+    .article-content {
+        position: relative;
+        padding: 40px 24px;
+        transition: all 0.3s ease-in-out;
+        border-bottom: 1px solid #e8eaf1;
+        &:hover {
+            background-color: #e8eaf1;
+            border-bottom: 1px solid #e8eaf1;
+            border-radius: 0.25rem;
+        }
+        .article-link {
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            right: 0;
+        }
+        .published-at {
+            color: lighten($gray, 20);
+            font-size: 80%;
+        }
+        .title {
+            font-size: 1.4rem;
+            font-weight: 500;
+            line-height: 2;
+        }
+        .lead-text {
+            margin-top: 1rem;
+            color: $gray;
+            line-height: 2;
+            text-align: justify;
+        }
+        .article-footer {
+            margin-top: 1.2rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            @media screen and (max-width: 576px) {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .author-published-holder {
+                display: flex;
+                align-items: center;
+                .author-avatar {
+                    width: 3rem;
+                    height: 3rem;
+                    border-radius: 50%;
+                }
+                .author-published-text {
+                    margin-right: 0.75rem;
+                }
+            }
+            .duration-of-study {
+                color: lighten($gray, 20);
+                font-size: 80%;
+                @media screen and (max-width: 576px) {
+                    margin-top: 0.75rem;
+                }
+            }
+        }
+    }
+}

resources/views/home/category-blog.blade.php

@@ -8,14 +8,16 @@
     @endslot
 
     @slot('content')
-        <div class="container">
+        <section class="container my-5">
             <div class="row">
                 <div class="col-lg-8">
-                    <h1 class="title">
+                    <h1 class="article-category-title-holder">
                         لیست مقالات
                     </h1>
-                    <div class="article-category-holder">
+                    <div class="article-category-content-holder">
+                        @for($i=0; $i<6; $i++)
                         <div class="article-content">
+                            <a href="" class="article-link"></a>
                             <div class="published-at">
                                 ۱۴۰۰/۰۵/۰۳
                             </div>
@@ -25,12 +27,28 @@
                             <div class="lead-text">
                                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته
                             </div>
+                            <div class="article-footer">
+                                <div class="author-published-holder">
+                                    <div class="author-avatar-holder">
+                                        <img class="author-avatar" src="https://beyondco.de/img/marcel.jpg" alt="avater">
+                                    </div>
+                                    <div class="author-published-text">
+                                        <div class="author-name">
+                                            مشخصات نویسنده
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="duration-of-study">
+                                    مدت زمان مطالعه ۲۴ دقیقه
+                                </div>
+                            </div>
                         </div>
+                        @endfor
                     </div>
                 </div>
                 <div class="col-lg-4"></div>
             </div>
-        </div>
+        </section>
     @endslot
 
     @slot('script')