Add intro page

src/app/app-routing.module.ts

@@ -3,10 +3,12 @@ import {RouterModule, Routes} from '@angular/router';
 
 import {DashboardComponent} from './dashboard/dashboard.component';
 import {HeroesComponent} from './heroes/heroes.component';
+import {IntroComponent} from "./intro-page/intro.component";
 
 const routes: Routes = [
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-  { path: 'dashboard', component: DashboardComponent },
+  { path: 'dashboard', component: IntroComponent },
+  { path: 'menu', component: DashboardComponent },
   { path: 'content', component: HeroesComponent }
 ];
 

src/app/app.component.html

-<h1>{{title}}</h1>
-<nav>
-  <a routerLink="/dashboard">Menu</a>
-  <a routerLink="/content">Content</a>
-</nav>
 <router-outlet></router-outlet>
-<app-messages></app-messages>

src/app/app.module.ts

-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { HttpClientModule }    from '@angular/common/http';
+import {APP_ID, Inject, NgModule, PLATFORM_ID} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {FormsModule} from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
 
-import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService }  from './in-memory-data.service';
+import {AppRoutingModule} from './app-routing.module';
 
-import { AppRoutingModule }     from './app-routing.module';
-
-import { AppComponent }         from './app.component';
-import { DashboardComponent }   from './dashboard/dashboard.component';
-import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
-import { HeroesComponent }      from './heroes/heroes.component';
-import { HeroSearchComponent }  from './hero-search/hero-search.component';
-import { HeroService }          from './hero.service';
-import { MessageService }       from './message.service';
-import { MessagesComponent }    from './messages/messages.component';
-
-import { PLATFORM_ID, APP_ID, Inject } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import {AppComponent} from './app.component';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {HeroDetailComponent} from './hero-detail/hero-detail.component';
+import {HeroesComponent} from './heroes/heroes.component';
+import {HeroSearchComponent} from './hero-search/hero-search.component';
+import {HeroService} from './hero.service';
+import {MessageService} from './message.service';
+import {MessagesComponent} from './messages/messages.component';
+import {isPlatformBrowser} from '@angular/common';
+import {IntroModule} from "./intro-page/intro.module";
 
 
 @NgModule({
@@ -27,6 +23,7 @@ import { isPlatformBrowser } from '@angular/common';
     FormsModule,
     AppRoutingModule,
     HttpClientModule,
+    IntroModule
   ],
   declarations: [
     AppComponent,

src/app/dashboard/dashboard.component.html

+<nav>
+  <a routerLink="/dashboard">Dashboard</a>
+  <a routerLink="/menu">Menu</a>
+  <a routerLink="/content">Content</a>
+</nav>
 <div class="grid grid-pad">
   <a *ngFor="let hero of heroes" class="col-1-4"
       routerLink="/detail/{{hero.id}}">

src/app/heroes/heroes.component.html

 <h2>Content</h2>
-
+<nav>
+  <a routerLink="/dashboard">Dashboard</a>
+  <a routerLink="/menu">Menu</a>
+  <a routerLink="/content">Content</a>
+</nav>
 <ul class="heroes">
   <li *ngFor="let content of content">
     <ul>{{content}}</ul>

src/app/intro-page/intro-routing.module.ts

+import {RouterModule, Routes} from '@angular/router';
+import {NgModule} from '@angular/core';
+
+import {IntroComponent} from './intro.component';
+
+const routes: Routes = [{
+  path: '',
+  component: IntroComponent,
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class IntroRoutingModule {
+}

src/app/intro-page/intro.component.ts

+import {Component} from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'ngx-intro',
+  styleUrls: [
+    'intro.scss',
+    '../../assets/intro/css/bootstrap.min.css',
+    '../../assets/intro/css/line-icons.css',
+    '../../assets/intro/css/owl.carousel.css',
+    '../../assets/intro/css/owl.theme.css',
+    '../../assets/intro/css/nivo-lightbox.css',
+    '../../assets/intro/css/magnific-popup.css',
+    '../../assets/intro/css/animate.css',
+    '../../assets/intro/css/menu_sideslide.css',
+    '../../assets/intro/css/main.css',
+    '../../assets/intro/css/responsive.css',
+  ],
+  templateUrl: './intro.component.html',
+})
+export class IntroComponent {
+  constructor(
+    private router: Router,
+  ) {
+  }
+
+  public goToDemo() {
+    this.router.navigate(['menu']);
+  }
+
+  public goToTop() {
+    // window.scrollTo({left: 0, top: 0, behavior: 'smooth'});
+  }
+}

src/app/intro-page/intro.module.ts

+import {NgModule} from '@angular/core';
+import {IntroComponent} from './intro.component';
+import {IntroRoutingModule} from './intro-routing.module';
+
+@NgModule({
+  imports: [
+    IntroRoutingModule
+  ],
+  declarations: [
+    IntroComponent,
+  ],
+})
+export class IntroModule {
+}

src/assets/intro/css/colors/alizarin.css

+a{
+	color: #e74c3c;
+}
+a:hover{
+	color: #e74c3c;
+}
+.btn-common{
+    background-color: #e74c3c;
+}
+.btn-border:hover{
+	background-color: #e74c3c;
+}
+.bg-defult{
+	background: #e74c3c!important;
+}
+.controls .active{
+	color: #e74c3c!important;
+    border-color: #e74c3c;
+}
+#carousel-area .carousel-control-next i, #carousel-area .carousel-control-prev i{
+	background: #e74c3c;
+}
+.section-header .section-title:before{
+	background: #e74c3c;
+}
+.overlay{
+	background: #e74c3c;
+}
+.bg-white .navbar-nav .active{
+	color: #e74c3c!important;
+}
+.menu-bg .navbar-nav .active{
+	color: #e74c3c!important;
+}
+.menu-bg .navbar-nav .nav-link:hover{
+	color: #e74c3c!important;
+}
+.navbar-expand-md .navbar-nav .active > .nav-link, .navbar-expand-md .navbar-nav .nav-link.active, .navbar-expand-md .navbar-nav .nav-link.active::before, .navbar-expand-md .navbar-nav .nav-link.open, .navbar-expand-md .navbar-nav .open > .nav-link{
+	color: #e74c3c;
+}
+.navbar-expand-md .navbar-nav .nav-link:focus, .navbar-expand-md .navbar-nav .nav-link:hover, .navbar-expand-md .navbar-nav .nav-link:hover:before{
+	color: #e74c3c;
+}
+.navbar-expand-md .navbar-nav .nav-link:before{
+	background: #e74c3c;
+}
+.menu-bg .logo-menu a, .menu-bg .menu-button:hover{color: #e74c3c;}
+.menu-wrap .navbar-nav li .active,
+.menu-wrap .navbar-nav li .active::before{
+	color: #e74c3c;
+}
+.menu-wrap a:hover, .menu-wrap a:focus{
+	color: #e74c3c;
+}
+.icon-list a::before {
+    background: #e74c3c;
+}
+#about .box-item .icon i{
+	color: #e74c3c;
+}
+.item-boxes .icon{
+	border-color: #e74c3c;
+}
+.item-boxes .icon i{
+	color: #e74c3c;
+}
+.featured-box .featured-icon i{
+	color: #e74c3c; 
+}
+.controls .mixitup-control-active{
+	color: #e74c3c!important;
+	border-color: #e74c3c;
+}
+.testimonial-item .author .author-info h2 a:hover{
+	color: #e74c3c;
+}
+.testimonial-item .content-inner span{
+	color: #e74c3c;
+}
+.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{
+	background: #e74c3c;
+}
+#subscribe .sub-item-box .icon-box i{
+	color: #e74c3c;
+}
+#blog .blog-item-text h3 a:hover{
+	color: #e74c3c;
+}
+.meta-tags span a:hover{
+	color: #e74c3c;
+}
+.form-control:focus{
+	border: 1px solid #e74c3c
+}
+#contact:before{
+	background: #e74c3c;
+}
+.contact-info i{
+	color: #e74c3c;
+}
+.back-to-top i{
+	background-color: #e74c3c;
+}
+.single-team .social-list li a{
+	color: #e74c3c;
+}
+.footer-social li a{
+	background: #e74c3c;
+}
+footer .menu li a:hover{
+	color: #e74c3c;
+}
+.contact-footer li span a:hover{
+	color: #e74c3c;
+}
+.toggle-map{
+	background-color: #e74c3c;
+}
+.toggle-map .map-icon{
+	border-color: #e74c3c;
+}
+.counter-item .icon i{
+	color: #e74c3c;
+}
+#google-map{
+	border-color: #e74c3c;
+}
+#subscribe form input:focus{
+	border-color: #e74c3c;
+}
+#copyright p a:hover{
+	color: #e74c3c;
+}
+#copyright .nav-inline .nav-link:hover{
+	color: #e74c3c;
+}
\ No newline at end of file

