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

@component('home.layouts.component', ['title' => 'صفحه دسته‌بندی مقاله'])

    @slot('style')
    @endslot

    @slot('content_top')
    @endslot

    @slot('content')
        <section class="container my-5">
            <div class="row">
                <div class="col-lg-9">
                    <h1 class="article-category-title-holder">
                        لیست مقالات
                    </h1>
                    <div class="article-category-content-holder">
                        @for($i=0; $i<6; $i++)
                        <div class="article-content">
                            <div class="sub-title">
                                <div class="d-flex">
                                    <div class="published-at">
                                        <i class="fa fa-calendar"></i>
                                        <span>
                                            ۱۴۰۰/۰۵/۰۳
                                        </span>
                                    </div>
                                    <div class="comments">
                                        <i class="fa fa-comment-o"></i>
                                        <span>
                                            ۴
                                        </span>
                                    </div>
                                </div>
                                <div class="duration-of-study">
                                    <i class="fa fa-clock-o"></i>
                                    <span>
                                        مدت زمان مطالعه ۲۴ دقیقه
                                    </span>
                                </div>
                            </div>
                            <div class="title">
                                <a href="">
                                    عنوان مقاله اول متون بلکه روزنامه و مجله در ستون
                                </a>
                            </div>
                            <div class="lead-text">
                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته
                            </div>
                            <div class="category">
                                <a href="" class="badge bg-info text-dark">
                                    #جاوا
                                </a>
                                <a href="" class="badge bg-info text-dark">
                                    #کدنویسی
                                </a>
                                <a href="#" class="badge bg-info text-dark">
                                    #برنامه‌نویسی
                                </a>
                                <a href="#" class="badge bg-info text-dark">
                                    #مهندسی معکوس
                                </a>
                            </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-name">
                                        مشخصات نویسنده
                                    </div>
                                </div>
                                <div class="learn-more">
                                    <a href="" class="btn btn-outline-primary">
                                        ادامه...
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endfor
                    </div>
                </div>
                <div class="col-lg-3">
                    <h1 class="article-category-title-holder">
                        مقالات اخیر
                    </h1>
                </div>
            </div>
        </section>
    @endslot

    @slot('script')
        <script>
        </script>
    @endslot

@endcomponent