[frontend] Add initial design for homepage and organizerspage

kibicara-frontend/src/app/homepage/homepage.component.html

@@ -1 +1,70 @@
-<app-heading-one [title]="title"></app-heading-one>
+<div class="container">
+  <div class="heading">
+    <h1 class="h1">Kibicara</h1>
+    <p class="text">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </p>
+    <a mat-raised-button [routerLink]="['/hoods']">Find your hood!</a>
+  </div>
+  <div class="banner"></div>
+</div>
+
+<div class="howto-container">
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+</div>
+
+<div class="banner2"></div>
+
+<div class="container">
+  <p class="text">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat.
+  </p>
+  <a mat-raised-button [routerLink]="['/hoods']">Discover hoods!</a>
+</div>
+
+<div class="howto-container">
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+</div>

kibicara-frontend/src/app/homepage/homepage.component.scss

@@ -0,0 +1,73 @@
+@import "variables";
+
+.h1 {
+  color: white;
+  font-size: 80px;
+  font-weight: 700;
+  @media (max-width: 600px) {
+    font-weight: 500;
+  }
+}
+
+.text {
+  padding-top: 40px;
+  padding-bottom: 30px;
+  color: white;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+}
+
+.container {
+  background-color: #673ab7;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 5% 10% 5% 10%;
+  min-height: 300px;
+  gap: 50px;
+  height: 70%;
+  align-items: center;
+  @media (max-width: 600px) {
+    padding-top: 10%;
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+
+.banner {
+  background: url("../../assets/hoods3.jpg");
+  background-size: 100%;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.heading {
+  margin-top: 10%;
+  margin-bottom: 5%;
+}
+
+.howto-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 5%;
+  margin: 10%;
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+    gap: 1%;
+  }
+}
+
+.banner2 {
+  background: url("../../assets/hoods3.jpg");
+  background-size: 100%;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+.howto {
+  color: grey;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+}

kibicara-frontend/src/app/hoodspage/hoodspage.component.html

@@ -19,7 +19,7 @@
     class="list"
   >
     <a
-      [routerLink]="['/register']"
+      [routerLink]="['/organizers']"
       *ngIf="(hoods | filter: searchText).length === 0"
     >
       <mat-list-option>

kibicara-frontend/src/app/organizerspage/organizerspage.component.html

@@ -1 +1,56 @@
 <app-heading-one [title]="title"></app-heading-one>
+
+<div class="howto-container">
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+</div>
+
+<div class="container">
+  <p class="text">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat.
+  </p>
+  <a mat-raised-button [routerLink]="['/register']">Register as hood admin!</a>
+</div>
+
+<div class="howto-container">
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+  <div class="howto">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </div>
+</div>

kibicara-frontend/src/app/organizerspage/organizerspage.component.scss

@@ -0,0 +1,40 @@
+.howto-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 5%;
+  margin: 5% 10% 5% 10%;
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+    gap: 1%;
+  }
+}
+
+.howto {
+  color: grey;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+}
+
+.container {
+  background-color: #673ab7;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 5% 10% 5% 10%;
+  min-height: 300px;
+  gap: 50px;
+  height: 70%;
+  align-items: center;
+  @media (max-width: 600px) {
+    padding-top: 10%;
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+
+.text {
+  padding-top: 40px;
+  padding-bottom: 30px;
+  color: white;
+  font-size: 1.4375rem;
+  line-height: 1.875rem;
+}