[frontend] Add dashboard hoods list initial design

kibicara-frontend/src/app/dashboard/hoods/hoods.component.html

@@ -1,2 +1,32 @@
-<p>hoods works!</p>
-<!--<div *ngFor="let item of hoods$ | async">{{ item.name }}</div>-->
+<div class="container">
+  <div class="title">
+    <h1>Your Hoods</h1>
+    <p>
+      Your role as an hood admin is to build a community in real life that
+      supports each other. Kibicara hoods will support you by providing the
+      technology for your community to florish!
+    </p>
+    <mat-selection-list [multiple]="false">
+      <div mat-subheader>Configure your hoods</div>
+      <mat-divider></mat-divider>
+      <a
+        *ngFor="let hood of hoods$ | async"
+        [routerLink]="['/dashboard/hoods', hood.id]"
+      >
+        <mat-list-option>
+          <div class="list-entry-container">
+            <mat-icon>settings</mat-icon>
+            <div class="list-entry">
+              Your Hood - <strong>{{ hood.name }}</strong>
+            </div>
+          </div>
+          <mat-divider></mat-divider>
+        </mat-list-option>
+      </a>
+    </mat-selection-list>
+    <button mat-raised-button color="primary" class="add-hood-button">
+      New hood
+    </button>
+  </div>
+  <div class="banner"></div>
+</div>

kibicara-frontend/src/app/dashboard/hoods/hoods.component.scss

@@ -0,0 +1,62 @@
+a {
+  text-decoration: none;
+}
+
+.title {
+  text-align: left;
+  padding-top: 10%;
+  padding-left: 15%;
+  padding-right: 15%;
+  @media (max-width: 600px) {
+    text-align: center;
+    padding-left: 10%;
+    padding-right: 10%;
+  }
+}
+
+h1 {
+  font-size: 2.3125rem;
+  line-height: 3rem;
+}
+
+p {
+  color: grey;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: stretch;
+  justify-items: stretch;
+  height: 100%;
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.banner {
+  background: url("../../../assets/hoods.jpg");
+  background-size: 90%;
+  display: block;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0.5;
+}
+
+.add-hood-button {
+  margin-top: 30px;
+}
+
+.list-entry {
+  text-align: left;
+  margin-left: 10px;
+  margin-top: 5px;
+}
+
+.list-entry-container {
+  display: grid;
+  grid-template-columns: 30px 1fr;
+}