Created route for our-team page, Completed static design for our-team page

resources/sass/home/home.scss

@@ -41,7 +41,9 @@ a {
     }
 }
 
+// ------------------------------------
 // navbar
+// ------------------------------------ 
 .navbar {
     min-height: 80px;
     .nav-link {
@@ -51,7 +53,6 @@ a {
         @media screen and (max-width: 991px){
             padding: 0.375rem 0;
             font-weight: 500;
-            //border-top: 1px solid #eee;
             border-top: 1px dashed #eee;
         }
     }
@@ -126,7 +127,6 @@ a {
         }
     }
     .navbar-nav {
-        //padding-right: 1.25rem;
         padding: 0 1rem;
     }
 }
@@ -135,7 +135,9 @@ a {
     color: $secondary;
 }
 
+// ------------------------------------
 // footer
+// ------------------------------------ 
 footer {
     line-height: 2;
     text-align: justify;
@@ -187,7 +189,10 @@ footer {
         }
     }
 }
-// style for content single article page
+
+// ------------------------------------
+// content single article page
+// ------------------------------------ 
 .container-article-width {
     @media screen and (min-width: 1400px){
         max-width: 1200px;
@@ -201,6 +206,7 @@ footer {
     .article-content-holder {
         margin: 3rem 0;
         .title {
+            text-align: right;
             margin-bottom: 1.5rem;
             line-height: 2;
             color: $primary;
@@ -429,7 +435,9 @@ footer {
     }
 }
 
+// ------------------------------------
 // pagination
+// ------------------------------------ 
 .pagination-holder {
     margin-top: 2rem;
     .pagination {
@@ -449,7 +457,9 @@ footer {
     }
 }
 
-// style for category blog page
+// ------------------------------------
+// category blog page
+// ------------------------------------ 
 .article-category-title-holder {
     color: $primary;
     line-height: 2;
@@ -485,6 +495,7 @@ footer {
             font-size: 1.1rem;
             font-weight: 500;
             line-height: 2;
+            text-align: right;
         }
         .lead-text {
             margin-top: 0.625rem;
@@ -523,8 +534,9 @@ footer {
     }
 }
 
-
-// -----------------------home
+// ------------------------------------
+// home page
+// ------------------------------------
 //banner home page
 .banner-holder {
     .banner-item {
@@ -722,10 +734,11 @@ footer {
 // title section for home page
 .title {
     font-weight: 600;
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     line-height: 2;
     margin-bottom: 0.5rem;
     text-align: center;
+    color: $primary;
 }
 .title-desc {
     width: 70%;
@@ -785,3 +798,60 @@ footer {
         }
     }
 }
+
+// ------------------------------------
+// Our team page
+// ------------------------------------
+.our-team-holder {
+    padding: 2.5rem 0;
+    .title, .title-desc {
+        text-align: justify;
+    }
+    .title-desc {
+        width: 100%;
+    }
+    .our-team-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 72px;
+    }
+    .title-desc , .our-team-item {
+        @media screen and (max-width: 576px) {
+            margin-bottom: 2.52rem;
+        }
+    }
+    .avatar-holder {
+        img {
+            width: 7rem;
+            height: 7rem;
+            border-radius: 50%;
+        }
+    }
+    .teammate-name {
+        line-height: 2;
+        margin-bottom: 0.5rem;
+        @media screen and (max-width: 576px) {
+            margin-bottom: 0.25rem;
+            font-size: 0.8rem;
+        }
+    }
+    .teammate-job {
+        color: $primary;
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+    }
+    .teammate-contact {
+        a {
+            margin-left: 0.4rem;
+        }
+        .fa {
+            color: lighten($secondary, 10);
+        }
+    }
+    .teammate-description-holder {
+        margin-right: 0.75rem;
+    }
+    .our-team-padding {
+        padding: 0 20px;
+    }
+}

resources/views/home/our-team.blade.php

@@ -0,0 +1,169 @@
+
+@component('home.layouts.component', ['title' => 'صفحه همکاران'])
+
+@slot('style')
+@endslot
+
+@slot('content_top')
+@endslot
+
+@slot('content')
+    <section class="our-team-holder">
+        <div class="container">
+            <div class="d-flex justify-content-center">
+                <div class="container-article-width">
+                    <div class="row">
+                        <div class="col-lg-12 our-team-padding">
+                            <h2 class="title">
+                                همکاران ما
+                            </h2>
+                        </div>
+                        <div class="col-lg-6 our-team-padding">                            
+                            <div class="title-desc">
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                            </div>
+                        </div>                
+                        <div class="col-lg-6 col-sm-6 col-12 our-team-padding">
+                            <div class="our-team-item">
+                                <div class="avatar-holder">
+                                    <img src="https://beyondco.de/img/marcel.jpg" alt="avatar">
+                                </div>
+                                <div class="teammate-description-holder">
+                                    <div class="teammate-name">
+                                        امیدرضا واشقانی فراهانی
+                                    </div>
+                                    <div class="teammate-job">
+                                        مدیر فنی
+                                    </div>
+                                    <div class="teammate-contact">
+                                        <a href="">
+                                            <i class="fa fa-instagram"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-linkedin"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-github"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>                
+                        <div class="col-lg-6 col-sm-6 col-12 our-team-padding">
+                            <div class="our-team-item">
+                                <div class="avatar-holder">
+                                    <img src="https://beyondco.de/img/marcel.jpg" alt="avatar">
+                                </div>
+                                <div class="teammate-description-holder">
+                                    <div class="teammate-name">
+                                        فروزان امیری دوانی
+                                    </div>
+                                    <div class="teammate-job">
+                                        برنامه‌نویس
+                                    </div>
+                                    <div class="teammate-contact">
+                                        <a href="">
+                                            <i class="fa fa-instagram"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-linkedin"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-github"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 col-sm-6 col-12 our-team-padding">
+                            <div class="our-team-item">
+                                <div class="avatar-holder">
+                                    <img src="https://beyondco.de/img/marcel.jpg" alt="avatar">
+                                </div>
+                                <div class="teammate-description-holder">
+                                    <div class="teammate-name">
+                                        اعظم مرادخانی
+                                    </div>
+                                    <div class="teammate-job">
+                                        برنامه‌نویس
+                                    </div>
+                                    <div class="teammate-contact">
+                                        <a href="">
+                                            <i class="fa fa-instagram"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-linkedin"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-github"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 col-sm-6 col-12 our-team-padding">
+                            <div class="our-team-item">
+                                <div class="avatar-holder">
+                                    <img src="https://beyondco.de/img/marcel.jpg" alt="avatar">
+                                </div>
+                                <div class="teammate-description-holder">
+                                    <div class="teammate-name">
+                                        سحر فلاحی
+                                    </div>
+                                    <div class="teammate-job">
+                                        برنامه‌نویس
+                                    </div>
+                                    <div class="teammate-contact">
+                                        <a href="">
+                                            <i class="fa fa-instagram"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-linkedin"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-github"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-lg-6 col-sm-6 col-12 our-team-padding">
+                            <div class="our-team-item">
+                                <div class="avatar-holder">
+                                    <img src="https://beyondco.de/img/marcel.jpg" alt="avatar">
+                                </div>
+                                <div class="teammate-description-holder">
+                                    <div class="teammate-name">
+                                        اعظم گلستان
+                                    </div>
+                                    <div class="teammate-job">
+                                        برنامه‌نویس
+                                    </div>
+                                    <div class="teammate-contact">
+                                        <a href="">
+                                            <i class="fa fa-instagram"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-linkedin"></i>
+                                        </a>
+                                        <a href="">
+                                            <i class="fa fa-github"></i>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+@endslot
+
+@slot('script')
+    <script>
+    </script>
+@endslot
+
+@endcomponent
+

routes/web.php

@@ -23,3 +23,7 @@ Route::get('/single-blog', function () {
 Route::get('/category-blog', function () {
     return view('home.category-blog');
 });
+
+Route::get('/our-team', function () {
+    return view('home.our-team');
+});