2 files changed, 65 insertions, 17 deletions
diff --git a/webapp/src/app/pages/dashboard/dashboard.component.html b/webapp/src/app/pages/dashboard/dashboard.component.html
index ed6cfdb..041dc0d 100644
--- a/webapp/src/app/pages/dashboard/dashboard.component.html
+++ b/webapp/src/app/pages/dashboard/dashboard.component.html
@@ -1,9 +1,19 @@
-<div class="row">
-  <div class="col-xxxl-3 col-md-6">
+<nb-card size="medium">
+  <nb-card-body>
     <!--
-    <ngx-status-card title="Light" type="primary">
-      <i class="nb-lightbulb"></i>
-    </ngx-status-card>
+    <div class="picture" style="background-image:url('assets/images/xds_dashboard_background.png');"></div>
     -->
-  </div>
-</div>
+
+    <div class="details">
+      <div class="title" align="center">
+        Welcome to XDS Dashboard
+      </div>
+      <div class="description">
+        <b>X(cross) Development System</b> allows developers to easily cross-compile AGL applications.
+        <br> <br> Used left-side menu to managed your projects, AGL SDKs and start building and debugging your applications.
+        <br> <br> Online documentation is available on <a href="http://docs.automotivelinux.org/docs/devguides/en/dev/reference/xds/part-1/0_Abstract.html" target="_blank">AGL website documentation</a>
+      </div>
+    </div>
+  </nb-card-body>
+
+</nb-card>
diff --git a/webapp/src/app/pages/dashboard/dashboard.component.scss b/webapp/src/app/pages/dashboard/dashboard.component.scss
index 6f1f0e0..376510d 100644
--- a/webapp/src/app/pages/dashboard/dashboard.component.scss
+++ b/webapp/src/app/pages/dashboard/dashboard.component.scss
@@ -1,16 +1,54 @@
 @import '../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
-
 @include nb-install-component() {
-  .solar-card nb-card-header {
-    border: none;
-    padding-bottom: 0;
+  nb-card-body {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+  .picture {
+    background-position: center;
+    background-size: cover;
+    position: relative;
+    border-top-left-radius: nb-theme(card-border-radius);
+    border-top-right-radius: nb-theme(card-border-radius);
+    flex: 1;
+  }
+  .details {
+    padding: 1.25rem;
+    .title {
+      padding-bottom: 2.5rem;
+      font-family: nb-theme(font-secondary);
+      font-weight: nb-theme(font-weight-bold);
+      color: nb-theme(color-fg-heading);
+      font-size: 2rem;
+      margin-bottom: 1rem;
+      @include nb-for-theme(cosmic) {
+        font-weight: nb-theme(font-weight-bolder);
+      }
+    }
+    .description {
+      text-align: center;
+      color: nb-theme(color-fg-text);
+      font-size: 1.3rem;
+      font-weight: nb-theme(font-weight-light);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
-
-  @include media-breakpoint-down(is) {
-    /deep/ nb-card.large-card {
-      height: nb-theme(card-height-medium);
+  nb-card-footer {
+    display: flex;
+    justify-content: space-around;
+    padding: 0.75rem 0;
+    border: none;
+    a {
+      text-decoration: none;
+      color: nb-theme(color-fg);
+      &:hover {
+        color: nb-theme(color-fg-heading);
+      }
+      i {
+        font-size: 1.75rem;
+      }
     }
   }
 }