feat(docs): add Eva section (#1552)

docs/app/@theme/components/eva/eva.component.html

@@ -0,0 +1,20 @@
+<div class="description">
+ <h2 class="h1 heading">
+ <span class="pre-heading">Based on</span>
+ Eva Design System
+ </h2>
+ <p class="text">Construct stunning & consistent interfaces using atomic components by following Eva Design System specifications.</p>
+ <a class="learn-more" href="https://eva.design" nbButton size="giant">Learn more about Eva</a>
+</div>
+<div class="images">
+ <img class="theme-colors"
+ src="assets/img/theme-colors.png"
+ srcset="assets/img/theme-colors.png,
+ assets/img/theme-colors-2x.png 2x"
+ alt="Theme colors">
+ <img class="components"
+ src="assets/img/components-preview.png"
+ srcset="assets/img/components-preview.png,
+ assets/img/components-preview-2x.png 2x"
+ alt="Components preview">
+</div>

docs/app/@theme/components/eva/eva.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ngd-eva',
+ styleUrls: ['./eva.components.scss'],
+ templateUrl: './eva.component.html',
+})
+export class NgdEvaComponent {}

docs/app/@theme/components/eva/eva.components.scss

@@ -0,0 +1,75 @@
+:host {
+ display: flex;
+}
+
+.description {
+ flex: 0 0 28rem;
+ margin: 0 auto;
+}
+
+.heading {
+ color: #2a344e;
+ font-size: 4.75rem;
+ font-style: normal;
+ font-weight: 800;
+ line-height: 4.75rem;
+
+ margin-bottom: 1.5rem;
+}
+
+.pre-heading {
+ display: block;
+ margin-bottom: 0.5rem;
+
+ color: #9fa9bd;
+ font-size: 1.5rem;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 2.5rem;
+ text-transform: uppercase;
+}
+
+.text {
+ color: #9fa9bd;
+ font-size: 1rem;
+ line-height: 1.75rem;
+}
+
+.learn-more {
+ margin-top: 2.5rem;
+}
+
+.images {
+ display: none;
+}
+
+@media screen and (min-width: 50em) {
+ .description {
+ margin-left: auto;
+ }
+
+ .images {
+ display: block;
+ flex: 0 0 60%;
+ padding-bottom: 43%;
+ position: relative;
+ }
+
+ .theme-colors {
+ position: absolute;
+ top: -18%;
+ right: -35%;
+
+ height: auto;
+ width: 103%;
+ }
+
+ .components {
+ position: absolute;
+ top: 42%;
+ right: -9%;
+
+ height: auto;
+ width: 100%;
+ }
+}

docs/app/@theme/components/icon-card/icon-card.component.scss

@@ -19,6 +19,7 @@
  position: relative;
 
  &::before {
+ border-radius: 7px;
  content: '';
  display: block;
  position: absolute;

docs/app/@theme/components/index.ts

@@ -9,3 +9,4 @@ export * from './page-tabs/page-tabs.component';
 export * from './color-swatch/color-swatch.directive';
 export * from './description/description.directive';
 export * from './search/search.component';
+export * from './eva/eva.component';

docs/app/@theme/styles/styles.scss

@@ -19,6 +19,7 @@
  @include nb-icon-theme();
  @include nb-input-theme();
  @include nb-typography();
+ @include nb-buttons-theme();
 
  @include nbd-common();
 

docs/app/@theme/theme.module.ts

@@ -17,6 +17,7 @@ import {
  NbCardModule,
  NbCheckboxModule,
  NbIconModule,
+ NbButtonModule,
 } from '@nebular/theme';
 
 import { NbEvaIconsModule } from '@nebular/eva-icons';
@@ -33,7 +34,8 @@ import {
  NgdColorSwatchDirective,
  NgdDescriptionDirective,
  NgdSearchComponent,
-} from './components/';
+ NgdEvaComponent,
+} from './components';
 
 import {
  NgdHighlightService,
@@ -60,6 +62,7 @@ import {
  NbMenuModule,
  NbTabsetModule,
  NbIconModule,
+ NbButtonModule,
  NbEvaIconsModule,
  RouterModule,
  ],
@@ -75,6 +78,7 @@ import {
  NgdColorSwatchDirective,
  NgdDescriptionDirective,
  NgdSearchComponent,
+ NgdEvaComponent,
  ],
  exports: [
  CommonModule,
@@ -98,6 +102,7 @@ import {
  NgdPageTabsComponent,
  NgdColorSwatchDirective,
  NgdDescriptionDirective,
+ NgdEvaComponent,
  ],
 })
 export class NgdThemeModule {

docs/app/home/home.component.html

@@ -21,6 +21,19 @@
  </ngd-icon-card>
  </section>
 
+ <section class="eva">
+ <div class="eva-concave">
+ <svg viewBox="0 0 1440 112" preserveAspectRatio="xMidYMin slice" xmlns="http:https://www.w3.org/2000/svg">
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g transform="translate(0.000000, -720.000000)" fill="#FFFFFF">
+ <path d="M1440,720.000142 L1440,830 C1440,831.104569 1439.10457,832 1438,832 L2,832 C0.8954305,832 1.3527075e-16,831.104569 0,830 L0,720 C192.489111,757.195808 444.350082,779.75851 720.000368,779.75851 C995.650302,779.75851 1247.51098,757.195865 1440,720.000142 Z" id="Combined-Shape"></path>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <ngd-eva class="content-center"></ngd-eva>
+ </section>
+
  <section class="advantages">
  <div class="content-center">
  <ngd-text-card *ngFor="let advantage of advantages"

docs/app/home/home.component.scss

@@ -6,6 +6,10 @@
  $content-width: nb-theme(content-width);
  $max-width: 960px;
 
+ ::ng-deep nb-layout-column {
+ overflow-x: hidden;
+ }
+
  .content-center {
  max-width: $content-width;
  width: 100%;
@@ -50,23 +54,41 @@
 
  .features {
  margin-top: 5rem;
+ margin-bottom: 4rem;
  justify-content: center;
  max-width: $max-width;
  }
 
- .features, .advantages {
- margin-bottom: 5rem;
- }
-
  .advantages {
- position: relative;
  overflow: hidden;
+ margin-bottom: 5rem;
 
  > .content-center {
  max-width: $max-width;
  }
  }
 
+ .eva {
+ background: radial-gradient(circle, #ffffff 0%, #ffffff 15.38%, #d7dfeb 100%);
+ margin-bottom: 10rem;
+ padding-top: 5rem;
+ position: relative;
+ }
+
+ .eva-concave {
+ position: absolute;
+ top: -4px;
+ left: 0;
+ right: 0;
+ width: 100%;
+ transform: rotateX(180deg);
+ }
+
+ ngd-eva.content-center {
+ padding-bottom: 5rem;
+ flex-wrap: nowrap;
+ }
+
  ngd-footer {
  max-width: $max-width;
  margin: 0 auto;
@@ -84,21 +106,21 @@
  }
 
  .advantages {
- padding-top: 5.5rem;
  padding-bottom: 5.5rem;
+ }
 
- &::after {
- content: '';
- position: absolute;
- top: 0;
- height: 24rem;
- right: -20%;
- left: -20%;
- background: $convex-bg;
- z-index: -1;
- border-radius: 50%;
- }
+ .eva {
+ padding-top: 10rem;
+ }
+
+ ngd-eva.content-center {
+ padding-bottom: 10rem;
  }
  }
-}
 
+ @include media-breakpoint-up(xl) {
+ .eva {
+ padding-top: 15rem;
+ }
+ }
+}