feat(demo): update landing page (#4981)

* fix(landing): fix cypress tests after chahge langing

* fix(getting-started): change component and route getting-started to documentation

.github/ISSUE_TEMPLATE.md

 Before opening an issue, please search for duplicates (opened and closed)
 https://github.com/valor-software/ngx-bootstrap/issues
-There's no need to open an issue here if you want to ask general question, use [StackOverflow](https://stackoverflow.com/questions/tagged/ngx-bootstrap) or [Slack](https://ngx-slack.herokuapp.com/) instead
+There's no need to open an issue here if you want to ask general question, use [StackOverflow](https://stackoverflow.com/questions/tagged/ngx-bootstrap) or [Slack](https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg) instead
 
 ### Bug description or feature request:
 

CONTRIBUTING.md

@@ -243,7 +243,7 @@ This `CONTRIBUTING.md` is adapted from the Angular's `CONTRIBUTING.md`, availabl
 [coc]: https://github.com/valor-software/ngx-bootstrap/blob/development/CODE_OF_CONDUCT.md
 [commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#
 [github]: https://github.com/valor-software/ngx-bootstrap
-[slack]: https://ngx-slack.herokuapp.com
+[slack]: https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg
 [js-style-guide]: https://google.github.io/styleguide/jsguide.html
 [plunker]: http://plnkr.co/edit
 [stackoverflow]: http://stackoverflow.com/questions/tagged/ngx-bootstrap

README.md

@@ -172,8 +172,8 @@ Please read our [contribution guidelines](https://github.com/valor-software/ngx-
 Please read central `ngx` modules [readme](https://github.com/valor-software/ng2-plans) for details, plans and approach
 
 ### Credits
-Crossbrowser testing sponsored by [Saucelab](https://saucelabs.com/)
-[<img src="https://saucelabs.com/content/images/circle-logo@2x.png" alt="Browser Stack" width="31" height="31">](https://saucelabs.com/)
+Crossbrowser testing sponsored by [Saucelabs](https://saucelabs.com/)
+[<img src="https://saucelabs.com/content/images/circle-logo@2x.png" alt="Saucelabs" width="31" height="31">](https://saucelabs.com/)
 
 ### License
 

cypress/integration/landing_page_spec.ts

@@ -44,7 +44,7 @@ describe('Landing Page test suite', () => {
   describe('Navigation buttons', () => {
     it('Get started button redirects to Getting Started page', () => {
       const buttonText = 'Get started';
-      const searchedUrl = '/getting-started';
+      const searchedUrl = '/documentation';
 
       landing.clickByText(landing.navBtn, buttonText);
 
@@ -54,7 +54,7 @@ describe('Landing Page test suite', () => {
 
     it('Documentation button is enabled and contains link to documentation', () => {
       const buttonText = 'Documentation';
-      const searchedUrl = '/getting-started';
+      const searchedUrl = '/documentation';
 
       cy.get(landing.navBtn).contains(buttonText)
         .should('be.enabled');

demo/src/app/app.module.ts

@@ -10,7 +10,7 @@ import { environment } from '../environments/environment';
 import { ngdoc } from '../ng-api-doc';
 import { AppComponent } from './app.component';
 import { routes } from './app.routing';
-import { GettingStartedComponent } from './common/getting-started/getting-started.component';
+import { DocumentationComponent } from './common/documentation/documentation.component';
 import { LandingComponent } from './common/landing/landing.component';
 import { TopMenuComponent } from './common/top-menu/top-menu.component';
 import { DocsModule } from './docs';
@@ -19,7 +19,7 @@ import { StyleManager } from './theme/style-manager';
 import { ThemeStorage } from './theme/theme-storage';
 
 @NgModule({
-  declarations: [AppComponent, GettingStartedComponent, TopMenuComponent, LandingComponent],
+  declarations: [AppComponent, DocumentationComponent, TopMenuComponent, LandingComponent],
   imports: [
     DocsModule,
     FormsModule,

demo/src/app/app.routing.ts

 import { LandingComponent } from './common/landing/landing.component';
-import { GettingStartedComponent } from './common/getting-started/getting-started.component';
+import { DocumentationComponent } from './common/documentation/documentation.component';
 
 export const routes = [
   {
@@ -8,9 +8,9 @@ export const routes = [
     component: LandingComponent
   },
   {
-    path: 'getting-started',
-    data: ['Getting started'],
-    component: GettingStartedComponent
+    path: 'documentation',
+    data: ['Documentation'],
+    component: DocumentationComponent
   },
   {
     path: 'accordion',

demo/src/app/common/getting-started/getting-started.component.html → demo/src/app/common/documentation/documentation.component.html

@@ -16,11 +16,17 @@
     </p>
 
     <p align="center">
-      <span style="margin-top: 10px;display: inline-block;width: 120px;">
-        <iframe frameborder="0" scrolling="0" style="height: 20px;width: 120px;"
-                title="github stars count"
-                src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ngx-bootstrap&type=star&count=true"></iframe></span>
-      <br/>
+      <span class="d-flex justify-content-center align-items-center">
+        <a class="mr-1" href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">
+          <img src="https://a.slack-edge.com/66f9/img/icons/ios-256.png" width="25" height="25" alt="slack" >
+        </a>
+        <span style="display: inline-block;width: 120px;height: 20px;">
+          <iframe frameborder="0" scrolling="0" style="height: 20px;width: 120px;"
+                  title="github stars count"
+                  src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ngx-bootstrap&type=star&count=true"></iframe>
+        </span>
+
+      </span>
 
       <a href="https://badge.fury.io/js/ngx-bootstrap">
         <img src="https://badge.fury.io/js/ngx-bootstrap.svg" alt="npm version">
@@ -35,16 +41,13 @@
         <img alt="build status" src="https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=development">
       </a>
       <br/>
-      <a href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">
-        <img src="https://a.slack-edge.com/66f9/img/icons/ios-256.png" width="25" height="25" alt="slack" >
-      </a>
     </p>
 
     <div class="section">
 
       <h2>Links</h2>
       <ul>
-        <li><a href="http://valor-software.com/ngx-bootstrap/">Documentation</a></li>
+        <!--<li><a href="http://valor-software.com/ngx-bootstrap/">Documentation</a></li>-->
         <li><a href="https://github.com/valor-software/ngx-bootstrap/blob/development/CHANGELOG.md">Release Notes</a></li>
         <li><a href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">Slack Community</a></li>
       </ul>
@@ -167,9 +170,9 @@
       <h3>Credits</h3>
 
       <p>Crossbrowser testing sponsored by
-        <a href="https://saucelabs.com/" class="pr-1">Saucelab</a>
+        <a href="https://saucelabs.com/" class="pr-1">Saucelabs</a>
         <a href="https://saucelabs.com/">
-          <img src="https://saucelabs.com/content/images/circle-logo@2x.png" alt="Browser Stack" width="31" height="31">
+          <img src="https://saucelabs.com/content/images/circle-logo@2x.png" alt="Saucelabs" width="31" height="31">
         </a>
       </p>
 

demo/src/app/common/getting-started/getting-started.component.ts → demo/src/app/common/documentation/documentation.component.ts

 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'getting-started',
-  templateUrl: './getting-started.component.html'
+  selector: 'documentation',
+  templateUrl: './documentation.component.html'
 })
-export class GettingStartedComponent {
+export class DocumentationComponent {
   name = `Native Angular widgets for Bootstrap 3 and Bootstrap 4`;
   src = 'https://github.com/valor-software/ngx-bootstrap';
 }

demo/src/app/common/landing/landing.component.html

@@ -7,8 +7,8 @@
     <h1 class="slogan">Develop better. Faster.</h1>
     <p class="descr">Bootstrap components, powered by Angular</p>
     <div class="btn-block">
-      <a class="btn btn-primary" (click)="scrollToSection()" routerLink="/getting-started">Get started</a>
-      <a class="btn btn-outline-secondary" routerLink="/getting-started">Documentation</a>
+      <a class="btn btn-primary text-white" (click)="scrollToSection()">Get started</a>
+      <a class="btn btn-outline-secondary" routerLink="/documentation">Documentation</a>
     </div>
     <p class="version">{{currentVersion}}</p>
   </section>

demo/src/app/common/landing/landing.component.ts

@@ -44,6 +44,6 @@ export class LandingComponent implements AfterViewInit {
   }
 
   scrollToSection() {
-    this.router.navigate(['.', 'getting-started' ], {fragment: 'getting-started'});
+    this.router.navigate(['.', 'documentation' ], {fragment: 'getting-started'});
   }
 }

scripts/universal/static.paths.ts

 export const ROUTES = [
   '/',
-  '/getting-started',
+  '/documentation',
   '/accordion',
   '/alerts',
   '/buttons',