Added Image and introduction for banner home page

public/mix-manifest.json

@@ -1,4 +1,6 @@
 {
     "/js/home.js": "/js/home.js",
-    "/css/home.css": "/css/home.css"
+    "/css/home.css": "/css/home.css",
+    "/images/home/banner-bg-1.jpg": "/images/home/banner-bg-1.jpg",
+    "/images/home/banner-bg-2.jpg": "/images/home/banner-bg-2.jpg"
 }

resources/sass/home/home.scss

@@ -519,12 +519,77 @@ footer {
 // -----------------------home
 //banner home page
 .banner-holder {
-    min-height: 520px;
-    position: relative;
-    background-size: cover !important;
-    background-position: center center !important;
-    display: flex;
-    align-items: center;
+    .banner-item {
+        min-height: 545px;
+        position: relative;
+        background-size: cover !important;
+        background-position: center center !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        @media screen and (max-width: 991px){
+            display: none;
+        }
+        .content-holder {
+            width: 50%;    
+            text-align: center;
+            .content-title {
+                font-size: 1.8rem;
+                font-weight: 700;
+                line-height: 3;
+                color: $primary;
+            }   
+            .content-sub-title {
+                line-height: 2;
+                color: $primary;
+                font-weight: 500;
+                font-size: 1.1rem;
+            } 
+        }
+    }
+    .banner-item-md {
+        @media screen and (min-width: 992px){
+            display: none;
+        }
+        .img-holder {
+            position: relative;
+            .overlay-img {
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                background: linear-gradient(rgba(245, 245, 245, 0.7), rgba(226, 226, 226, 0.5));
+            }
+            .content {
+                position: absolute;
+                top: 50%;
+                left: 50%;;
+                transform: translate(-50%,-50%);
+                width: 95%;
+                text-align: center;
+                .content-title {
+                    color: $primary;
+                    font-weight: 600;
+                    font-size: 1.1rem;
+                    line-height: 2;
+                    @media screen and (max-width: 425px) {
+                        font-size: 0.9rem;
+                        font-weight: 500;
+                    }
+                }
+                .content-sub-title {
+                    color: $primary;
+                    font-weight: 500;
+                    line-height: 2;
+                    @media screen and (max-width: 425px) {
+                        font-size: 0.7rem;
+                        font-weight: 400;
+                    }
+                }
+            }
+        }
+    }
 }
 
 // services home page

resources/views/home/home.blade.php

@@ -8,14 +8,41 @@
 
     @slot('content')
         <section>
-            {{--<div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/data-technology-blue-background-with-hacker-remixed-media_53876-108534.jpg);">6--}}
-            {{--<div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/communication-technology-selective-focus-science-internet-closeup_1421-252.jpg);">5--}}
-            {{--<div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/topview-flat-lay-business-working-place_1421-104.jpg);"> 4--}}
-            {{--<div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/close-up-businessman-with-digital-tablet_1098-549.jpg);">3--}}
-            {{-- 1--}}
-            <div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/financial-charts-table-with-laptop_1232-2736.jpg);">
-                {{--<div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/profit-rich-resource-jobs-charts-learning_1418-582.jpg);"> 2 --}}
-
+            <div class="banner-holder">
+                <div class="banner-item" style="background:linear-gradient(rgba(245, 245, 245, 0.7), rgba(226, 226, 226, 0.5)), url({{ asset('images/home/banner-bg-2.jpg') }});">
+                    <div class="content-holder">
+                        <div class="content-title">
+                            <span>
+                                معرفی شرکت دیزاتک
+                            </span>
+                        </div>
+                        <div class="content-sub-title">
+                            <span>
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت.
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="banner-item-md">
+                    <div class="item-content">
+                        <div class="img-holder">
+                            <img class="w-100" src="{{ asset('images/home/banner-bg-1.jpg') }}">
+                            <div class="overlay-img"></div>
+                            <div class="content">
+                                <div class="content-title">
+                                    <span>
+                                        معرفی شرکت دیزاتک
+                                    </span>
+                                </div>
+                                <div class="content-sub-title">
+                                    <span>
+                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت.
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </section>
         <section class="services-holder">