style, remove unnecessary components, nearly finished

package-lock.json

@@ -1621,6 +1621,35 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/angular-fontawesome": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.7.0.tgz",
+      "integrity": "sha512-U+eHYbKuVYrrm9SnIfl+z+6KTiI4Pu+S2OKh34JIi7C1jHhDcrVeDZISP/cpswHY7LWWDOPYeKE+yuWFlL4aVw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
     "@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",

package.json

@@ -19,6 +19,9 @@
     "@angular/platform-browser": "~10.2.0",
     "@angular/platform-browser-dynamic": "~10.2.0",
     "@angular/router": "~10.2.0",
+    "@fortawesome/angular-fontawesome": "^0.7.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

src/app/app-routing.module.ts

@@ -1,21 +1,22 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { ListPageComponent } from './list-page/list-page.component'
+import { ListComponent } from './list/list.component'
-import { ArticlePageComponent } from './article-page/article-page.component'
+import { ArticleComponent } from './article/article.component'
 
 const routes: Routes = [
   {
     path: '',
-    component: ListPageComponent
+    redirectTo: '/list',
+    pathMatch: 'full'
   },
   {
     path: 'list',
-    component: ListPageComponent
+    component: ListComponent
   },
   {
     path: 'article',
-    component: ArticlePageComponent
+    component: ArticleComponent
   }
 ];
 

src/app/app.component.html

@@ -1,17 +1,19 @@
-<div class="container flex-row">
+<div class="page-wrapper flex-col">
-  <div class="sidebar flex-col">
+  <div class="page-container flex-row">
-    <menu>
+    <div class="sidebar flex-col">
-      <div class="logo">
+      <div class="menu">
-        <img src="" alt="Trinidad Wiseman">
+        <a class="logo" routerLink="/">
-        <i>proovitöö</i>
+          <img src="/assets/images/logo.svg" alt="Trinidad Wiseman">
+          <i>proovitöö</i>
+        </a>
+        <ul>
+          <li><a href="#" routerLink="/list" routerLinkActive="active">Nimekiri</a></li>
+          <li><a href="#" routerLink="/article" routerLinkActive="active">Artikkel</a></li>
+        </ul>
       </div>
-      <ul>
+    </div>
-        <li><a href="#" routerLink="/list" routerLinkActive="active">Nimekiri</a></li>
+    <div class="page-content flex-col">
-        <li><a href="#" routerLink="/article" routerLinkActive="active">Artikkel</a></li>
+      <router-outlet></router-outlet>
-      </ul>
+    </div>
-    </menu>
-  </div>
-  <div class="content flex-col">
-    <router-outlet></router-outlet>
   </div>
 </div>

src/app/app.component.styl

@@ -0,0 +1,32 @@
+.sidebar
+  width: 300px
+  flex-shrink: 0
+  flex-grow: 0
+  font-family: Booster
+
+.menu
+  width: 300px
+  flex-shrink: 0
+  flex-grow: 0
+  font-family: Booster
+
+.logo
+  display: block
+  text-align: center
+  color: #333
+  text-decoration: none
+  font-style: italic
+  margin: 0 auto 20px
+  padding: 0 35px
+
+.logo img
+  display: block
+  width: 100%
+  transition: -webkit-transform .25s
+  transition: transform .25s
+  transition: transform .25s,-webkit-transform .25s
+  margin: 0 0 5px
+
+.logo:hover img
+  -webkit-transform: scale3d(1.1,1.1,1)
+  transform: scale3d(1.1,1.1,1)

src/app/app.module.ts

@@ -4,21 +4,18 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { ArticlePageComponent } from './article-page/article-page.component';
 import { ArticleComponent } from './article/article.component';
-import { ListPageComponent } from './list-page/list-page.component';
 import { ListComponent } from './list/list.component';
 import { ListPaginateComponent } from './list-paginate/list-paginate.component';
 import { ListService } from './list.service';
 import { GenderPipe } from './gender.pipe';
 import { CustomSortPipe } from './custom-sort.pipe';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   declarations: [
     AppComponent,
-    ArticlePageComponent,
     ArticleComponent,
-    ListPageComponent,
     ListComponent,
     ListPaginateComponent,
     GenderPipe,
@@ -28,6 +25,7 @@ import { CustomSortPipe } from './custom-sort.pipe';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
+    FontAwesomeModule,
   ],
   providers: [
   ],

src/app/article-page/article-page.component.html

@@ -1 +0,0 @@
-<app-article></app-article>

