package-lock.json

@@ -4562,6 +4562,11 @@
                 }
             }
         },
+        "jquery": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+            "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
+        },
         "js-base64": {
             "version": "2.6.4",
             "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",

package.json

@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "bootstrap": "^5.0.2",
+        "jquery": "^3.6.0",
         "node-sass": "^6.0.1"
     }
 }

resources/js/app.js

@@ -1 +1,2 @@
 require('bootstrap/dist/js/bootstrap.bundle.js');
+window.$ = require('jquery/dist/jquery.js');

resources/sass/_variables.scss

@@ -1,5 +1,5 @@
 // Body
-$body-bg: #f8fafc;
+$body-bg: #f2f3f9;
 
 // Typography
 $font-family-sans-serif: 'Nunito', sans-serif;
@@ -18,31 +18,28 @@ $green: #38c172;
 $teal: #4dc0b5;
 $cyan: #6cb2eb;
 
-//$primary: #632d11;
-//$primary: #c65b1c;
-//$primary: #ce4f04;
-//$primary: #e65600;
-//$primary: #BE5846;
-//$primary: #9E6B4D;
-//$primary: #3A1000;
-//$primary: #9d3b03;
-//$primary: #bd4602;
-$primary: #bd1802;
-//$primary: #e45300;
-//$primary: #fd623b;
-
-//$warning: #ffed4b;
-//$warning: #ffe54a;
-$warning: #ffe024;
-//$warning: #e2a750;
-$light-gray: #f5f3ec;
-$dark: #1b1e21;
-/*$theme-orange: #f9b000;*/
+// new color
+$primary : #07689F;
+$info: #A2D5F2;
+$secondary: #FF7E67;
+$success: #198754;
+$warning: #ffc107;
+$danger: #dc3545;
+$light: #f8f9fa;
+$dark: #212529;
+$gray: #6c757d;
 
 $theme-colors: (
-    light-gray : $light-gray,
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark,
+    "gray":         $gray
 );
-
 //
 // Panel Side Application Variables
 
@@ -56,13 +53,8 @@ $sidebar-width: 230px;
 // ------- Sidebar Colors --------
 
 // Background color of sidebar
-//$sidebar-color: rgba(116, 117, 118, 0.87);
 $sidebar-color: #747576;
 
-// -- Suggested sidebar background colors
-// dark  : #222d32
-// light : #f8f8f8
-
 // Sidebar accent varible is used to determine the color of the links
 // of the sidebar. The allowed values are 'light' or 'dark' only
 $sidebar-accent: light;
@@ -72,11 +64,6 @@ $sidebar-accent: light;
 $sidebar-dark-color: #fff;
 $sidebar-dark-link-color: #fff;
 
-// The following varibles indecate sidebar link color
-// and link hover color when using a light sidebar color
-//$sidebar-light-color: #000;
-//$sidebar-light-link-color: #333;
-
 
 //
 $sidebar-light-color: #fff;

resources/sass/home/home.scss

@@ -3,6 +3,368 @@
 @import '../fonts/awesome/awesome-font.css';
 @import '../fonts/iransans/iransans-font.css';
 
+body {
+    font-family: iransans;
+}
 
+h1 {
+    font-size: 1.5rem;
+}
 
+h2 {
+    font-size: 1.4rem;
+}
 
