feat(docs): new landing (#1412)

akveo · May 27, 2019 · 34166a4 · 34166a4
1 parent 66b02e6
commit 34166a4
Show file tree

Hide file tree

Showing 24 changed files with 1,004 additions and 244 deletions.
diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss
@@ -13,6 +13,8 @@
  flex: 1 0 auto;
  flex-direction: row;
  align-items: center;
+ margin-left: -15px;
+ margin-right: -15px;
 
  .sidebar-toggle {
  border: none;
@@ -62,7 +64,6 @@
  &:hover, &.active, &:focus {
  color: $menu-item-fg-active;
  text-shadow: 0.5px 0 0 currentColor;
- font-weight: normal;
  outline: none!important;
  }
  }
@@ -152,6 +153,8 @@
  }
 
  &.docs-page {
+ margin-left: 0;
+ margin-right: 0;
  .section {
  &.left {
  align-items: center;

diff --git a/docs/app/@theme/components/hero/hero.component.scss b/docs/app/@theme/components/hero/hero.component.scss
@@ -9,26 +9,164 @@
  $get-started-fg: #3381ff;
  $title-fg: nb-theme(color-fg-heading-light);
 
+
+ width: 100%;
+ max-width: 100%;
  display: flex;
- flex: 1 0 auto;
- padding: 0 1rem 10rem;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-content: center;
+ align-items: flex-start;
+ flex: 0 1 auto;
+ padding: 0;
 
  .block {
- flex: 1;
+ width: 100%;
+ flex: 1 0 auto;
  padding-top: 4rem;
+ padding-bottom: 4rem;
  font-size: 0.75rem;
- max-width: 30em;
+
+ .row {
+ margin-left: -15px;
+ margin-right: -15px;
+ }
+
+ @include media-breakpoint-up(sm) {
+ max-width: 32rem;
+ }
+ }
+
+ .hero-features {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-content: stretch;
+
+ width: 100%;
+ margin-top: 2rem;
+
+ @include media-breakpoint-up(sm) {
+ margin-top: 3rem;
+ }
+
+ @include media-breakpoint-up(md) {
+ margin-top: 5rem;
+ }
+ }
+
+ .hero-feature {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-content: flex-start;
+ align-items: center;
+
+ width: 100%;
+ max-width: 16rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .feature-key {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-content: flex-start;
+ align-items: center;
+
+ flex: 0 0 auto;
+ height: 3rem;
+ width: 3rem;
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ border-radius: 0.5rem;
+ background-color: rgba(255, 255, 255, 0.2);
+ color: #ffffff;
+ font-size: 1.125rem;
+ font-weight: 800;
+ line-height: 1.3;
+ text-shadow: 0 12px 34px 0 rgba(0, 60, 183, 0.25);
+ margin-right: 1rem;
+ }
+
+ .feature-title {
+ color: #ffffff;
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1.5;
+ margin-bottom: 0;
  }
 
  .right-block {
  display: none;
+
+ @include media-breakpoint-up(sm) {
+ flex: 1 0 auto;
+ display: flex;
+ padding-top: 1.75rem;
+ margin-left: -4rem;
+ }
+
+ @include media-breakpoint-up(md) {
+ padding-top: 3.75rem;
+ margin-left: -1rem;
+ }
+
+ @include media-breakpoint-up(lg) {
+ padding-top: 7rem;
+ }
+
+ @include media-breakpoint-up(xl) {
+ padding-top: 5rem;
+ }
+ }
+
+ .hero-components {
+ background-image: url('/assets/img/hero-components.svg');
+ background-repeat: no-repeat;
+ background-size: cover;
+ width: 46rem;
+ padding-top: 78%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+
+ @include media-breakpoint-up(md) {
+ width: 46rem;
+ }
+
+ @include media-breakpoint-up(lg) {
+ width: 46rem;
+ }
+
+ @include media-breakpoint-up(xl) {
+ width: 46rem;
+ }
+
+ @include media-breakpoint-up(macpro) {
+ width: 52rem;
+ }
+
+ @include media-breakpoint-up(xxl) {
+ width: 56.5rem;
+ }
  }
 
  h1 {
- font-size: 4em;
+ font-size: 2.4rem;
+ line-height: 1.125em;
  font-weight: bold;
- margin-bottom: 0;
+ margin-bottom: 2rem;
  text-shadow: $shadow;
+
+ @include media-breakpoint-up(sm) {
+ font-size: 3rem;
+ }
  }
 
  h1,h2,h3 {
@@ -56,7 +194,7 @@
 
  .btn {
  display: inline-block;
- font-size: 1.125em;
+ font-size: 1em;
  font-weight: bold;
  border-radius: 3px;
  border: none;
@@ -66,9 +204,18 @@
  box-shadow: $shadow;
  text-decoration: none !important;
  cursor: pointer;
+ color: white;
+ width: 100%;
+
+ @include media-breakpoint-up(sm) {
+ max-width: 11.875rem;
+ }
+
+ &:not(:last-child) {
+ margin-right: 1rem;
+ }
 
  &.get-started {
- margin-right: 1em;
  background: white;
  color: $get-started-fg;
  }
@@ -83,23 +230,22 @@
  }
 
  @include media-breakpoint-up(is) {
- padding-left: 3rem;
- padding-right: 3rem;
+ padding-left: 0;
+ padding-right: 0;
  }
 
  @include media-breakpoint-up(md) {
- padding-bottom: 13rem;
 
  .block {
  font-size: 0.875rem;
  }
 
  h1 {
- font-size: 6.875em;
+ font-size: 3.5em;
  }
 
  .btn {
- padding: 0.85em 3em;
+ padding: 0.875em 2em;
  }
  }
 
@@ -109,40 +255,6 @@
  .block {
  font-size: 1rem;
  margin-right: 2rem;
- max-width: none;
- }
- .right-block {
- flex: 1;
- display: flex;
- justify-content: center;
- }
- .shield {
- background: url('/assets/img/[email protected]');
- background-repeat: no-repeat;
- background-size: cover;
- height: 26rem;
- width: 26rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
-
- h3 {
- font-size: 32px;
- line-height: 1;
- }
- h3:nth-child(2) {
- font-size: 98px;
- font-weight: bold;
- }
- }
- }
-
- @include media-breakpoint-up(xxl) {
- .shield {
- height: 32.5rem;
- width: 32rem;
  }
  }
 }
diff --git a/docs/app/@theme/components/hero/hero.component.ts b/docs/app/@theme/components/hero/hero.component.ts
@@ -5,26 +5,49 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  styleUrls: ['./hero.component.scss'],
  template: `
  <div class="block">
- <h1>Nebular</h1>
- <p>Components, Auth & Security for your next Angular App</p>
- <div class="badges">
- <iframe class="stars"
- src="https://ghbtns.com/github-btn.html?user=akveo&repo=nebular&type=star&count=true"
- frameborder="0"
- scrolling="0">
- </iframe>
- <a href="https://www.npmjs.com/package/@nebular/theme" target="_blank">
- <img src="https://img.shields.io/npm/dt/@nebular/theme.svg">
- </a>
+ <h1>Angular 7: UI Kit, Auth&nbsp;&&nbsp;Security</h1>
+ <div class="btns-wrapper">
+ <a class="btn get-started" routerLink="docs">Get Started</a>
+ <a class="btn" href="http:https://akveo.com/ngx-admin?utm_source=nebular_documentation&utm_medium=demo_button"
+ target="_blank">Demo</a>
+ </div>
+ <div class="hero-features">
+ <div class="hero-feature">
+ <div class="feature-key">
+ 35+
+ </div>
+ <h3 class="feature-title">
+ Angular Components
+ </h3>
+ </div>
+ <div class="hero-feature">
+ <div class="feature-key">
+ 3
+ </div>
+ <h3 class="feature-title">
+ Visual themes
+ </h3>
+ </div>
+ <div class="hero-feature">
+ <div class="feature-key">
+ 3
+ </div>
+ <h3 class="feature-title">
+ Auth strategies
+ </h3>
+ </div>
+ <div class="hero-feature">
+ <div class="feature-key">
+ <nb-icon icon="lock"></nb-icon>
+ </div>
+ <h3 class="feature-title">
+ Security
+ </h3>
+ </div>
  </div>
- <a class="btn get-started" routerLink="docs">Get Started</a>
- <a class="btn" href="http:https://akveo.com/ngx-admin?utm_source=nebular_documentation&utm_medium=demo_button"
- target="_blank">Demo</a>
  </div>
  <div class="right-block">
- <div class="shield">
- <h3>Not Just Another</h3>
- <h3>UI Kit</h3>
+ <div class="hero-components">
  </div>
  </div>
  `,