gbu css

src/gbu/component/layout/header/header.component.html

@@ -8,7 +8,7 @@
       <ico ico="search_24" color="white" [size]="24"></ico>
       Поиск
     </div>
-    <div class="header-top-menu-ref" (click)="login()">
+    <div class="header-top-menu-ref" (click)="login()" *ngIf="!isLoggedIn">
       <ico ico="login_24" color="white" [size]="24"></ico>
       Вход
     </div>

src/gbu/component/layout/header/header.component.ts

@@ -42,4 +42,8 @@ export class HeaderComponent {
     this.authService.popup('login');
   }
 
+  get isLoggedIn() {
+    return this.authService.isLoggedIn;
+  }
+
 }

src/gbu/component/layout/jumbotron/jumbotron.component.html

@@ -1,4 +1,4 @@
-<div class="space">
+<div class="space" *ngIf="!isRootPage">
     <div class="jumbotron-content layout-corral">
         <header-user-bar></header-user-bar>
         <div class="breadcrumbs" *ngIf="parents.length>1">
@@ -14,6 +14,47 @@
         <img [src]="pagePicture">        
     </div>
 </div>
+
+
+<div class="space root-page" *ngIf="isRootPage">
+    <div class="jumbotron-content layout-corral">
+        <header-user-bar></header-user-bar>
+        <div class="breadcrumbs" *ngIf="parents.length>1">
+            <div *ngFor="let parent of parents">
+                <a [routerLink]="parent.link">                    
+                    <span>{{parent.name}}</span>
+                    <ico ico="chevron_right_24" [size]="24"></ico>
+                </a>
+            </div>
+            <div>{{currentPage.name}}</div>
+        </div>
+        <h1>{{name}}</h1>
+
+
+        <div class="root-menu">
+            <div  class="root-menu-item">
+                <img src="assets/images/root_menu_services.jpg" alt="">
+                <div>Услуги</div>
+            </div>
+            <div  class="root-menu-item">
+                <img src="assets/images/root_menu_replies.png" alt="">
+                <div>Отзывы</div>
+            </div>
+            <div  class="root-menu-item">
+                <img src="assets/images/root_menu_payment.png" alt="">
+                <div>Платные услуги</div>
+            </div>
+            <div  class="root-menu-item">
+                <img src="assets/images/root_menu_disabling.png" alt="">
+                <div>Плановые и аварийные отключения</div>
+            </div>
+
+        </div>
+
+   
+    </div>
+</div>
+
 <div class="space jumbotron-edit-field" *ngIf="editable" dir="ltr">
     <div class="layout-corral jumbotron-edit-field-row">
         <div class="switch-host" (click)="toggleEditMode()">

src/gbu/css/_grid.scss

@@ -19,7 +19,7 @@
 
 
 jumbotron{
-  margin-block: 40px;
+  margin-block: 40px 32px;
   .jumbotron-content{
     flex-direction: column;
     header-user-bar{
@@ -51,6 +51,62 @@ jumbotron{
     }
   }
 
+  .root-page{
+    h1{
+      font-size: 64px;
+      line-height: 80px;
+    }
+    .root-menu{
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: space-between;
+      .root-menu-item{
+        width: 844px;
+        height: 180px;
+        background-color: var(--prime);
+        display: flex;
+        align-items: flex-end;
+        margin-bottom: 24px;
+        border-radius: 4px;
+        overflow: hidden;
+        img{
+          width: 50%;
+          height: 100%;
+          object-fit: cover;
+          background-color: var(--light);
+        }
+        div{
+          padding: 16px;
+          color: #fff;
+        }
+      }
+      .root-menu-item:first-child{
+        display: flex;
+        flex-direction: column;
+        width: 411px;
+        height: 100%;
+        align-items: center;
+        img{
+          height: 532px;
+          width: 100%;
+          object-fit: cover;
+        }
+      }
+
+      .root-menu-item:nth-child(3){
+        flex-direction: row-reverse;
+      }
+      .root-menu-item:nth-child(4){
+        margin-bottom: 0;
+      }
+
+
+      height: 588px;
+      overflow: hidden;
+    }
+  }
+
 }
 
 
@@ -69,7 +125,7 @@ jumbotron{
   .content-grid{
     display: flex;
     justify-content: space-between;
-    margin: 40px 0 120px;
+    margin-bottom:  120px;
 
     left-content{
       display: none;
@@ -143,6 +199,9 @@ pages-menu-item{
   width: 100%;
 }
 
+.jumbotron-edit-field{
+  margin-top: 32px;
+}
 
 
 @media screen and (max-width: 1330px){