alerts-ui: Update home page

alerts-ui/src/app/app.component.ts

@@ -46,6 +46,9 @@ export class AppComponent implements OnInit {
 
   englishLang(): Object {
     return {
+      'home.examples': 'Examples',
+      'home.newCurrenciesAlertExample': 'New Currencies Alert',
+      'home.priceAlertExample': 'Price Alert',
       'home.descripion': 'Crypto Coin Alerts let you be aware of the changes in your crypto currencies',
       'home.alertTypes': `<ul>
   <li>Get notified when a currency increases or decreases a given price</li>
@@ -142,10 +145,13 @@ Still can not find it? Try searching Gmail for "in:all subject:(Confirm your acc
 
   spanishLang(): Object {
     return {
+      'home.examples': 'Ejemplos',
+      'home.newCurrenciesAlertExample': 'Nuevas monedas',
+      'home.priceAlertExample': 'Alerta por precio',
       'home.descripion': 'Crypto Coin Alerts te permite enterarte de los cambios en los precios de cripto monedas',
       'home.alertTypes': `<ul>
   <li>Recibe una alerta cuando una cripto moneda sube o baja de cierto precio</li>
-  <li>Recibe una alerta cuando alguno de los exchanges que usas agrega una nueva cripto moneda</li>
+  <li>Recibe una alerta cuando alguno de los exchanges que usas agrega una nueva moneda</li>
 </ul>`,
 
       'home.emailNotReceivedHelp': `Si no has recibido el email para verificar tu cuenta,

alerts-ui/src/app/home/home.component.css

@@ -0,0 +1,18 @@
+
+.home-description {
+  font-weight: bold;
+}
+
+#home-examples {
+  font-weight: bold;
+  font-size: 20px;
+}
+
+#home-accountRequired {
+  font-weight: 500;
+  font-size: 25px;
+}
+
+#home-supported-exchanges {
+  font-size: 20px;
+}

alerts-ui/src/app/home/home.component.html

@@ -1,63 +1,62 @@
 
-<div class="col-sm-offset-1">
-  <p>
-    {{'home.descripion' | translate}}
-  </p>
-
-  <div>
-    <button type="button" class="btn btn-primary" (click)="alertTypesCollapsed = !alertTypesCollapsed">
-      {{'label.alertTypes' | translate}}
-    </button>
-    <div [collapse]="alertTypesCollapsed" class="card card-block card-header">
-      <div class="well well-lg" [innerHTML]="'home.alertTypes' | translate"></div><hr>
+<div class="container">
+
+  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 home-description">
+    <header>
+      <h2>{{'home.descripion' | translate}}</h2>
+    </header>
+
+    <div>
+      <div class="panel panel-default">
+        <div class="well well-lg" [innerHTML]="'home.alertTypes' | translate"></div><hr>
+      </div>
     </div>
-  </div>
 
-  <div>
-    <button type="button" class="btn btn-primary" (click)="supportedExchangesCollapsed = !supportedExchangesCollapsed">
-      {{'label.supportedExchanges' | translate}}
-    </button>
-    <div [collapse]="supportedExchangesCollapsed" class="card card-block card-header">
-      <div class="well">
-        <ul>
-          <li>
-            <a href="https://bittrex.com/">BITTREX</a>
-          </li>
-          <li>
-            <a href="https://www.binance.com/">BINANCE</a>
-          </li>
-          <li>
-            <a href="https://bitso.com/">BITSO</a>
-          </li>
-          <li>
-            <a href="https://hitbtc.com/">HITBTC</a>
-          </li>
-          <li>
-            <a href="https://www.kucoin.com/">KUCOIN</a>
-          </li>
-        </ul>
-      </div><hr>
+    <div>
+      <label id="home-supported-exchanges">{{'label.supportedExchanges' | translate}}:</label>
+      <a href="https://bittrex.com/">BITTREX</a>,
+      <a href="https://www.binance.com/">BINANCE</a>,
+      <a href="https://bitso.com/">BITSO</a>,
+      <a href="https://hitbtc.com/">HITBTC</a>,
+      <a href="https://www.kucoin.com/">KUCOIN</a>
     </div>
-  </div>
 
-  <hr>
+    <hr>
 
-  <div [hidden]="authService.isAuthenticated()">
-    <p>
-      {{'message.accountNeeded.question' | translate}}
-      <a routerLink="/new-account">{{'message.accountNeeded.new' | translate}}</a> {{'message.accountNeeded.or' | translate}}
-      <a routerLink="/login">{{'message.accountNeeded.login' | translate}}</a> {{'message.accountNeeded.last' | translate}}.
-    </p>
+    <div [hidden]="authService.isAuthenticated()">
+      <p id="home-accountRequired">
+        {{'message.accountNeeded.question' | translate}}
+        <a routerLink="/new-account">{{'message.accountNeeded.new' | translate}}</a> {{'message.accountNeeded.or' | translate}}
+        <a routerLink="/login">{{'message.accountNeeded.login' | translate}}</a> {{'message.accountNeeded.last' | translate}}.
+      </p>
 
-    <div>
-      <button type="button" class="btn btn-danger" (click)="emailNotReceivedHelpCollapsed = !emailNotReceivedHelpCollapsed">
-        {{'label.emailNotReceived' | translate}}
-      </button>
-      <div [collapse]="emailNotReceivedHelpCollapsed" class="card card-block card-header">
-        <div class="well" [innerHTML]="'home.emailNotReceivedHelp' | translate"></div>
-        <hr>
+      <div>
+        <button type="button" class="btn btn-danger" (click)="emailNotReceivedHelpCollapsed = !emailNotReceivedHelpCollapsed">
+          {{'label.emailNotReceived' | translate}}
+        </button>
+        <div [collapse]="emailNotReceivedHelpCollapsed" class="card card-block card-header">
+          <div class="well" [innerHTML]="'home.emailNotReceivedHelp' | translate"></div>
+          <hr>
+        </div>
       </div>
     </div>
+    <hr>
   </div>
-  <hr>
-</div>
+
+  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
+    <label id="home-examples">{{'home.examples' | translate}}</label>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        <img src="assets/new-currencies-email.png" alt="New Currency Email">
+      </div>
+      <div class="panel-footer">{{'home.newCurrenciesAlertExample' | translate}}</div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-body">
+        <img src="assets/price-alert-email.png" alt="Price Alert Email">
+      </div>
+      <div class="panel-footer">{{'home.priceAlertExample' | translate}}</div>
+    </div>
+  </div>
+
+</div>