src/app/article-page/article-page.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ArticlePageComponent } from './article-page.component';
-
-describe('ArticlePageComponent', () => {
-  let component: ArticlePageComponent;
-  let fixture: ComponentFixture<ArticlePageComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ArticlePageComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ArticlePageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,17 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-// This is a router component for the article.
-
-@Component({
-  selector: 'app-article-page',
-  templateUrl: './article-page.component.html',
-  styleUrls: ['./article-page.component.styl']
-})
-export class ArticlePageComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/article/article.component.html

@@ -1,10 +1,8 @@
-<h1>{{ article.title }}</h1>
+<h2>{{ article.title }}</h2>
 <div class="intro" [innerHTML]="article.intro"></div>
 <ng-container *ngIf="article.images.length">
-  <ng-container *ngFor="let image of article.images">
+  <div class="image-wrapper">
-    <div class="image-wrapper">
+    <img src="{{ article.images[0].medium }}">
-      <img src="{{ image.medium }}" alt="{{ image.alt }}" title="{{ image.title }}">
+  </div>
-    </div>
-  </ng-container>
 </ng-container>
 <div class="content-wrapper" [innerHTML]="article.body"></div>

src/app/article/article.component.styl

@@ -0,0 +1,16 @@
+
+.intro
+  font-weight: 900
+
+.image-wrapper
+  padding-bottom: 60%
+  position: relative
+  height: auto
+  width: 100%
+
+.image-wrapper img
+  position: absolute
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%

src/app/list-page/list-page.component.html

@@ -1 +0,0 @@
-<app-list [page]="page"></app-list>

src/app/list-page/list-page.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ListPageComponent } from './list-page.component';
-
-describe('ListPageComponent', () => {
-  let component: ListPageComponent;
-  let fixture: ComponentFixture<ListPageComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ListPageComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ListPageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,22 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-// This is a router component for the list of people.
-
-@Component({
-  selector: 'app-list-page',
-  templateUrl: './list-page.component.html',
-  styleUrls: ['./list-page.component.styl']
-})
-export class ListPageComponent implements OnInit {
-  public page = 1;
-
-  constructor(private route: ActivatedRoute) { }
-
-  ngOnInit(): void {
-    this.route.queryParams
-      .subscribe((params) => {
-        this.page = +(params.page || 1);
-      });
-  }
-}

src/app/list-paginate/list-paginate.component.html

@@ -1,6 +1,6 @@
 
-<a (click)="navigate(page - 1)"><</a>
+<fa-icon (click)="navigate(page - 1)" [icon]="faChevronLeft"></fa-icon>
 <a *ngFor="let npage of pageNums" (click)="navigate(npage)" [ngClass]="{ 'active': page == npage }">
   {{npage}}
 </a>
-<a (click)="navigate(page + 1)">></a>
+<fa-icon (click)="navigate(page + 1)" [icon]="faChevronRight"></fa-icon>

src/app/list-paginate/list-paginate.component.styl

@@ -0,0 +1,31 @@
+:host
+  text-align: center
+  margin: 20px 0
+  font-family: Booster
+  font-weight: 900
+  font-size: 16x
+  display: block
+
+fa-icon, a
+  color: #666
+  text-decoration: none
+  display: inline-block
+  width: 30px
+  height: 30px
+  text-align: center
+  line-height: 35px
+  border-radius: 30px
+  margin: 0 5px
+  cursor: pointer
+
+a.active
+  color: #ff57a2
+
+a:hover
+  box-shadow: inset 0 0 0 2px #666
+
+fa-icon:first-child, fa-icon:last-child
+  background: #ff57a2
+  color: #fff
+  font-size: 16px
+  box-shadow: none

src/app/list-paginate/list-paginate.component.ts

@@ -1,6 +1,9 @@
 import { Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
 
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+
 @Component({
   selector: 'app-list-paginate',
   templateUrl: './list-paginate.component.html',
@@ -13,6 +16,9 @@ export class ListPaginateComponent {
   @Input()
   pages: number;
 
+  public faChevronRight = faChevronRight;
+  public faChevronLeft = faChevronLeft;
+
   constructor(private router: Router) { }
 
   public get pageNums(): number[] {

src/app/list/list.component.html

@@ -1,72 +1,78 @@
-<h1>Nimekiri</h1>
+<h2>Nimekiri</h2>
 <table>
   <thead>
     <th (click)="setSort('firstname')" class="clickable">Eesnimi
       <ng-container *ngIf="sortBy === 'firstname';else default_sort">
         <ng-container [ngSwitch]="sortDir">
-          <i *ngSwitchCase=-1>^</i>
+          <fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
-          <i *ngSwitchCase=1>v</i>
+          <fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
-          <i *ngSwitchDefault>|</i>
+          <fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
         </ng-container>
       </ng-container>
-      <ng-template #default_sort><i>|</i></ng-template>
+      <ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
     </th>
     <th (click)="setSort('surname')" class="clickable">Perekonnanimi
       <ng-container *ngIf="sortBy === 'surname';else default_sort">
         <ng-container [ngSwitch]="sortDir">
-          <i *ngSwitchCase=-1>^</i>
+          <fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
-          <i *ngSwitchCase=1>v</i>
+          <fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
-          <i *ngSwitchDefault>|</i>
+          <fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
         </ng-container>
       </ng-container>
-      <ng-template #default_sort><i>|</i></ng-template>
+      <ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
     </th>
     <th (click)="setSort('sex')" class="clickable">Sugu
       <ng-container *ngIf="sortBy === 'sex';else default_sort">
         <ng-container [ngSwitch]="sortDir">
-          <i *ngSwitchCase=-1>^</i>
+          <fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
-          <i *ngSwitchCase=1>v</i>
+          <fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
-          <i *ngSwitchDefault>|</i>
+          <fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
         </ng-container>
       </ng-container>
-      <ng-template #default_sort><i>|</i></ng-template>
+      <ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
     </th>
     <th (click)="setSort('date')" class="clickable">Sünnikuupäev
       <ng-container *ngIf="sortBy === 'date';else default_sort">
         <ng-container [ngSwitch]="sortDir">
-          <i *ngSwitchCase=-1>^</i>
+          <fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
-          <i *ngSwitchCase=1>v</i>
+          <fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
-          <i *ngSwitchDefault>|</i>
+          <fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
         </ng-container>
       </ng-container>
-      <ng-template #default_sort><i>|</i></ng-template>
+      <ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
     </th>
     <th (click)="setSort('phone')" class="clickable">Telefon
       <ng-container *ngIf="sortBy === 'phone';else default_sort">
         <ng-container [ngSwitch]="sortDir">
-          <i *ngSwitchCase=-1>^</i>
+          <fa-icon *ngSwitchCase=-1 [icon]="faSortUp"></fa-icon>
-          <i *ngSwitchCase=1>v</i>
+          <fa-icon *ngSwitchCase=1 [icon]="faSortDown"></fa-icon>
-          <i *ngSwitchDefault>|</i>
+          <fa-icon *ngSwitchDefault [icon]="faSort"></fa-icon>
         </ng-container>
       </ng-container>
-      <ng-template #default_sort><i>|</i></ng-template>
+      <ng-template #default_sort><fa-icon [icon]="faSort"></fa-icon></ng-template>
     </th>
   </thead>
   <ng-container *ngFor="let person of people | customSort:sortBy:sortDir | slice:startIndex:endIndex;">
-    <tr (click)="selectPerson(person)">
+    <tr (click)="selectPerson(person)" [ngClass]="{ 'active': selected == person }" class="clickable">
       <td>{{ person.firstname }}</td>
       <td>{{ person.surname }}</td>
       <td>{{ person.sex | gender }}</td>
       <td>{{ person.date * 1000 | date:'yyyy.MM.dd'}}</td>
       <td>{{ person.phone }}</td>
     </tr>
-    <tr *ngIf="selected == person" colspan=10>
+    <tr *ngIf="selected == person">
-      <div class="person-info">
+      <td colspan=10>
-        <div class="person-image">
+        <div class="person-info">
-          <img src="{{ person.image.small }}" alt="{{ person.image.alt }}" title="{{ person.image.title }}">
+          <div class="image">
+            <div class="image-wrapper">
+              <img src="{{ person.image.small }}" alt="{{ person.image.alt }}" title="{{ person.image.title }}">
+            </div>
+          </div>
+          <div class="detail">
+            <p>{{ getPersonDetail(person) }}</p>
+          </div>
         </div>
-        <div class="person-detail" [innerHTML]=person.intro></div>
+      </td>
-      </div>
     </tr>
   </ng-container>
 </table>

src/app/list/list.component.styl

@@ -0,0 +1,49 @@
+
+table td, table th
+  padding: 10px
+  border-bottom: 1px solid #ccc
+
+table tr:last-child td
+  border-bottom: none
+
+table th
+  font-family: Booster
+  color: #ff57a2
+  text-transform: uppercase
+  font-weight: 900
+  text-align: left
+  cursor: pointer
+
+table tr.active td
+  background: #ff57a2
+  color: #fff
+
+table tr.clickable:hover
+  color: #ff57a2
+
+table .person-info
+  display: flex
+  align-items: flex-start
+
+table .person-info .image
+  height: auto
+  width: 25%
+  flex-shrink: 0
+
+table .person-info .image-wrapper
+  position: relative
+  padding-bottom: 60%
+
+table .person-info .image-wrapper img
+  position: absolute
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+
+table .person-info .detail
+  padding: 0 0 0 20px
+
+table p
+  font-size: 16px
+  margin: 0

src/app/list/list.component.ts

@@ -1,8 +1,14 @@
 import { Component, OnInit, SimpleChanges, Input } from '@angular/core';
 import { ListService } from '../list.service'
 
+import { ActivatedRoute } from '@angular/router';
+
 import { IPerson } from '../person'
 
+import { faSort } from '@fortawesome/free-solid-svg-icons';
+import { faSortUp } from '@fortawesome/free-solid-svg-icons';
+import { faSortDown } from '@fortawesome/free-solid-svg-icons';
+
 // This component is for listing the people
 
 @Component({
@@ -17,14 +23,22 @@ export class ListComponent implements OnInit {
   public sortBy: string;
   public sortDir = 0;
 
-  @Input()
+  public faSort = faSort;
+  public faSortUp = faSortUp;
+  public faSortDown = faSortDown;
+
   public page = 1;
   public pages = 10;
   private perPage = 10;
 
-  constructor(private listService: ListService) { }
+  constructor(private route: ActivatedRoute, private listService: ListService) { }
 
   ngOnInit(): void {
+    this.route.queryParams
+      .subscribe((params) => {
+        this.page = +(params.page || 1);
+      });
+
     this.getList();
   }
 
@@ -53,6 +67,11 @@ export class ListComponent implements OnInit {
     }
   }
 
+  public getPersonDetail(person: IPerson): string {
+    const str = person.intro.replace(/<.*?>/g, '');
+    return (person.intro.length > 284) ? (str.substring(0, 284)) + '....' : (person.intro);
+  }
+
   private getList(): void {
     this.listService.getList().subscribe(
       (data) => this.people = data.list);

src/assets/images/bg-deco-left.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="230.4 0 151.2 502" enable-background="new 230.4 0 151.2 502" xml:space="preserve">
+<g opacity="0.4">
+	<circle fill="#31B672" cx="292.4" cy="383" r="8"/>
+	<circle fill="#31B672" cx="265.4" cy="383" r="4.5"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="238.4" cy="383" r="8"/>
+	<circle fill="#31B672" cx="373.6" cy="356" r="8"/>
+	<circle opacity="0.7" fill="#31B672" enable-background="new    " cx="292.4" cy="356" r="8"/>
+	<circle fill="#31B672" cx="373.5" cy="328.9" r="5.6"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="346.6" cy="328.9" r="8"/>
+	<circle fill="#31B672" cx="292.4" cy="328.9" r="8"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="265.4" cy="328.9" r="10.1"/>
+	<circle fill="#31B672" cx="265.4" cy="301.9" r="8"/>
+	<circle fill="#31B672" cx="238.4" cy="274.9" r="8"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="265.4" cy="247.8" r="8"/>
+	<circle fill="#31B672" cx="265.4" cy="220.8" r="5.6"/>
+	<circle fill="#31B672" cx="318.8" cy="247.8" r="5.6"/>
+	<circle fill="#31B672" cx="265.4" cy="193.8" r="4.5"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="346.6" cy="274.9" r="4.5"/>
+	<circle opacity="0.7" fill="#31B672" enable-background="new    " cx="238.4" cy="193.8" r="8"/>
+	<circle opacity="0.7" fill="#31B672" enable-background="new    " cx="265.4" cy="112.6" r="8"/>
+	<circle fill="#31B672" cx="238.4" cy="112.6" r="8"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="238.4" cy="85.6" r="8"/>
+	<circle opacity="0.7" fill="#31B672" enable-background="new    " cx="265.4" cy="58.6" r="8"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="265.4" cy="4.5" r="4.5"/>
+	<path opacity="0.7" fill="#31B672" enable-background="new    " d="M373.5,375.1c-3.6,0-6.6,2.4-7.6,5.7h-11.7   c-1-3.3-4-5.7-7.6-5.7c-4.4,0-8,3.5-8,8s3.5,8,8,8c3.6,0,6.6-2.4,7.6-5.7H366c1,3.3,4,5.7,7.6,5.7c4.4,0,8-3.5,8-8   C381.5,378.7,377.9,375.1,373.5,375.1z"/>
+	<path fill="#31B672" d="M300.5,273.6c0-4.4-3.5-8-8-8s-8,3.5-8,8c0,3.6,2.4,6.6,5.7,7.6V293c-3.3,1-5.7,4-5.7,7.6c0,4.4,3.5,8,8,8   s8-3.5,8-8c0-3.6-2.4-6.6-5.7-7.6v-11.8C298,280.2,300.5,277.2,300.5,273.6z"/>
+	<circle fill="#31B672" cx="319.5" cy="356" r="8"/>
+	<circle opacity="0.7" fill="#31B672" enable-background="new    " cx="319.5" cy="301.9" r="8"/>
+	<path opacity="0.4" fill="#31B672" enable-background="new    " d="M238.4,174.7c4.4,0,8-3.5,8-8c0-1.3-0.3-2.7-1-3.8l16.2-16.2   c1.1,0.7,2.4,1,3.8,1c4.4,0,8-3.5,8-8s-3.5-8-8-8c-4.4,0-8,3.5-8,8c0,1.3,0.3,2.7,1,3.8l-16.2,16.2c-1.1-0.7-2.4-1-3.8-1   c-4.4,0-8,3.5-8,8C230.4,171,234.1,174.7,238.4,174.7z"/>
+</g>
+<g opacity="0.4">
+	<circle fill="#31B672" cx="292.4" cy="409" r="4.5"/>
+	<circle fill="#31B672" cx="346.7" cy="436.1" r="8"/>
+	<circle opacity="0.7" fill="#31B672" enable-background="new    " cx="292.5" cy="436.1" r="8"/>
+	<circle fill="#31B672" cx="373.6" cy="463.1" r="5.6"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="346.7" cy="463.1" r="8"/>
+	<circle fill="#31B672" cx="292.5" cy="463.1" r="8"/>
+	<circle opacity="0.4" fill="#31B672" enable-background="new    " cx="265.4" cy="463.1" r="10.1"/>
+	<circle fill="#31B672" cx="265.4" cy="490.1" r="8"/>
+	<path opacity="0.7" fill="#31B672" enable-background="new    " d="M346.6,417c-3.6,0-6.6-2.4-7.6-5.7h-11.8c-1,3.3-4,5.7-7.6,5.7   c-4.4,0-8-3.5-8-8s3.5-8,8-8c3.6,0,6.6,2.4,7.6,5.7h11.8c1-3.3,4-5.7,7.6-5.7c4.4,0,8,3.5,8,8C354.5,413.5,350.9,417,346.6,417z"/>
+	<path fill="#31B672" d="M246.4,463.1c0,4.4-3.5,8-8,8c-4.4,0-8-3.5-8-8c0-3.6,2.4-6.6,5.7-7.6v-11.8c-3.3-1-5.7-4-5.7-7.6   c0-4.4,3.5-8,8-8c4.4,0,8,3.5,8,8c0,3.6-2.4,6.6-5.7,7.6v11.8C244,456.4,246.4,459.5,246.4,463.1z"/>
+	<circle fill="#31B672" cx="319.6" cy="436.1" r="8"/>
+	<circle opacity="0.7" fill="#31B672" enable-background="new    " cx="319.6" cy="490.1" r="8"/>
+</g>
+</svg>

src/assets/images/bg-deco-right.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 241.6 394" enable-background="new 0 0 241.6 394" xml:space="preserve">
+<g opacity="0.37">
+	<ellipse fill="#47B973" cx="235.3" cy="57.8" rx="7.4" ry="7.4"/>
+	<ellipse fill="#47B973" cx="235.3" cy="32.6" rx="4.2" ry="4.2"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="235.3" cy="7.4" rx="7.4" ry="7.4"/>
+	<ellipse fill="#47B973" cx="210" cy="108.2" rx="7.4" ry="7.4"/>
+	<ellipse opacity="0.7" fill="#47B973" cx="210" cy="57.8" rx="7.4" ry="7.4"/>
+	<ellipse fill="#47B973" cx="184.6" cy="133.4" rx="5.3" ry="5.2"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="184.6" cy="108.2" rx="7.4" ry="7.4"/>
+	<ellipse fill="#47B973" cx="184.6" cy="57.8" rx="7.4" ry="7.4"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="184.6" cy="32.6" rx="9.5" ry="9.4"/>
+	<ellipse fill="#47B973" cx="159.3" cy="32.6" rx="7.4" ry="7.4"/>
+	<ellipse fill="#47B973" cx="134" cy="7.4" rx="7.4" ry="7.4"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="108.7" cy="32.6" rx="7.4" ry="7.4"/>
+	<ellipse fill="#47B973" cx="83.4" cy="32.6" rx="5.3" ry="5.2"/>
+	<ellipse fill="#47B973" cx="108.7" cy="82.4" rx="5.3" ry="5.2"/>
+	<ellipse fill="#47B973" cx="58.1" cy="32.6" rx="4.2" ry="4.2"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="134" cy="108.2" rx="4.2" ry="4.2"/>
+	<ellipse opacity="0.7" fill="#47B973" cx="58.1" cy="7.4" rx="7.4" ry="7.4"/>
+	<path opacity="0.7" fill="#47B973" d="M227.8,133.4c0-3.4,2.3-6.2,5.3-7.1v-11c-3.1-0.9-5.3-3.7-5.3-7.1c0-4.1,3.3-7.4,7.4-7.4   c4.1,0,7.4,3.3,7.4,7.4c0,3.4-2.3,6.2-5.3,7.1v11c3.1,0.9,5.3,3.7,5.3,7.1c0,4.1-3.3,7.4-7.4,7.4   C231.2,140.8,227.8,137.5,227.8,133.4z"/>
+	<path fill="#47B973" d="M184.6,14.8c-4.1,0-7.4-3.3-7.4-7.4c0-4.1,3.3-7.4,7.4-7.4c3.4,0,6.2,2.2,7.1,5.3h11   c0.9-3.1,3.8-5.3,7.1-5.3c4.1,0,7.4,3.3,7.4,7.4c0,4.1-3.3,7.4-7.4,7.4c-3.4,0-6.2-2.2-7.1-5.3h-11C190.9,12.6,188,14.8,184.6,14.8   z"/>
+	<ellipse fill="#47B973" cx="210" cy="83" rx="7.4" ry="7.4"/>
+	<ellipse opacity="0.7" fill="#47B973" cx="159.3" cy="83" rx="7.4" ry="7.4"/>
+	<path opacity="0.4" fill="#47B973" d="M40.2,7.4c0,4.1-3.3,7.4-7.4,7.4c-1.3,0-2.5-0.3-3.6-0.9L14,29.1c0.6,1.1,0.9,2.3,0.9,3.5   c0,4.1-3.3,7.4-7.4,7.4C3.3,40,0,36.7,0,32.6c0-4.1,3.3-7.4,7.4-7.4c1.3,0,2.5,0.3,3.6,0.9L26.2,11c-0.6-1.1-0.9-2.3-0.9-3.5   c0-4.1,3.3-7.4,7.4-7.4C36.9,0,40.2,3.4,40.2,7.4z"/>
+</g>
+<g opacity="0.37">
+	<ellipse fill="#47B973" cx="185.6" cy="158.8" rx="7.2" ry="7.4"/>
+	<ellipse fill="#47B973" cx="210" cy="158.8" rx="4.1" ry="4.2"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="234.5" cy="158.8" rx="7.2" ry="7.4"/>
+	<ellipse fill="#47B973" cx="136.7" cy="184.1" rx="7.2" ry="7.4"/>
+	<ellipse opacity="0.7" fill="#47B973" cx="185.6" cy="184.1" rx="7.2" ry="7.4"/>
+	<ellipse fill="#47B973" cx="112.2" cy="209.4" rx="5.1" ry="5.3"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="136.7" cy="209.4" rx="7.2" ry="7.4"/>
+	<ellipse fill="#47B973" cx="185.6" cy="209.4" rx="7.2" ry="7.4"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="210" cy="209.4" rx="9.1" ry="9.5"/>
+	<ellipse fill="#47B973" cx="210" cy="234.7" rx="7.2" ry="7.4"/>
+	<ellipse fill="#47B973" cx="234.5" cy="260" rx="7.2" ry="7.4"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="210" cy="285.3" rx="7.2" ry="7.4"/>
+	<ellipse fill="#47B973" cx="210" cy="310.6" rx="5.1" ry="5.3"/>
+	<ellipse fill="#47B973" cx="161.7" cy="285.3" rx="5.1" ry="5.3"/>
+	<ellipse fill="#47B973" cx="210" cy="335.9" rx="4.1" ry="4.2"/>
+	<ellipse opacity="0.4" fill="#47B973" cx="136.7" cy="260" rx="4.1" ry="4.2"/>
+	<ellipse opacity="0.7" fill="#47B973" cx="234.5" cy="335.9" rx="7.2" ry="7.4"/>
+	<path opacity="0.7" fill="#47B973" d="M112.2,166.2c3.3,0,6-2.3,6.9-5.3h10.7c0.9,3.1,3.6,5.3,6.9,5.3c4,0,7.2-3.3,7.2-7.4   c0-4.1-3.2-7.4-7.2-7.4c-3.3,0-6,2.3-6.9,5.3h-10.7c-0.9-3.1-3.6-5.3-6.9-5.3c-4,0-7.2,3.3-7.2,7.4   C105,162.9,108.2,166.2,112.2,166.2z"/>
+	<path fill="#47B973" d="M227.3,209.4c0,4.1,3.2,7.4,7.2,7.4c4,0,7.2-3.3,7.2-7.4c0-3.4-2.2-6.2-5.2-7.1v-11c3-0.9,5.2-3.8,5.2-7.1   c0-4.1-3.2-7.4-7.2-7.4c-4,0-7.2,3.3-7.2,7.4c0,3.4,2.2,6.2,5.2,7.1v11C229.4,203.2,227.3,206,227.3,209.4z"/>
+	<ellipse fill="#47B973" cx="161.1" cy="184.1" rx="7.2" ry="7.4"/>
+	<ellipse opacity="0.7" fill="#47B973" cx="161.1" cy="234.7" rx="7.2" ry="7.4"/>
+	<path opacity="0.4" fill="#47B973" d="M234.4,353.8c-4,0-7.2,3.3-7.2,7.4c0,1.3,0.3,2.5,0.9,3.6l-14.7,15.2c-1-0.6-2.2-0.9-3.4-0.9   c-4,0-7.2,3.3-7.2,7.4c0,4.1,3.2,7.4,7.2,7.4c4,0,7.2-3.3,7.2-7.4c0-1.3-0.3-2.5-0.9-3.6l14.7-15.2c1,0.6,2.2,0.9,3.4,0.9   c4,0,7.2-3.3,7.2-7.4C241.6,357.2,238.4,353.8,234.4,353.8z"/>
+</g>
+</svg>

src/assets/images/logo.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="275.6px" height="83px" viewBox="0 0 275.6 83" enable-background="new 0 0 275.6 83" xml:space="preserve">
+<path fill="#16C473" d="M89.8,48.2c2,0.7,3,1.6,3,2.8c0,0.4-0.2,1.1-0.5,2.2l-8.5,24.4c-0.1,0.2-0.2,0.5-0.3,0.7  c-0.1,0.3-0.5,0.7-1.2,1.2c-0.6,0.5-1.4,0.7-2.2,0.7c-0.9,0-1.6-0.2-2.2-0.7c-0.6-0.5-1.1-1-1.3-1.4l-5.2-15.2  c-3.3,9.6-4.9,14.5-5,14.7c-0.1,0.2-0.2,0.4-0.4,0.7c-0.2,0.3-0.4,0.6-0.7,0.9c-0.7,0.7-1.5,1-2.4,1c-0.9,0-1.7-0.2-2.3-0.7  c-0.6-0.4-1-0.9-1.2-1.3l-0.3-0.7l-8.5-24.4c-0.3-1-0.5-1.7-0.5-2.2c0-1.2,1-2.1,3-2.8c0.9-0.3,1.6-0.4,2.3-0.4  c0.7,0,1.2,0.2,1.6,0.7c0.4,0.5,0.7,1.2,1,2.2l4.8,14.7l4.8-14.5c0.4-1.2,1.2-2.1,2.2-2.6c0.5-0.2,1.1-0.3,1.8-0.3  c0.7,0,1.4,0.2,2.1,0.7c0.6,0.5,1.1,1,1.2,1.4l5.1,15.3l4.8-14.8c0.2-0.7,0.4-1.2,0.6-1.5c0.1-0.3,0.4-0.6,0.8-0.9  c0.4-0.3,0.9-0.5,1.5-0.5C88.4,47.8,89.1,47.9,89.8,48.2z"/>
+<path fill="#16C473" d="M96.5,51.9c0-0.7,0-1.2,0.1-1.5c0-0.3,0.2-0.7,0.4-1.2c0.4-0.8,1.6-1.2,3.4-1.2c2.1,0,3.3,0.5,3.7,1.6  c0.1,0.5,0.2,1.3,0.2,2.3v24.5c0,0.7,0,1.2-0.1,1.5c0,0.3-0.2,0.7-0.4,1.1c-0.4,0.8-1.6,1.2-3.4,1.2c-2.1,0-3.3-0.6-3.6-1.7  c-0.2-0.5-0.3-1.2-0.3-2.2V51.9z"/>
+<path fill="#16C473" d="M109.7,75.8c-0.8-0.9-1.1-1.8-1.1-2.5c0-0.7,0.6-1.7,1.9-3c0.7-0.7,1.5-1.1,2.3-1.1c0.8,0,2,0.7,3.4,2.2  c0.4,0.5,1,1,1.8,1.4c0.8,0.5,1.5,0.7,2.1,0.7c2.7,0,4.1-1.1,4.1-3.3c0-0.7-0.4-1.2-1.1-1.7c-0.7-0.5-1.7-0.8-2.8-1  c-1.1-0.2-2.3-0.5-3.6-1c-1.3-0.5-2.5-1-3.6-1.6c-1.1-0.6-2-1.6-2.8-2.9c-0.7-1.3-1.1-2.9-1.1-4.8c0-2.6,1-4.8,2.9-6.8  c1.9-1.9,4.5-2.9,7.9-2.9c1.8,0,3.4,0.2,4.8,0.7c1.5,0.5,2.5,0.9,3,1.4l1.1,0.8c0.9,0.9,1.4,1.6,1.4,2.2c0,0.6-0.4,1.4-1.1,2.4  c-1,1.5-2,2.2-3.1,2.2c-0.6,0-1.4-0.3-2.3-0.9c-0.1-0.1-0.3-0.2-0.5-0.4c-0.3-0.2-0.5-0.4-0.7-0.6c-0.6-0.4-1.4-0.6-2.4-0.6  c-1,0-1.7,0.2-2.4,0.7c-0.6,0.5-0.9,1.1-0.9,1.9c0,0.8,0.4,1.5,1.1,2c0.7,0.5,1.7,0.8,2.8,1c1.1,0.2,2.3,0.4,3.7,0.8  c1.3,0.4,2.5,0.8,3.7,1.3c1.1,0.5,2,1.4,2.8,2.8c0.7,1.3,1.1,2.9,1.1,4.8c0,1.9-0.4,3.6-1.1,5c-0.8,1.5-1.8,2.6-3,3.4  c-2.4,1.6-4.9,2.3-7.6,2.3c-1.4,0-2.7-0.2-3.9-0.5c-1.2-0.3-2.2-0.8-3-1.3c-1.6-0.9-2.6-1.9-3.3-2.7L109.7,75.8z"/>
+<path fill="#16C473" d="M144,72.5h13.6c0.7,0,1.2,0,1.5,0.1c0.3,0,0.7,0.2,1.2,0.4c0.8,0.4,1.2,1.6,1.2,3.4c0,2.1-0.5,3.3-1.6,3.6  c-0.5,0.2-1.3,0.3-2.3,0.3h-17.4c-2.1,0-3.3-0.6-3.6-1.7c-0.2-0.5-0.3-1.2-0.3-2.2V51.9c0-1.5,0.3-2.5,0.8-3.1  c0.6-0.5,1.6-0.8,3.2-0.8h17.4c0.7,0,1.2,0,1.5,0.1c0.3,0,0.7,0.2,1.2,0.4c0.8,0.4,1.2,1.6,1.2,3.4c0,2.1-0.5,3.3-1.6,3.6  c-0.5,0.2-1.3,0.3-2.3,0.3H144v4.4h8.7c0.7,0,1.2,0,1.5,0.1c0.3,0,0.7,0.2,1.2,0.4c0.8,0.4,1.2,1.6,1.2,3.4c0,2.1-0.6,3.3-1.7,3.6  c-0.5,0.2-1.3,0.3-2.3,0.3H144V72.5z"/>
+<path fill="#16C473" d="M199.9,49.3c0.2,0.4,0.4,0.8,0.4,1.2c0,0.4,0.1,0.9,0.1,1.5v24.4c0,2-0.6,3.2-1.7,3.6  c-0.6,0.2-1.3,0.3-2.1,0.3s-1.5-0.1-2-0.2c-0.5-0.1-0.9-0.3-1.1-0.5c-0.3-0.2-0.5-0.5-0.6-0.9c-0.1-0.5-0.2-1.3-0.2-2.3V61.6  c-0.7,0.9-1.8,2.4-3.2,4.3c-1.4,2-2.3,3.2-2.7,3.7c-0.4,0.5-0.6,0.8-0.8,1c-0.1,0.2-0.5,0.5-1.1,0.8c-0.6,0.3-1.2,0.5-1.9,0.5  c-0.7,0-1.3-0.2-1.8-0.5c-0.5-0.3-0.9-0.6-1.2-0.9l-0.4-0.5c-0.6-0.7-1.7-2.3-3.5-4.7c-1.7-2.4-2.7-3.7-2.8-3.9v14.8  c0,0.7,0,1.2-0.1,1.5c0,0.3-0.2,0.7-0.4,1.1c-0.4,0.8-1.6,1.2-3.4,1.2c-1.8,0-2.9-0.4-3.3-1.2c-0.2-0.4-0.4-0.8-0.4-1.1  c0-0.4-0.1-0.9-0.1-1.6V51.9c0-0.7,0-1.2,0.1-1.5c0-0.3,0.2-0.7,0.4-1.2c0.4-0.8,1.6-1.1,3.4-1.1c0.8,0,1.5,0.1,2,0.3  c0.6,0.2,0.9,0.4,1.1,0.6l0.3,0.3l10,13.1c5-6.6,8.3-11,10-13.1c0.5-0.8,1.7-1.2,3.5-1.2C198.4,48.1,199.5,48.5,199.9,49.3z"/>
+<path fill="#16C473" d="M223,50.3l11.9,24.6c0.5,1,0.7,1.7,0.7,2.2c0,1.1-0.9,2-2.6,2.9c-1,0.5-1.8,0.7-2.4,0.7s-1-0.1-1.4-0.4  c-0.4-0.3-0.6-0.5-0.8-0.8c-0.2-0.3-0.4-0.7-0.7-1.3l-2.3-4.8h-12.2l-2.3,4.8c-0.3,0.6-0.5,1-0.7,1.3c-0.2,0.3-0.4,0.5-0.8,0.8  c-0.4,0.3-0.8,0.4-1.4,0.4s-1.4-0.3-2.4-0.7c-1.7-0.8-2.6-1.8-2.6-2.8c0-0.5,0.2-1.2,0.7-2.2l11.9-24.6c0.3-0.7,0.8-1.2,1.5-1.6  c0.7-0.4,1.4-0.6,2.1-0.6C221.1,48,222.3,48.8,223,50.3z M219.5,60.9l-2.9,6h5.9L219.5,60.9z"/>
+<g>
+	<path fill="#16C473" d="M269.8,68.3v-10c0-0.4,0.2-0.7,0.4-0.9c1.5-1.2,2.4-3,2.2-5.1c-0.3-2.4-2.6-4.7-5-5   c-3.4-0.4-6.3,2.3-6.3,5.6c0,1.8,0.9,3.5,2.2,4.5c0.3,0.2,0.4,0.6,0.4,0.9v9.2c0,0.2-0.3,0.3-0.4,0.2l-10.8-10.8   c-0.4-0.4-0.5-0.9-0.3-1.4c0.4-1.2,0.5-2.4,0.3-3.8c-0.5-3.7-3.5-6.7-7.2-7.1c-5.4-0.6-10,3.9-9.3,9.3c0.4,3.7,3.4,6.7,7.1,7.2   c1.3,0.2,2.6,0.1,3.8-0.3c0.4-0.1,1.1,0,1.4,0.3l11.5,11.5c0.4,0.4,0.6,1,0.5,1.6c-0.2,0.9-0.2,2,0.1,3c0.7,2.5,2.8,4.5,5.4,4.9   c4.2,0.7,7.9-2.6,7.9-6.7c0-2.3-1.2-4.3-2.9-5.6C270.1,69.5,269.8,68.9,269.8,68.3z"/>
+	<circle fill="#16C473" cx="244.2" cy="75.4" r="5.1"/>
+</g>
+<path fill="#405075" d="M31.8,4.4c-0.4-0.2-1.1-0.3-2.1-0.3H5.3c-1,0-1.7,0.1-2.2,0.4C2.7,4.7,2.4,5,2.3,5.4C2.1,5.9,2,6.5,2,7.3  C2,8,2.1,8.6,2.3,9.1c0.1,0.5,0.4,0.8,0.9,1c0.4,0.2,1.1,0.3,2.1,0.3h8.5v22.1c0,0.7,0,1.2,0.1,1.5c0,0.3,0.2,0.7,0.4,1.1  c0.2,0.4,0.6,0.7,1.1,0.9c0.5,0.2,1.3,0.3,2.2,0.3c0.9,0,1.6-0.1,2.2-0.3c0.6-0.2,0.9-0.5,1.2-0.9c0.2-0.4,0.4-0.8,0.4-1.1  c0-0.3,0.1-0.8,0.1-1.5V10.5h8.4c1,0,1.7-0.1,2.2-0.4c0.4-0.2,0.6-0.5,0.7-0.9c0.1-0.5,0.2-1.1,0.2-1.8c0-0.8-0.1-1.4-0.2-1.9  C32.6,5,32.3,4.6,31.8,4.4z"/>
+<path fill="#405075" d="M70.8,4.1c-1.9,0-3,0.4-3.4,1.2C67.1,5.8,67,6.2,67,6.5c0,0.3-0.1,0.8-0.1,1.5v24.5c0,1,0.1,1.8,0.3,2.2  c0.4,1.1,1.6,1.7,3.6,1.7c1.9,0,3-0.4,3.4-1.2c0.2-0.4,0.4-0.8,0.4-1.1c0-0.3,0.1-0.8,0.1-1.5V8.1c0-1-0.1-1.8-0.2-2.3  C74.1,4.7,72.9,4.1,70.8,4.1z"/>
+<path fill="#405075" d="M125.3,4.1c-1.9,0-3,0.4-3.4,1.2c-0.2,0.4-0.4,0.8-0.4,1.2c0,0.3-0.1,0.8-0.1,1.5v24.5c0,1,0.1,1.8,0.3,2.2  c0.4,1.1,1.6,1.7,3.6,1.7c1.9,0,3-0.4,3.4-1.2c0.2-0.4,0.4-0.8,0.4-1.1c0-0.3,0.1-0.8,0.1-1.5V8.1c0-1-0.1-1.8-0.2-2.3  C128.5,4.7,127.3,4.1,125.3,4.1z"/>
+<path fill="#405075" d="M159,8.7c-3.2-3.1-7-4.6-11.2-4.6l-8.1,0c-1.9,0-3,0.4-3.4,1.2c-0.2,0.4-0.4,0.8-0.4,1.1  c0,0.3-0.1,0.8-0.1,1.5v24.5c0,1.3,0.2,2.2,0.5,2.8c0.4,0.7,1.6,1.1,3.3,1.1h8.1c4.5,0,8.3-1.6,11.5-4.8c3.2-3.2,4.7-7,4.7-11.5  C163.9,15.6,162.3,11.8,159,8.7z M153.5,26.2c-1.7,1.6-3.6,2.4-5.7,2.4h-4.3V11.9h4.2c2.2,0,4.2,0.8,5.8,2.4c1.7,1.6,2.5,3.6,2.5,6  C156.1,22.7,155.2,24.7,153.5,26.2z"/>
+<path fill="#405075" d="M184.5,6.4c-0.8-1.5-1.9-2.3-3.5-2.3c-0.7,0-1.4,0.2-2.1,0.6c-0.7,0.4-1.2,1-1.5,1.6L165.5,31  c-0.5,1-0.7,1.7-0.7,2.2c0,1.1,0.9,2,2.6,2.8c1,0.5,1.8,0.7,2.4,0.7s1-0.1,1.4-0.4c0.4-0.3,0.6-0.6,0.8-0.8c0.2-0.3,0.4-0.7,0.7-1.3  l2.3-4.8h12.2l2.3,4.8c0.3,0.6,0.5,1,0.7,1.3c0.2,0.3,0.4,0.6,0.8,0.8c0.4,0.3,0.8,0.4,1.4,0.4s1.4-0.2,2.4-0.7  c1.7-0.9,2.6-1.8,2.6-2.9c0-0.5-0.2-1.2-0.7-2.2L184.5,6.4z M178,23l2.9-6l3,6H178z"/>
+<path fill="#405075" d="M224.2,8.7c-3.2-3.1-7-4.6-11.2-4.6l-8.1,0c-1.9,0-3,0.4-3.4,1.2c-0.2,0.4-0.4,0.8-0.4,1.1  c0,0.3-0.1,0.8-0.1,1.5v24.5c0,1.3,0.2,2.2,0.5,2.8c0.4,0.7,1.6,1.1,3.3,1.1h8.1c4.5,0,8.3-1.6,11.5-4.8c3.2-3.2,4.7-7,4.7-11.5  C229,15.6,227.4,11.8,224.2,8.7z M218.7,26.2c-1.7,1.6-3.6,2.4-5.7,2.4h-4.3V11.9h4.2c2.2,0,4.2,0.8,5.8,2.4c1.7,1.6,2.5,3.6,2.5,6  C221.2,22.7,220.4,24.7,218.7,26.2z"/>
+<g>
+	<circle fill="#405075" cx="108.5" cy="9.5" r="4.3"/>
+	<path fill="#405075" d="M109.1,23.9c-0.9-0.1-1.8,0-2.6,0.2c-0.8,0.2-1.6,0-2.2-0.6L93,12.2c-0.5-0.5-0.8-1.3-0.7-2.1   c0.1-0.8,0-1.6-0.2-2.5c-0.7-2.3-2.7-4.1-5.1-4.4c-3.9-0.6-7.3,2.4-7.3,6.3c0,2,0.9,3.8,2.4,5c0.6,0.4,0.9,1.1,0.9,1.8v11.3   c0,0.4-0.1,0.7-0.4,1c-1,1-1.5,2.4-1.3,4c0.3,2.2,2,3.9,4.2,4.1c2.9,0.3,5.3-1.9,5.3-4.8c0-1.3-0.5-2.4-1.3-3.3   c-0.3-0.3-0.5-0.7-0.5-1.1V17.4c0-0.2,0.3-0.4,0.5-0.2L100,27.8c0.6,0.6,0.8,1.5,0.6,2.3c-0.2,0.8-0.3,1.6-0.2,2.5   c0.3,3.9,3.5,7.1,7.5,7.4c4.8,0.3,8.8-3.7,8.5-8.5C116.2,27.5,113,24.2,109.1,23.9z"/>
+</g>
+<path fill="#405075" d="M59.8,21c0.8-1.5,1.1-3.3,1.1-5.2c0-1.9-0.4-3.6-1.1-5.2c-0.8-1.6-1.7-2.8-3-3.7c-2.4-1.9-5-2.8-7.5-2.8  h-9.4c-1.9,0-3,0.4-3.4,1.2c-0.2,0.4-0.4,0.8-0.4,1.2C36,6.8,36,7.3,36,8v24.5c0,1,0.1,1.8,0.3,2.3c0.4,1.1,1.6,1.6,3.6,1.6  c1.9,0,3-0.4,3.4-1.2c0.2-0.4,0.4-0.8,0.4-1.2c0-0.3,0.1-0.8,0.1-1.5v-5H46l7.9,7.3c0.8,0.7,1.4,1.1,1.8,1.3c1.1,0.5,2.3,0,3.7-1.5  c1.3-1.4,1.8-2.5,1.5-3.3c-0.2-0.5-0.3-0.8-0.6-1.1c-0.2-0.3-0.6-0.6-1.1-1.1l-3.8-3.5c0.5-0.3,0.9-0.6,1.4-1  C58.1,23.8,59.1,22.6,59.8,21z M52,18.8c-0.9,0.6-1.7,1-2.6,1h-5.6v-7.8h5.5c0.9,0,1.8,0.3,2.6,1c0.9,0.7,1.3,1.6,1.3,2.9  S52.8,18.1,52,18.8z"/>
+</svg>

src/assets/stylus/_fonts.styl

@@ -0,0 +1,60 @@
+@font-face
+ font-family: Booster
+ src: url(/assets/fonts/booster/325738_1_0.eot)
+ src: url(/assets/fonts/booster/325738_1_0.eot?#iefix) format("embedded-opentype"),
+ url(/assets/fonts/booster/325738_1_0.woff2) format("woff2"),
+ url(/assets/fonts/booster/325738_1_0.woff) format("woff"),
+ url(/assets/fonts/booster/325738_1_0.ttf) format("truetype")
+ font-style: normal
+ font-weight: 400
+
+@font-face
+ font-family: Booster
+ src: url(/assets/fonts/booster/325738_2_0.eot);
+ src: url(/assets/fonts/booster/325738_2_0.eot?#iefix) format("embedded-opentype"),
+ url(/assets/fonts/booster/325738_2_0.woff2) format("woff2"),
+ url(/assets/fonts/booster/325738_2_0.woff) format("woff"),
+ url(/assets/fonts/booster/325738_2_0.ttf) format("truetype")
+ font-style: normal
+ font-weight: 500
+
+@font-face
+ font-family: Booster
+ src: url(/assets/fonts/booster/325738_5_0.eot)
+ src: url(/assets/fonts/booster/325738_5_0.eot?#iefix) format("embedded-opentype"),
+ url(/assets/fonts/booster/325738_5_0.woff2) format("woff2"),
+ url(/assets/fonts/booster/325738_5_0.woff) format("woff"),
+ url(/assets/fonts/booster/325738_5_0.ttf) format("truetype");
+ font-style: normal
+ font-weight: 700
+
+@font-face
+ font-family: Booster
+ src: url(/assets/fonts/booster/325738_3_0.eot)
+ src: url(/assets/fonts/booster/325738_3_0.eot?#iefix) format("embedded-opentype"),
+ url(/assets/fonts/booster/325738_3_0.woff2) format("woff2"),
+ url(/assets/fonts/booster/325738_3_0.woff) format("woff"),
+ url(/assets/fonts/booster/325738_3_0.ttf) format("truetype")
+ font-style: normal
+ font-weight: 900
+
+@font-face
+ font-family: 'Open Sans'
+ src: url(/assets/fonts/open-sans/opensans-bold-webfont.woff2) format("woff2"),
+ url(/assets/fonts/open-sans/opensans-bold-webfont.woff) format("woff");
+ font-weight: 700
+ font-style: normal
+
+@font-face
+ font-family: 'Open Sans'
+ src: url(/assets/fonts/open-sans/opensans-regular-webfont.woff2) format("woff2"),
+ url(/assets/fonts/open-sans/opensans-regular-webfont.woff) format("woff")
+ font-weight: 400
+ font-style: normal
+
+@font-face
+ font-family: 'Open Sans'
+ src: url(/assets/fonts/open-sans/opensans-light-webfont.woff2) format("woff2"),
+ url(/assets/fonts/open-sans/opensans-light-webfont.woff) format("woff")
+ font-weight: 100
+ font-style: normal

src/styles.styl

@@ -1 +1,91 @@
-/* You can add global styles to this file, and also import other style files */
+@import('/assets/stylus/_fonts.styl')
+
+html, body
+  width: 100%
+  height: 100%
+  margin: 0
+  padding: 0
+
+body
+  background: #3A3D57
+  background-image: url(/assets/images/bg-deco-left.svg), url(/assets/images/bg-deco-right.svg)
+  background-repeat: no-repeat
+  background-position: left bottom, right top
+  background-size: 150px, 250px
+  background-attachment: fixed
+  font-family: Open Sans
+  line-height: 1
+
+p
+  line-height: 150%
+  font-size: 24px
+  margin: 15px 0
+
+h1, h2, h3, h4, h5
+  margin: 60px 0
+  font-family: Booster
+  font-weight: 900
+  text-transform: uppercase
+
+table
+  border-collapse: collapse
+  border-spacing: 0
+  width: 100%
+
+h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, p:first-child
+  margin-top: 0
+
+h2
+  font-weight: 700
+  font-size: 48px
+  color: #14cc76
+  text-align: center
+
+ul
+  list-style: none
+
+.clickable
+  cursor: pointer
+
+.flex-row, .flex-col
+  display: flex
+
+.flex-row
+  flex-direction: row
+
+.flex-col
+  flex-direction: column
+
+ul a
+  display: block
+  text-decoration: none
+  line-height: 120%
+  color: #333
+  position: relative
+  text-align: right
+  overflow: hidden
+  font-size: 24px
+  padding: 15px 35px
+  text-transform: uppercase
+
+ul a.active, ul a:hover
+  color: #14cc76
+  font-weight: 700
+
+.page-wrapper
+  max-width: 1200px
+  min-height: 100%
+  margin: 0 auto
+
+.page-container
+  padding: 60px 0
+  background-color: #efefef
+  flex-grow: 1
+
+.page-content
+  flex-grow: 1
+  padding: 0 60px
+  position: relative
+
+app-article p
+  margin: 40px 0 !important