feat(dashboard): add a team widget (#11)

src/app/pages/dashboard/dashboard.component.html

@@ -41,10 +41,7 @@
         </nga-card>
       </div>
       <div class="col-lg-6">
-        <nga-card>
-          <nga-card-header>Akveo Team</nga-card-header>
-          <nga-card-body></nga-card-body>
-        </nga-card>
+        <ngx-team></ngx-team>
       </div>
       <div class="col-lg-6">
         <nga-card>

src/app/pages/dashboard/dashboard.module.ts

@@ -9,6 +9,7 @@ import { RoomsComponent } from './rooms/rooms.component';
 import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
 import { TemperatureComponent } from './temperature/temperature.component';
 import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
+import { TeamComponent } from './team/team.component';
 
 @NgModule({
   imports: [
@@ -24,6 +25,7 @@ import { TemperatureDraggerComponent } from './temperature/temperature-dragger/t
     RoomSelectorComponent,
     TemperatureComponent,
     RoomsComponent,
+    TeamComponent,
   ],
 })
 export class DashboardModule { }

src/app/pages/dashboard/team/team.component.html

@@ -0,0 +1,35 @@
+<nga-card>
+  <nga-card-body>
+    <div class="team-photo">
+      <a href="mailto:contact@akveo.com">
+        <button type="button" class="btn btn-success btn-icon team-link">
+          <i class="ion-paper-airplane"></i>
+        </button>
+      </a>
+    </div>
+    <div class="team-info">
+      <div class="team-title">
+        <h2>Akveo Team</h2>
+      </div>
+      <div class="team-subtitle">Design & Development</div>
+      <div class="team-bio">
+        We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make
+        your product amazing.
+      </div>
+    </div>
+  </nga-card-body>
+  <nga-card-footer>
+    <a href="https://www.akveo.com" target="_blank">
+      <i class="ion-ios-world-outline"></i>
+    </a>
+    <a href="https://www.facebook.com/akveo" target="_blank">
+      <i class="ion-social-facebook"></i>
+    </a>
+    <a href="https://twitter.com/akveo_inc" target="_blank">
+      <i class="ion-social-twitter"></i>
+    </a>
+    <a href="https://github.com/akveo" target="_blank">
+      <i class="ion-social-github"></i>
+    </a>
+  </nga-card-footer>
+</nga-card>

src/app/pages/dashboard/team/team.component.scss

@@ -0,0 +1,70 @@
+@import '../../../@theme/styles/variables';
+@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
+
+@include nga-install-component() {
+
+  .team-photo {
+    background-image: url('./~/assets/images/team.jpg');
+    background-position: center;
+    background-size: cover;
+    height: 200px;
+    position: relative;
+    border-top-left-radius: nga-theme(card-border-radius);
+    border-top-right-radius: nga-theme(card-border-radius);
+
+    .team-link {
+      border-radius: 50%;
+      height: 60px;
+      width: 60px;
+      position: absolute;
+      bottom: -2rem;
+      right: 1rem;
+      box-shadow: btn-hero-shadow();
+    }
+  }
+
+  .team-info {
+    padding: 2rem 1.5rem;
+    padding-bottom: 0;
+
+    .team-title {
+      color: nga-theme(color-fg-heading);
+      font-family: nga-theme(font-secondary);
+
+      h2 {
+        margin: 0;
+      }
+    }
+
+    .team-subtitle {
+      margin-bottom: 1rem;
+      color: nga-theme(color-fg-hint);
+    }
+
+    .team-bio {
+      // TODO: nga-theme(color-fg) is not getting needed color
+      // color: nga-theme(color-fg);
+      text-align: justify;
+      color: #d1d1ff;
+    }
+  }
+
+  nga-card > nga-card-body {
+    padding: 0;
+    height: 100%;
+  }
+
+  nga-card > nga-card-footer {
+    display: flex;
+    justify-content: space-around;
+
+    a {
+      text-decoration: none;
+      color: nga-theme(color-fg-hint);
+
+      i {
+        font-size: 2rem;
+      }
+    }
+  }
+}

src/app/pages/dashboard/team/team.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-team',
+  styleUrls: ['./team.component.scss'],
+  templateUrl: './team.component.html',
+})
+export class TeamComponent {
+}