Added services section for home page

resources/sass/home/home.scss

@@ -524,4 +524,136 @@ footer {
     background-position: center center !important;
     display: flex;
     align-items: center;
-}
+}
+.services-holder {
+    text-align: center;
+    padding: 2.5rem 0 ;
+    .title {
+        font-weight: 600;
+        font-size: 1.4rem;
+        line-height: 2;
+        margin-bottom: 0.5rem;
+        text-align: center;
+    }
+    .title-desc {
+        width: 70%;
+        margin: 0 auto 72px;
+        font-size: 0.875rem;
+        line-height: 2;
+        color: lighten($gray , 10);
+    }
+    .feature-box-holder {
+        background-color: $white;
+        border-radius: 0.93rem;
+        padding: 1.5rem 1.8rem;
+        position: relative;
+        filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.099));
+        border-bottom-width: 4px;
+        border-bottom-style: solid;
+        border-bottom-color: $secondary;
+        transition: all .4s ease;
+        border-top-width: 4px;
+        border-top-style: solid;
+        border-top-color: transparent;
+        box-sizing: border-box;
+        @media screen and (max-width: 991px){
+            margin-bottom: 3rem;
+        }
+        &:hover {
+            border-top-width: 4px;
+            border-top-style: solid;
+            border-top-color: $secondary;
+        }
+        .featured-icon-holder {
+            position: absolute;
+            top: -38px;
+            right: 25px;
+            .featured-icon {
+                height: 63px;
+                width: 63px;
+                line-height: 63px;
+                background-color: $secondary;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                i {
+                    color: $white;
+                    font-size: 1.2rem;
+                }
+            }
+        }
+        .feature-content {
+            .feature-title {
+                text-align: justify;
+                font-size: 1.04rem;
+                line-height: 2;
+                font-weight: 500;
+                margin: 0.5rem 0 0.35rem 0;
+            }
+            .sub-title {
+                text-align: justify;
+                line-height: 2;
+                color: lighten($gray , 10);
+            }
+            .link-holder {
+                font-size: 85%;
+                text-align: justify;
+                font-weight: 500;
+                margin-top: 0.625rem;
+                a {
+                    &:hover {
+                        color: $secondary;
+                    }
+                }
+            }
+        }
+    }
+    .end-button {
+        display: inline-block;
+        width: 100%;
+        position: relative;
+        margin-top: 2.75rem;
+        @media screen and (max-width: 991px){
+            margin-top: 0;
+        }
+        &:before, &:after {
+            position: absolute;
+            content: "";
+            right: auto;
+            left: 50%;
+            top: 20px;
+            height: 1px;
+            width: 30%;
+            margin: 0 40px;
+            background-color: lighten($gray, 40);
+            transition: all .4s;
+        }
+        &:before {
+            right: auto;
+            left: 50%;
+        }
+        &:after {
+            right: 50%;
+            left: 0;
+        }
+        span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            height: 40px;
+            width: 40px;
+            line-height: 37px;
+            font-size: 1.25rem;
+            font-weight: 400;
+            border-radius: 50%;
+            border: 1px solid;
+            margin: 0 auto;
+            transition: all .4s;
+        }
+    }
+    .end-button-text {
+        margin-top: 0.6rem;
+    }
+}

resources/views/home/home.blade.php

@@ -7,25 +7,69 @@
     @endslot
 
     @slot('content')
-      <!-- <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);"> -->
-      <!-- <div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/communication-technology-selective-focus-science-internet-closeup_1421-252.jpg);"> -->
-      <!-- <div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/topview-flat-lay-business-working-place_1421-104.jpg);"> -->
-      <!-- <div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/close-up-businessman-with-digital-tablet_1098-549.jpg);"> -->
-      <!-- <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);"> -->
-      <div class="banner-holder" style="background-image: url(https://image.freepik.com/free-photo/laptop-with-colorful-business-documents_1232-821.jpg);">
-
-      </div>
-      <section>
-        <div class="container" style="text-align: justify; padding: 35px 0 ;">
-          <h1>
-              عنوان مقاله متون بلکه روزنامه و مجله در ستون
-          </h1>
-          <div>
-          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
-          </div>
-        </div>
-      </section>
+        <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>
+        </section>
+        <section class="services-holder">
+            <div class="container">
+                <h2 class="title">
+                    خدمات دیزاتک
+                </h2>
+                <div class="title-desc">
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                </div>
+
+                <div class="row">
+                    @for($i=0; $i<4; $i++)
+                    <div class="col-lg-3 col-md-6 col-sm-12">
+                        <div class="feature-box-holder">
+                            <div class="featured-icon-holder">
+                                <div class="featured-icon">
+                                    <i class="fa fa-bar-chart"></i>
+                                </div>
+                            </div>
+                            <div class="feature-content">
+                                <div class="feature-title">
+                                    عنوان خدمت اول
+                                </div>
+                                <div class="sub-title">
+                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
+                                </div>
+                                <div class="link-holder">
+                                    <a href="">
+                                        ادامه مطلب
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    @endfor
+                    <div class="col-12">
+                        <div>
+                            <a href="#" class="end-button">
+                            <span>
+                                <i class="fa fa-plus"></i>
+                            </span>
+                            </a>
+                        </div>
+                        <div class="end-button-text">
+                            <a href="#">
+                                خدمات بیشتر را مشاهده کنید.
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </section>
     @endslot
 
     @slot('script')