src/assets/intro/css/colors/blue.css

+a{
+	color: #1AB7D8;
+}
+a:hover{
+	color: #1AB7D8;
+}
+.btn-common{
+    background-color: #1AB7D8;
+}
+.btn-border:hover{
+	background-color: #1AB7D8;
+}
+.bg-defult{
+	background: #1AB7D8!important;
+}
+.controls .active{
+	color: #1AB7D8 !important;
+    border-color: #1AB7D8;
+}
+#carousel-area .carousel-control-next i, #carousel-area .carousel-control-prev i{
+	background: #1AB7D8;
+}
+.section-header .section-title:before{
+	background: #1AB7D8;
+}
+.overlay{
+	background: #1AB7D8;
+}
+.bg-white .navbar-nav .active{
+	color: #1AB7D8!important;
+}
+.menu-bg .navbar-nav .active{
+	color: #1AB7D8!important;
+}
+.menu-bg .navbar-nav .nav-link:hover{
+	color: #1AB7D8!important;
+}
+.navbar-expand-md .navbar-nav .active > .nav-link, .navbar-expand-md .navbar-nav .nav-link.active, .navbar-expand-md .navbar-nav .nav-link.active::before, .navbar-expand-md .navbar-nav .nav-link.open, .navbar-expand-md .navbar-nav .open > .nav-link{
+	color: #1AB7D8;
+}
+.navbar-expand-md .navbar-nav .nav-link:focus, .navbar-expand-md .navbar-nav .nav-link:hover, .navbar-expand-md .navbar-nav .nav-link:hover:before{
+	color: #1AB7D8;
+}
+.navbar-expand-md .navbar-nav .nav-link:before{
+	background: #1AB7D8;
+}
+.menu-bg .logo-menu a, .menu-bg .menu-button:hover{color: #1AB7D8;}
+.menu-wrap .navbar-nav li .active,
+.menu-wrap .navbar-nav li .active::before{
+	color: #1AB7D8;
+}
+.menu-wrap a:hover, .menu-wrap a:focus{
+	color: #1AB7D8;
+}
+.icon-list a::before {
+    background: #1AB7D8;
+}
+#about .box-item .icon i{
+	color: #1AB7D8;
+}
+.item-boxes .icon{
+	border-color: #1AB7D8;
+}
+.item-boxes .icon i{
+	color: #1AB7D8;
+}
+.featured-box .featured-icon i{
+	color: #1AB7D8; 
+}
+.controls .mixitup-control-active{
+	color: #1AB7D8!important;
+	border-color: #1AB7D8;
+}
+.testimonial-item .author .author-info h2 a:hover{
+	color: #1AB7D8;
+}
+.testimonial-item .content-inner span{
+	color: #1AB7D8;
+}
+.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{
+	background: #1AB7D8;
+}
+#subscribe .sub-item-box .icon-box i{
+	color: #1AB7D8;
+}
+#blog .blog-item-text h3 a:hover{
+	color: #1AB7D8;
+}
+.meta-tags span a:hover{
+	color: #1AB7D8;
+}
+.form-control:focus{
+	border: 1px solid #1AB7D8
+}
+#contact:before{
+	background: #1AB7D8;
+}
+.contact-info i{
+	color: #1AB7D8;
+}
+.back-to-top i{
+	background-color: #1AB7D8;
+}
+.single-team .social-list li a{
+	color: #1AB7D8;
+}
+.footer-social li a{
+	background: #1AB7D8;
+}
+footer .menu li a:hover{
+	color: #1AB7D8;
+}
+.contact-footer li span a:hover{
+	color: #1AB7D8;
+}
+.toggle-map{
+	background-color: #1AB7D8;
+}
+.toggle-map .map-icon{
+	border-color: #1AB7D8;
+}
+.counter-item .icon i{
+	color: #1AB7D8;
+}
+#google-map{
+	border-color: #1AB7D8;
+}
+#subscribe form input:focus{
+	border-color: #1AB7D8;
+}
+#copyright p a:hover{
+	color: #1AB7D8;
+}
+#copyright .nav-inline .nav-link:hover{
+	color: #1AB7D8;
+}
\ No newline at end of file

