Add material themes to themes carousel

docs/app/pages/home/theme-section/theme-section.component.html

@@ -7,25 +7,45 @@
         [swiper]="swiperConfig"
         [(index)]="sliderIndex">
     <div class="swiper-wrapper">
+      <a href="https://hubs.ly/" target="_blank" class="image-container swiper-slide">
+        <img *ngIf="breakpoint.width <= breakpoints.sm"
+            data-src="assets/img/material-light-theme.png"
+            class="swiper-lazy"
+            alt="Material Light Theme" />
+        <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
+            lazyLoad="assets/img/material-light-theme.png"
+            defaultImage="assets/img/default.png"
+            alt="Material Light Theme" />
+      </a>
+      <a href="https://hubs.ly/" target="_blank" class="image-container swiper-slide">
+        <img *ngIf="breakpoint.width <= breakpoints.sm"
+            data-src="assets/img/material-dark-theme.png"
+            class="swiper-lazy"
+            alt="Material Dark Theme" />
+        <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
+            lazyLoad="assets/img/material-dark-theme.png"
+            alt="Material Dark Theme"
+            defaultImage="assets/img/default.png" />
+      </a>
       <a href="https://hubs.ly/H0n54_z0" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
-             data-src="assets/img/light-theme.png"
-             class="swiper-lazy"
-             alt="Light Theme" />
+            data-src="assets/img/light-theme.png"
+            class="swiper-lazy"
+            alt="Eva Light Theme" />
         <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
-             lazyLoad="assets/img/light-theme.png"
-             defaultImage="assets/img/default.png"
-             alt="Light Theme" />
+            lazyLoad="assets/img/light-theme.png"
+            defaultImage="assets/img/default.png"
+            alt="Eva Light Theme" />
       </a>
       <a href="https://hubs.ly/H0n54SN0" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
-             data-src="assets/img/dark-theme.png"
-             class="swiper-lazy"
-             alt="Dark Theme" />
+            data-src="assets/img/dark-theme.png"
+            class="swiper-lazy"
+            alt="Eva Dark Theme" />
         <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
-             lazyLoad="assets/img/dark-theme.png"
-             defaultImage="assets/img/default.png"
-             alt="Dark Theme" />
+            src="assets/img/dark-theme.png"
+            alt="Eva Dark Theme"
+            class="ng-lazyloaded" />
       </a>
       <a href="https://hubs.ly/H0n55cG0" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
@@ -33,9 +53,9 @@
              class="swiper-lazy"
              alt="Cosmic Theme" />
         <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
-             lazyLoad="assets/img/cosmic-theme.png"
-             defaultImage="assets/img/default.png"
-             alt="Cosmic Theme" />
+             src="assets/img/cosmic-theme.png"
+             alt="Cosmic Theme"
+             class="ng-lazyloaded"/>
       </a>
       <a href="https://hubs.ly/H0n55170" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"

docs/app/pages/home/theme-section/theme-section.component.scss

@@ -93,7 +93,7 @@
 
       span {
         display: inline-block;
-        padding: 0.75rem 3.5rem;
+        padding: 0.75rem 1.5rem;
         width: 100%;
       }
 
@@ -205,6 +205,7 @@
 
         span {
           padding: 0.75rem 0;
+          white-space: pre;
         }
 
         &.swiper-pagination-bullet-active {

docs/app/pages/home/theme-section/theme-section.component.ts

@@ -22,8 +22,10 @@ export class ThemeSectionComponent implements OnDestroy {
 
   private alive = true;
   private themes: string[] = [
-    'Light',
-    'Dark',
+    'Material\nLight',
+    'Material\nDark',
+    'Eva\nLight',
+    'Eva\nDark',
     'Cosmic',
     'Corporate',
   ];
@@ -32,6 +34,7 @@ export class ThemeSectionComponent implements OnDestroy {
   breakpoints: any;
   sliderIndex: number = 1;
   initialSwiperConfig: SwiperConfigInterface = {
+    initialSlide: 1,
     direction: 'horizontal',
     spaceBetween: 200,
     slidesPerView: 'auto',
@@ -55,9 +58,7 @@ export class ThemeSectionComponent implements OnDestroy {
       renderBullet: (index, className) => {
         return `
           <span class="${className}">
-            <span>
-              ${this.themes[index]}
-            </span>
+            <span>${this.themes[index]}</span>
           </span>`;
       },
     },
@@ -66,8 +67,10 @@ export class ThemeSectionComponent implements OnDestroy {
     ...this.initialSwiperConfig,
   };
 
-  constructor(private themeService: NbThemeService,
-              private breakpointService: NbMediaBreakpointsService) {
+  constructor(
+    private themeService: NbThemeService,
+    private breakpointService: NbMediaBreakpointsService,
+  ) {
     this.breakpoints = this.breakpointService.getBreakpointsMap();
     this.themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))