+h3 {
+    font-size: 1.3rem;
+}
+
+h4 {
+    font-size: 1.2rem;
+}
+
+h5 {
+    font-size: 1.1rem;
+}
+
+h6 {
+    font-size: 1rem;
+}
+.fs-8 {
+    font-size: 0.8rem;
+}
+a {
+    transition: all 0.3s ease;
+    text-decoration: none;
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+// style for content single article page
+.container-article-width {
+    @media screen and (min-width: 1400px){
+        max-width: 1200px;
+    }
+    @media screen and (min-width: 1200px) and (max-width: 1399px){
+        max-width: 750px;
+    }
+    @media screen and (min-width: 992px) and (max-width: 1199px){
+        max-width: 800px;
+    }
+    .article-content-holder {
+        margin: 3rem 0;
+        .title {
+            margin-bottom: 1.5rem;
+            line-height: 2;
+            color: $primary;
+        }
+        .author-published-holder {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1.5rem;
+            .author-avatar {
+                width: 3rem;
+                height: 3rem;
+                border-radius: 50%;
+            }
+            .author-published-text {
+                margin-right: 0.75rem;
+                .author-name {
+                    margin-bottom: 0.625rem;
+                }
+                .published-at {
+                    color: lighten($gray, 20);
+                    font-size: 80%;
+                }
+            }
+        }
+        .content-text {
+            h1, h2, h3, h4,h5, h6 {
+                margin-top: 2em;
+                margin-bottom: 1em;
+                &:first-child {
+                    margin-top: 0;
+                }
+            }
+            div {
+                text-align: justify;
+                line-height: 2;
+                margin-bottom: 0.75rem;
+            }
+            ul {
+                list-style-type: none;
+                padding-right: 1.2rem;
+                padding-left: 1.2rem;
+                li {
+                    line-height: 2;
+                    &:before {
+                        content: '✓';
+                        color: $primary;
+                        padding: 2px 0 2px 2px;
+                        font-weight: 600;
+                    }
+                }
+            }
+            ol {
+                counter-reset: item;
+                padding-right: 1.2rem;
+                padding-left: 1.2rem;
+                li {
+                    display: block;
+                    line-height: 2;
+                    &:before {
+                        content: counter(item) ". ";
+                        counter-increment: item;
+                        color: $primary;
+                        font-weight: 600;
+                    }
+                }
+            }
+            div {
+                img {
+                    margin: 1rem 0;
+                    @media screen and (max-width: 992px){
+                        max-width: 100%;
+                    }
+                }
+            }
+            video {
+                margin: 1rem 0;
+                width: 100%;
+            }
+            table {
+                margin: 1rem 0;
+                thead {
+                    background-color: $primary;
+                    color: $white;
+                }
+            }
+            blockquote{
+                background: #f9f9f9;
+                border-right: 0.625rem solid $info;
+                margin: 0.5rem 1.2rem;
+                padding: 10px 20px;
+                &:before {
+                    content: '\201D';
+                    line-height: 0;
+                    right: -11px;
+                    position: relative;
+                    top: 30px;
+                    color: $info;
+                    font-size: 3em;
+                }
+            }
+        }
+    }
+    .article-button {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 3rem;
+    }
+}
+
+// comments
+.comment-customers {
+    .parent-reply-body {
+        .reply-post {
+            border-left: 1px solid;
+            color: lighten($gray, 20);
+            height: 22px;
+            padding-left: 0.625rem;
+            .reply-post-icon {
+                transition: all 0.5s ease;
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+        .reply-post-like-button {
+            padding-right: 0.625rem;
+            font-size: 15px;
+            display: inline-block;
+            color: #afb6bc;
+        }
+        .user-description {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.5rem;
+            @media screen and (max-width: 576px){
+                align-items: baseline;
+            }
+            .user-description-holder {
+                display: flex;
+                align-items: flex-end;
+                @media screen and (max-width: 576px){
+                    align-items: flex-start;
+                    flex-direction: column;
+                }
+            }
+            .user-name {
+                color: $primary;
+                font-weight: 600;
+                padding-left: 0.625rem;
+                @media screen and (max-width: 576px){
+                    margin-bottom: 0.5rem;
+                }
+            }
+            .item-details {
+                display: flex;
+                align-items: baseline;
+                color: lighten($gray, 20);
+                font-size: 80%;
+                .item-details-clock {
+                    margin-left: 0.25rem;
+                }
+                .item-details-time {
+                    border-right: 1px solid;
+                    padding-right: 0.25rem;
+                }
+                .item-details-date {
+                    padding-left: 0.25rem;
+                }
+            }
+        }
+        .user-comment-text {
+            margin: 1rem 0;
+            text-align: justify;
+        }
+    }
+    .form-reply-opinion {
+        margin: 0.5rem 0 1.5rem;
+    }
+
+}
+
+// latest article in single bolg page
+.latest-article {
+    .card {
+        background: transparent;
+        border: none
+    }
+    .card-title {
+        line-height: 2;
+        text-align: justify;
+        color: $primary;
+    }
+    .card-text {
+        text-align: justify;
+    }
+    .author-published-holder {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1.5rem;
+        margin-top: 1rem
+    }
+    .author-avatar {
+        width: 3rem;
+        height: 3rem;
+        border-radius: 50%;
+    }
+    .author-published-text {
+        margin-right: 0.75rem;
+    }
+    .author-name {
+        margin-bottom: 0.625rem;
+    }
+    .published-at {
+        color: lighten($gray, 20);
+        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: 32px 32px;
+        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;
+        }
+        .sub-title {
+            color: lighten($gray, 20);
+            font-size: 80%;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.25rem;
+            @media screen and (max-width: 576px) {
+                flex-direction: column;
+            }
+            .fa {
+                color: $info;
+            }
+            .published-at {
+                margin-left: 0.625rem;
+            }
+        }
+        .title {
+            font-size: 1.1rem;
+            font-weight: 500;
+            line-height: 2;
+        }
+        .lead-text {
+            margin-top: 0.625rem;
+            color: $gray;
+            line-height: 2;
+            text-align: justify;
+        }
+        .category {
+            margin-top: 0.75rem;
+        }
+        .article-footer {
+            margin-top: 1.2rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .author-published-holder {
+                display: flex;
+                align-items: center;
+                .author-avatar {
+                    width: 3rem;
+                    height: 3rem;
+                    border-radius: 50%;
+                }
+                .author-name {
+                    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

@@ -0,0 +1,118 @@
+
+@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">
+                                <span class="fs-8">
+                                    دسته‌بندی:
+                                </span>
+                                <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">
+                                        ادامه مطلب
+                                        <i class="fa fa-arrow-left align-middle"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        @endfor
+                    </div>
+                </div>
+                <div class="col-lg-3">
+                    <div class="my-3 text-center">
+                        <img src="{{ asset('images/home/banner/g6.gif') }}" alt="image">
+                    </div>
+                    <div class="my-3 text-center">
+                        <img src="{{ asset('images/home/banner/g5.gif') }}" alt="image">
+                    </div>
+                </div>
+                <div class="col-lg-12">
+                    <div class="pagination-holder d-flex justify-content-center">
+                        <nav>
+                            <ul class="pagination pagination">
+                                <li class="page-item active" aria-current="page">
+                                    <span class="page-link">1</span>
+                                </li>
+                                <li class="page-item"><a class="page-link" href="#">2</a></li>
+                                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        </section>
+    @endslot
+
+    @slot('script')
+        <script>
+        </script>
+    @endslot
+
+@endcomponent
+

resources/views/home/layouts/app.blade.php

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html lang="fa" dir="rtl">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

resources/views/home/layouts/footer.blade.php

@@ -1,5 +1,5 @@
-<footer>
+{{--<footer>
     <h2>
         footer
     </h2>
-</footer>
+</footer>--}}

resources/views/home/layouts/navbar.blade.php

@@ -1,4 +1,31 @@
 {{--<nav class="navbar navbar-expand-lg navbar-light sticky-top bg-dark">--}}
+{{--
 <nav class="navbar navbar-expand-lg navbar-light bg-dark">
     navbar
 </nav>
+--}}
+<nav class="navbar navbar-expand-lg navbar-light bg-white">
+    <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <a class="navbar-brand" href="#">Navbar</a>
+        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Link</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+                </li>
+            </ul>
+            <form class="d-flex">
+                <input class="form-control ms-2" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+        </div>
+    </div>
+</nav>

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

@@ -0,0 +1,364 @@
+
+@component('home.layouts.component', ['title' => 'صفحه تکی مقاله'])
+
+    @slot('style')
+    @endslot
+
+    @slot('content_top')
+    @endslot
+
+    @slot('content')
+        <div class="container">
+            <div class="d-flex justify-content-center">
+                <div class="container-article-width">
+                    <div class="article-content-holder">
+                        <h1 class="title">
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+                        </h1>
+                        <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 class="published-at">
+                                    ۱۴۰۰/۰۴/۱۸
+                                </div>
+                            </div>
+                        </div>
+                        <div class="content-text">
+                            <h1>
+                                عنوان مقاله متون بلکه روزنامه و مجله در ستون
+                            </h1>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <h2>
+                                عنوان مقاله متون بلکه روزنامه و مجله در ستون
+                            </h2>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <h3>
+                                عنوان مقاله متون بلکه روزنامه و مجله در ستون
+                            </h3>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <ul>
+                                <li>روزنامه و مجله در ستون</li>
+                                <li>روزنامه و مجله در ستون</li>
+                                <li>روزنامه و مجله در ستون</li>
+                            </ul>
+                            <h2>
+                                عنوان مقاله متون بلکه روزنامه و مجله در ستون
+                            </h2>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <ol>
+                                <li>روزنامه و مجله در ستون</li>
+                                <li>روزنامه و مجله در ستون</li>
+                                <li>روزنامه و مجله در ستون</li>
+                            </ol>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <div>
+                                <img width="600" height="300" src="https://www.codeitbro.com/wp-content/uploads/2020/09/benefits-of-computer-programming.jpg" alt="img">
+                            </div>
+                            <h2>
+                                عنوان مقاله متون بلکه روزنامه و مجله در ستون
+                            </h2>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <div>
+                                <video controls>
+                                    <source src="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.ogv" type="video/ogg">
+                                    <source src="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.mp4" type="video/mp4">
+                                    Please <a href="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.mp4" download>download</a> the video.
+                                </video>
+                            </div>
+                            <h2>
+                                عنوان مقاله متون بلکه روزنامه و مجله در ستون
+                            </h2>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <table class="table table-bordered">
+                                <thead>
+                                <tr>
+                                    <th scope="col">ردیف</th>
+                                    <th scope="col">عنوان</th>
+                                    <th scope="col">تعداد</th>
+                                    <th scope="col">توضیحات</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <th scope="row">۱</th>
+                                    <td>متن</td>
+                                    <td>۲۳۵</td>
+                                    <td>توضیحات</td>
+                                </tr>
+                                <tr>
+                                    <th scope="row">۲</th>
+                                    <td>متن</td>
+                                    <td>۴۵۷۴</td>
+                                    <td>توضیحات</td>
+                                </tr>
+                                </tbody>
+                            </table>
+                            <h2>
+                                عنوان مقاله متون بلکه روزنامه و مجله در ستون
+                            </h2>
+                            <div>
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                            </div>
+                            <figure>
+                                <blockquote>
+                                    <div>
+                                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                                    </div>
+                                </blockquote>
+                            </figure>
+                        </div>
+                    </div>
+                    <div class="article-button">
+                        <button class="btn btn-primary">
+                            بعدی
+                        </button>
+                        <button class="btn btn-primary">
+                            قبلی
+                        </button>
+                    </div>
+                    <hr>
+                    <div class="comments-holder">
+                        <!-- comments user form -->
+                        <div class="comments-content">
+                            <h5>
+                                دیدگاه کاربران
+                            </h5>
+                            <div class="my-3">
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون
+                            </div>
+                            <div class="form-opinion">
+                                <form action="">
+                                    <div class="row">
+                                        <div class="col-lg-4 col-md-6 mb-2">
+                                            <div class="form-group">
+                                                <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-4 col-md-6 mb-2">
+                                            <div class="form-group">
+                                                <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-4 col-md-12 mb-2">
+                                            <div class="form-group">
+                                                <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                            </div>
+                                        </div>
+                                        <div class="col-md-12 mb-2">
+                                            <div class="form-group">
+                                                <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-12">
+                                            <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                        <!-- show comments user -->
+                        <div class="pb-5 comment-customers">
+                            <div class="media border p-3 mt-3">
+                                <div class="media-body">
+                                    <div class="parent-reply-body">
+                                        <div class="user-description">
+                                        <span class="user-description-holder">
+                                            <span class="user-name">
+                                                آرش محبی
+                                            </span>
+                                            <span class="item-details">
+                                                <i class="fa fa-clock-o item-details-clock"></i>
+                                                <span>
+                                                    <span class="item-details-date">
+                                                        ۱۷ خرداد ۱۳۹۹
+                                                    </span>
+                                                    <span class="item-details-time">
+                                                        ۱۲:۱۸
+                                                    </span>
+                                                </span>
+                                            </span>
+                                        </span>
+                                            <span class="d-flex">
+                                            <span class="reply-post">
+                                                <i class="fa fa-reply reply-post-icon"></i>
+                                            </span>
+                                            <span class="reply-post-like-button">
+                                                <span class="reply-post-like-count">۱۲</span>
+                                                <i class="fa fa-heart-o"></i>
+                                            </span>
+                                        </span>
+                                        </div>
+                                        <div class="user-comment-text">
+                                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت با استفاده از طراحان گرافیک است، چاپگرها
+                                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت با استفاده از طراحان گرافیک است، چاپگرها
+                                            چاپ، و با استفاده از طراحان گرافیک است، چاپگرها
+                                        </div>
+                                        <div class="form-reply-opinion" style="display: none;">
+                                            <form action="">
+                                                <div class="row">
+                                                    <div class="col-lg-4 col-md-6 mb-2">
+                                                        <div class="form-group">
+                                                            <input class="form-control" id="form_name" type="text" name="name" placeholder="نام">
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-lg-4 col-md-6 mb-2">
+                                                        <div class="form-group">
+                                                            <input class="form-control" id="form_email" type="email" name="email" placeholder="ایمیل">
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-lg-4 col-md-12 mb-2">
+                                                        <div class="form-group">
+                                                            <input class="form-control" id="form_subject" type="text" name="subject" placeholder="موضوع">
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-md-12 mb-2">
+                                                        <div class="form-group">
+                                                            <textarea class="form-control" id="form_message" name="message" placeholder="دیدگاه" rows="4"></textarea>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-md-12">
+                                                        <button type="submit" class="btn btn-primary"><span>ارسال دیدگاه</span></button>
+                                                        <button class="btn btn-danger btn-cancel-reply"><span>انصراف</span></button>
+                                                    </div>
+                                                </div>
+                                            </form>
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="media px-3 pt-3">
+                                            <div class="media-body">
+                                                <div class="parent-reply-body">
+                                                    <div class="user-description">
+                                                    <span class="user-description-holder">
+                                                        <span class="user-name">
+                                                            آرشftgyrht محبی
+                                                        </span>
+                                                        <span class="item-details">
+                                                            <i class="fa fa-clock-o item-details-clock"></i>
+                                                            <span>
+                                                                <span class="item-details-date">
+                                                                    ۱۷ خرداد ۱۳۹۹
+                                                                </span>
+                                                                <span class="item-details-time">
+                                                                    ۱۲:۱۸
+                                                                </span>
+                                                            </span>
+                                                        </span>
+                                                    </span>
+                                                    </div>
+                                                    <div class="user-comment-text">
+                                                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
+                                                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت با استفاده از طراحان گرافیک است، چاپگرها
+                                                        با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <!-- paginate -->
+                                <div class="pagination-holder">
+                                    <nav>
+                                        <ul class="pagination pagination">
+                                            <li class="page-item active" aria-current="page">
+                                                <span class="page-link">1</span>
+                                            </li>
+                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
+                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="container my-4">
+            <hr>
+            <div class="latest-article">
+                <h5>
+                    مقالات اخیر
+                </h5>
+                <div class="row">
+                    @for($i=0; $i<3; $i++)
+                        <div class="col-lg-4">
+                            <div class="card">
+                                <div class="card-body">
+                                    <h5 class="card-title">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم</h5>
+                                    <p class="card-text">
+                                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت با استفاده از طراحان گرافیک است، چاپگرها با استفاده از طراحان گرافیک است،
+                                    </p>
+                                    <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 class="published-at">
+                                                ۱۴۰۰/۰۴/۱۸
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    @endfor
+                </div>
+            </div>
+        </div>
+    @endslot
+
+    @slot('script')
+        <script>
+            $('.reply-post-icon').click(function () {
+                $('.form-opinion').slideUp();
+                $(this).parents('.parent-reply-body').find('.form-reply-opinion').slideDown();
+            });
+
+            $('.btn-cancel-reply').click(function (e) {
+                e.preventDefault();
+                $('.form-opinion').slideDown();
+                $(this).parents('.parent-reply-body').find('.form-reply-opinion').slideUp();
+            });
+        </script>
+    @endslot
+
+@endcomponent
+

routes/web.php

@@ -16,3 +16,10 @@ use Illuminate\Support\Facades\Route;
 Route::get('/', function () {
     return view('home.home');
 });
+Route::get('/single-blog', function () {
+    return view('home.single-blog');
+});
+
+Route::get('/category-blog', function () {
+    return view('home.category-blog');
+});

webpack.mix.js

@@ -12,4 +12,5 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/home/home.js', 'public/js')
-    .sass('resources/sass/home/home.scss', 'public/css');
+    .sass('resources/sass/home/home.scss', 'public/css')
+    .copyDirectory('resources/images/home', 'public/images/home');