src/assets/intro/css/colors/orange.css

+a{
+	color: #f39c12;
+}
+a:hover{
+	color: #f39c12;
+}
+.btn-common{
+    background-color: #f39c12;
+}
+.btn-border:hover{
+	background-color: #f39c12;
+}
+.controls .active{
+	color: #f39c12 !important;
+    border-color: #f39c12;
+}
+.bg-defult{
+	background: #f39c12!important;
+}
+#carousel-area .carousel-control-next i, #carousel-area .carousel-control-prev i{
+	background: #f39c12;
+}
+.section-header .section-title:before{
+	background: #f39c12;
+}
+.overlay{
+	background: #f39c12;
+}
+.bg-white .navbar-nav .active{
+	color: #f39c12!important;
+}
+.menu-bg .navbar-nav .active{
+	color: #f39c12!important;
+}
+.menu-bg .navbar-nav .nav-link:hover{
+	color: #f39c12!important;
+}
+.navbar-expand-md .navbar-nav .active > .nav-link, .navbar-expand-md .navbar-nav .nav-link.active, .navbar-expand-md .navbar-nav .nav-link.active::before, .navbar-expand-md .navbar-nav .nav-link.open, .navbar-expand-md .navbar-nav .open > .nav-link{
+	color: #f39c12;
+}
+.navbar-expand-md .navbar-nav .nav-link:focus, .navbar-expand-md .navbar-nav .nav-link:hover, .navbar-expand-md .navbar-nav .nav-link:hover:before{
+	color: #f39c12;
+}
+.navbar-expand-md .navbar-nav .nav-link:before{
+	background: #f39c12;
+}
+.menu-bg .logo-menu a, .menu-bg .menu-button:hover{color: #f39c12;}
+.menu-wrap .navbar-nav li .active,
+.menu-wrap .navbar-nav li .active::before{
+	color: #f39c12;
+}
+.menu-wrap a:hover, .menu-wrap a:focus{
+	color: #f39c12;
+}
+.icon-list a::before {
+    background: #f39c12;
+}
+#about .box-item .icon i{
+	color: #f39c12;
+}
+.item-boxes .icon{
+	border-color: #f39c12;
+}
+.item-boxes .icon i{
+	color: #f39c12;
+}
+.featured-box .featured-icon i{
+	color: #f39c12; 
+}
+.controls .mixitup-control-active{
+	color: #f39c12!important;
+	border-color: #f39c12;
+}
+.testimonial-item .author .author-info h2 a:hover{
+	color: #f39c12;
+}
+.testimonial-item .content-inner span{
+	color: #f39c12;
+}
+.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{
+	background: #f39c12;
+}
+#subscribe .sub-item-box .icon-box i{
+	color: #f39c12;
+}
+#blog .blog-item-text h3 a:hover{
+	color: #f39c12;
+}
+.meta-tags span a:hover{
+	color: #f39c12;
+}
+.form-control:focus{
+	border: 1px solid #f39c12
+}
+#contact:before{
+	background: #f39c12;
+}
+.contact-info i{
+	color: #f39c12;
+}
+.back-to-top i{
+	background-color: #f39c12;
+}
+.single-team .social-list li a{
+	color: #f39c12;
+}
+.footer-social li a{
+	background: #f39c12;
+}
+footer .menu li a:hover{
+	color: #f39c12;
+}
+.contact-footer li span a:hover{
+	color: #f39c12;
+}
+.toggle-map{
+	background-color: #f39c12;
+}
+.toggle-map .map-icon{
+	border-color: #f39c12;
+}
+.counter-item .icon i{
+	color: #f39c12;
+}
+#google-map{
+	border-color: #f39c12;
+}
+#subscribe form input:focus{
+	border-color: #f39c12;
+}
+#copyright p a:hover{
+	color: #f39c12;
+}
+#copyright .nav-inline .nav-link:hover{
+	color: #f39c12;
+}
\ No newline at end of file