From 0f5221d6642f59d8e8ab5485b1584f79d517cceb Mon Sep 17 00:00:00 2001
From: Ewout <ewoutverlinde@hotmail.com>
Date: Sat, 28 Sep 2024 12:23:14 +0200
Subject: [PATCH] feat: stad gent contact component

---
 frontend/src/app/app.constants.ts             |   7 +
 frontend/src/app/app.module.ts                | 280 +++++++++---------
 .../dashboard/dashboard.component.html        | 127 ++------
 .../faq/faq-search/faq-search.component.html  |  19 +-
 .../src/app/components/faq/faq.component.html |  26 +-
 .../faq-management.component.ts               |  22 +-
 .../molecules/contact/contact.component.html  |  33 +++
 .../molecules/contact/contact.component.scss  |   0
 .../contact/contact.component.spec.ts         |  23 ++
 .../molecules/contact/contact.component.ts    |  28 ++
 .../highlight/highlight.component.html        |  11 +
 .../highlight/highlight.component.scss        |   0
 .../highlight/highlight.component.spec.ts     |  23 ++
 .../highlight/highlight.component.ts          |  18 ++
 14 files changed, 343 insertions(+), 274 deletions(-)
 create mode 100644 frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.html
 create mode 100644 frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.scss
 create mode 100644 frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.spec.ts
 create mode 100644 frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.ts
 create mode 100644 frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.html
 create mode 100644 frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.scss
 create mode 100644 frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.spec.ts
 create mode 100644 frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.ts

diff --git a/frontend/src/app/app.constants.ts b/frontend/src/app/app.constants.ts
index c14da1db1..982a16eff 100644
--- a/frontend/src/app/app.constants.ts
+++ b/frontend/src/app/app.constants.ts
@@ -39,3 +39,10 @@ export const HOIColors = {
 export const institutions = [
     'UGent', 'HoGent', 'Arteveldehogeschool', 'StadGent', 'Luca', 'Odisee', 'Other'
 ];
+
+export const contact = {
+    'email': 'studieplekken@gentsestudentenraad.be',
+    'address': 'Hoveniersberg 24, 9000 Gent',
+    'building': 'De Therminal',
+    'website': 'https://bloklocaties.stad.gent'
+};
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 92a48438e..0b4129df9 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -1,190 +1,192 @@
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule, SecurityContext} from '@angular/core';
-import {AppComponent} from './app.component';
-import {
-    HttpClient,
-    HttpClientModule,
-    HTTP_INTERCEPTORS,
-} from '@angular/common/http';
-import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
-import {TranslateHttpLoader} from '@ngx-translate/http-loader';
-import {RouterModule, Routes} from '@angular/router';
-import {DashboardComponent} from './components/dashboard/dashboard.component';
-import {ProfileComponent} from './components/profile/profile.component';
-import {ScanComponent} from './components/scan/scan.component';
-import {ManagementComponent} from './components/management/management.component';
-import {NavigationComponent} from './components/navigation/navigation.component';
-import {MarkdownModule} from 'ngx-markdown';
-import {DashboardItemComponent} from './components/dashboard/dashboard-item/dashboard-item.component';
-import {CalendarComponent} from './components/calendar/calendar.component';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {CalendarModule, DateAdapter} from 'angular-calendar';
-import {adapterFactory} from 'angular-calendar/date-adapters/date-fns';
-import {ProfileOverviewComponent} from './components/profile/profile-overview/profile-overview.component';
-import {ProfileReservationsComponent} from './components/profile/profile-reservations/profile-reservations.component';
-import {ProfileCalendarComponent} from './components/profile/profile-calendar/profile-calendar.component';
-import {ProfilePenaltiesComponent} from './components/profile/profile-penalties/profile-penalties.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {
-    ProfileChangePasswordComponent
-} from './components/profile/profile-change-password/profile-change-password.component';
-import {
-    LocationsManagementComponent
-} from '@/components/management/locations-management/locations-management.component';
-import {UsersManagementComponent} from '@/components/management/users-management/users-management.component';
-import {
-    LocationDetailsManagementComponent
-} from '@/components/management/locations-management/location-details-management/location-details-management.component';
 import {
     DetailsFormComponent
 } from '@/components/management/locations-management/location-details-management/details-form/details-form.component';
 import {
     LocationCalendarComponent
 } from '@/components/management/locations-management/location-details-management/location-calendar/location-calendar.component';
-import {FlatpickrModule} from 'angularx-flatpickr';
 import {
-    UserDetailsManagementComponent
-} from '@/components/management/users-management/user-details-management/user-details-management.component';
-// tslint:disable-next-line:max-line-length
+    LocationDetailsManagementComponent
+} from '@/components/management/locations-management/location-details-management/location-details-management.component';
 import {
-    UserDetailsFormComponent
-} from '@/components/management/users-management/user-details-management/user-details-form/user-details-form.component';
+    LocationsManagementComponent
+} from '@/components/management/locations-management/locations-management.component';
 import {
-    UserRolesComponent
-} from '@/components/management/users-management/user-details-management/user-roles/user-roles.component';
+    UserDetailsManagementComponent
+} from '@/components/management/users-management/user-details-management/user-details-management.component';
+import { UsersManagementComponent } from '@/components/management/users-management/users-management.component';
 import {
-    LocationDescriptionComponent
-} from '@/components/management/locations-management/location-details-management/location-description/location-description.component';
-import {CKEditorModule} from '@ckeditor/ckeditor5-angular';
-import {TagsManagementComponent} from '@/components/management/tags-management/tags-management.component';
+    HTTP_INTERCEPTORS,
+    HttpClient,
+    HttpClientModule,
+} from '@angular/common/http';
+import { NgModule, SecurityContext } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule, Routes } from '@angular/router';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { FlatpickrModule } from 'angularx-flatpickr';
+import { MarkdownModule } from 'ngx-markdown';
+import { AppComponent } from './app.component';
+import { CalendarComponent } from './components/calendar/calendar.component';
+import { DashboardItemComponent } from './components/dashboard/dashboard-item/dashboard-item.component';
+import { DashboardComponent } from './components/dashboard/dashboard.component';
+import { ManagementComponent } from './components/management/management.component';
+import { NavigationComponent } from './components/navigation/navigation.component';
+import { ProfileCalendarComponent } from './components/profile/profile-calendar/profile-calendar.component';
 import {
-    LocationTagsManagementComponent
-} from '@/components/management/locations-management/location-details-management/location-tags-management/location-tags-management.component';
-import {MatSelectModule} from '@angular/material/select';
-import {LoginComponent} from './components/login/login.component';
+    ProfileChangePasswordComponent
+} from './components/profile/profile-change-password/profile-change-password.component';
+import { ProfileOverviewComponent } from './components/profile/profile-overview/profile-overview.component';
+import { ProfilePenaltiesComponent } from './components/profile/profile-penalties/profile-penalties.component';
+import { ProfileReservationsComponent } from './components/profile/profile-reservations/profile-reservations.component';
+import { ProfileComponent } from './components/profile/profile.component';
+import { ScanComponent } from './components/scan/scan.component';
+// tslint:disable-next-line:max-line-length
+import { AdminsManagementComponent } from '@/components/management/admins-management/admins-management.component';
 import {
     AuthoritiesManagementComponent
 } from '@/components/management/authorities-management/authorities-management.component';
-import {
-    UserAuthoritiesManagementComponent
-} from '@/components/management/users-management/user-details-management/user-authorities-management/user-authorities-management.component';
 import {
     AuthorityUsersManagementComponent
 } from '@/components/management/authorities-management/authority-users-management/authority-users-management.component';
-import {DatePipe, NgOptimizedImage, registerLocaleData} from '@angular/common';
-import {MatDialogModule} from '@angular/material/dialog';
-import localeNl from '@angular/common/locales/nl-BE';
-import {NgxMatDatetimePickerModule} from '@angular-material-components/datetime-picker';
-import {NgxMatMomentModule} from '@angular-material-components/moment-adapter';
-import {MatInputModule} from '@angular/material/input';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MomentDateComponent} from './components/shared/inputs/moment-date/moment-date.component';
-import {FormatStatusPipe} from './pipes/FormatStatusPipe';
-import {FormatActionPipe} from './pipes/FormatActionPipe';
-import {MomentDateTimeComponent} from './components/shared/inputs/moment-datetime/moment-datetime.component';
-import {
-    LocationOpeningperiodDialogComponent
-} from '@/components/management/locations-management/location-details-management/location-calendar/location-openingperiod-dialog/location-openingperiod-dialog.component';
 import {
     BuildingManagementComponent
 } from '@/components/management/building-management/building-management.component';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatTabsModule} from '@angular/material/tabs';
+import {
+    LocationOpeningperiodDialogComponent
+} from '@/components/management/locations-management/location-details-management/location-calendar/location-openingperiod-dialog/location-openingperiod-dialog.component';
 import {
     LocationReservationsComponent
 } from '@/components/management/locations-management/location-details-management/location-calendar/location-reservations/location-reservations/location-reservations.component';
+import {
+    LocationDescriptionComponent
+} from '@/components/management/locations-management/location-details-management/location-description/location-description.component';
+import {
+    LocationTagsManagementComponent
+} from '@/components/management/locations-management/location-details-management/location-tags-management/location-tags-management.component';
+import { TagsManagementComponent } from '@/components/management/tags-management/tags-management.component';
+import {
+    UserAuthoritiesManagementComponent
+} from '@/components/management/users-management/user-details-management/user-authorities-management/user-authorities-management.component';
+import {
+    UserDetailsFormComponent
+} from '@/components/management/users-management/user-details-management/user-details-form/user-details-form.component';
+import {
+    UserRolesComponent
+} from '@/components/management/users-management/user-details-management/user-roles/user-roles.component';
+import { NgxMatDatetimePickerModule } from '@angular-material-components/datetime-picker';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { DatePipe, NgOptimizedImage, registerLocaleData } from '@angular/common';
+import localeNl from '@angular/common/locales/nl-BE';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTabsModule } from '@angular/material/tabs';
+import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import { LoginComponent } from './components/login/login.component';
+import { MomentDateComponent } from './components/shared/inputs/moment-date/moment-date.component';
+import { MomentDateTimeComponent } from './components/shared/inputs/moment-datetime/moment-datetime.component';
 import {
     MomentTimeslotSizeComponent
 } from './components/shared/inputs/moment-timeslot-size/moment-timeslot-size.component';
-import {AdminsManagementComponent} from '@/components/management/admins-management/admins-management.component';
-import {FlexLayoutModule} from '@angular/flex-layout';
+import { FormatActionPipe } from './pipes/FormatActionPipe';
+import { FormatStatusPipe } from './pipes/FormatStatusPipe';
 // tslint:disable-next-line:max-line-length
+import { ActionLogComponent } from '@/components/management/actions-managament/action-log.component';
+import {
+    LocationAddTimeslotDialogComponent
+} from '@/components/management/locations-management/location-details-management/location-calendar/location-add-timeslot-dialog/location-add-timeslot-dialog.component';
+import {
+    LocationReminderComponent
+} from '@/components/management/locations-management/location-details-management/location-reminder/location-reminder.component';
 import {
     TimeslotTableComponent
 } from '@/components/management/locations-management/location-details-management/timeslot-table/timeslot-table.component';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {OpeningHoursOverviewComponent} from './components/shared/opening-hours/opening-hours-overview.component';
-import {ScanningLocationsComponent} from './components/scan/scanning-locations/scanning-locations.component';
 import {
-    ScanningLocationDetailsComponent
-} from './components/scan/scanning-location-details/scanning-location-details.component';
+    LocationVolunteersManagementComponent
+} from '@/components/management/locations-management/location-volunteers-management/location-volunteers-management.component';
 import {
-    VolunteersManagementComponent
-} from '@/components/management/volunteers-management/volunteers-management.component';
+    PenaltiesManagementComponent
+} from '@/components/management/penalties-management/penalties-management.component';
+import { TokensComponent } from '@/components/management/tokens-management/tokens.component';
 import {
     VolunteerManagementPanelComponent
 } from '@/components/management/volunteers-management/volunteer-management-panel/volunteer-management-panel.component';
-import {TokenInterceptor} from './services/authentication/token.interceptor';
-import {HeaderComponent} from './components/stad-gent-components/header/header.component';
-import {AccordeonComponent} from './components/stad-gent-components/molecules/accordeon/accordeon.component';
-import {DropdownComponent} from './components/stad-gent-components/header/dropdown/dropdown.component';
-import {FooterComponent} from './components/stad-gent-components/footer/footer.component';
-import {SearchUserComponentComponent} from './components/shared/search-user/search-user-component.component';
-import {SearchUserFormComponent} from './components/shared/search-user/search-user-form/search-user-form.component';
 import {
-    LocationAddTimeslotDialogComponent
-} from '@/components/management/locations-management/location-details-management/location-calendar/location-add-timeslot-dialog/location-add-timeslot-dialog.component';
-import {ModalComponent} from './components/stad-gent-components/molecules/modal/modal.component';
-import {QRCodeModule} from 'angularx-qrcode';
-import {QRCodeComponent} from './components/shared/qrcode/qrcode.component';
-import {ScannerComponent} from './components/shared/scanner/scanner.component';
-import {ZXingScannerModule} from '@zxing/ngx-scanner';
-import {TableComponent} from './components/stad-gent-components/atoms/table/table.component';
-import {
-    DesktopTableComponent
-} from './components/stad-gent-components/atoms/table/desktop-table/desktop-table.component';
-import {MobileTableComponent} from './components/stad-gent-components/atoms/table/mobile-table/mobile-table.component';
-import {EntryComponent} from './components/entry/entry.component';
-import {ImpersonateInterceptor} from './services/authentication/impersonate.interceptor';
-import {ActionLogComponent} from '@/components/management/actions-managament/action-log.component';
+    VolunteersManagementComponent
+} from '@/components/management/volunteers-management/volunteers-management.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ZXingScannerModule } from '@zxing/ngx-scanner';
+import { QRCodeModule } from 'angularx-qrcode';
+import { NgxBarcodeModule } from 'ngx-barcode';
 import {
     AfterReservationComponent
 } from './components/dashboard/location-reservation/after-reservation/after-reservation.component';
-import {PenaltyTableComponent} from './components/penalties/penalty-table/penalty-table.component';
-import {UserPenaltyManagerComponent} from './components/penalties/user-penalty-manager/user-penalty-manager.component';
 import {
-    PenaltiesManagementComponent
-} from '@/components/management/penalties-management/penalties-management.component';
-import {StatsComponent} from './components/management/stats/stats.component';
-import {WaffleComponent} from './components/management/stats/waffle/waffle.component';
-import {
-    LocationReminderComponent
-} from '@/components/management/locations-management/location-details-management/location-reminder/location-reminder.component';
-import {TokensComponent} from '@/components/management/tokens-management/tokens.component';
-import {AuthorizationGuardService} from './services/guard/authorization/authorization-guard.service';
-import {ChartComponent} from './components/management/stats/chart/chart.component';
-import {BarCodeComponent} from './components/shared/barcode/barcode.component';
-import {NgxBarcodeModule} from 'ngx-barcode';
-import {LocationReservationComponent} from './components/dashboard/location-reservation/location-reservation.component';
-import {MapComponent} from './components/dashboard/location-reservation/map/map.component';
-import {ManagementTableComponent} from './components/management/shared/management-table/management-table.component';
-import {
-    LocationVolunteersManagementComponent
-} from '@/components/management/locations-management/location-volunteers-management/location-volunteers-management.component';
+    LocationReservationCalendarComponent
+} from './components/dashboard/location-reservation/location-reservation-calendar/location-reservation-calendar.component';
 import {
     LocationReservationDetailsComponent
 } from './components/dashboard/location-reservation/location-reservation-details/location-reservation-details.component';
-import {
-    LocationReservationCalendarComponent
-} from './components/dashboard/location-reservation/location-reservation-calendar/location-reservation-calendar.component';
 import {
     LocationReservationListComponent
 } from './components/dashboard/location-reservation/location-reservation-list/location-reservation-list.component';
 import {
     LocationReservationMapComponent
 } from './components/dashboard/location-reservation/location-reservation-map/location-reservation-map.component';
-import {FaqComponent} from './components/faq/faq.component';
-import {FaqSearchComponent} from './components/faq/faq-search/faq-search.component';
-import {FaqItemComponent} from './components/faq/faq-item/faq-item.component';
-import {FaqSidebarComponent} from './components/faq/faq-sidebar/faq-sidebar.component';
-import {FaqSidebarItemComponent} from './components/faq/faq-sidebar/faq-sidebar-item/faq-sidebar-item.component';
-import {LoadingComponent} from './components/status/loading/loading.component';
-import {EmptyComponent} from './components/status/empty/empty.component';
-import {NotFoundComponent} from './components/status/not-found/not-found.component';
-import {TeaserComponent} from './components/stad-gent-components/molecules/teaser/teaser.component';
-import { FaqManagementComponent } from './components/management/faq-management/faq-management.component';
+import { LocationReservationComponent } from './components/dashboard/location-reservation/location-reservation.component';
+import { MapComponent } from './components/dashboard/location-reservation/map/map.component';
+import { EntryComponent } from './components/entry/entry.component';
+import { FaqItemComponent } from './components/faq/faq-item/faq-item.component';
+import { FaqSearchComponent } from './components/faq/faq-search/faq-search.component';
+import { FaqSidebarItemComponent } from './components/faq/faq-sidebar/faq-sidebar-item/faq-sidebar-item.component';
+import { FaqSidebarComponent } from './components/faq/faq-sidebar/faq-sidebar.component';
+import { FaqComponent } from './components/faq/faq.component';
 import { CategoriesManagementComponent } from './components/management/faq-management/categories-management/categories-management.component';
+import { FaqManagementComponent } from './components/management/faq-management/faq-management.component';
+import { ManagementTableComponent } from './components/management/shared/management-table/management-table.component';
+import { ChartComponent } from './components/management/stats/chart/chart.component';
+import { StatsComponent } from './components/management/stats/stats.component';
+import { WaffleComponent } from './components/management/stats/waffle/waffle.component';
+import { PenaltyTableComponent } from './components/penalties/penalty-table/penalty-table.component';
+import { UserPenaltyManagerComponent } from './components/penalties/user-penalty-manager/user-penalty-manager.component';
+import {
+    ScanningLocationDetailsComponent
+} from './components/scan/scanning-location-details/scanning-location-details.component';
+import { ScanningLocationsComponent } from './components/scan/scanning-locations/scanning-locations.component';
+import { BarCodeComponent } from './components/shared/barcode/barcode.component';
+import { OpeningHoursOverviewComponent } from './components/shared/opening-hours/opening-hours-overview.component';
+import { QRCodeComponent } from './components/shared/qrcode/qrcode.component';
+import { ScannerComponent } from './components/shared/scanner/scanner.component';
+import { SearchUserComponentComponent } from './components/shared/search-user/search-user-component.component';
+import { SearchUserFormComponent } from './components/shared/search-user/search-user-form/search-user-form.component';
+import {
+    DesktopTableComponent
+} from './components/stad-gent-components/atoms/table/desktop-table/desktop-table.component';
+import { MobileTableComponent } from './components/stad-gent-components/atoms/table/mobile-table/mobile-table.component';
+import { TableComponent } from './components/stad-gent-components/atoms/table/table.component';
+import { FooterComponent } from './components/stad-gent-components/footer/footer.component';
+import { DropdownComponent } from './components/stad-gent-components/header/dropdown/dropdown.component';
+import { HeaderComponent } from './components/stad-gent-components/header/header.component';
+import { AccordeonComponent } from './components/stad-gent-components/molecules/accordeon/accordeon.component';
+import { ModalComponent } from './components/stad-gent-components/molecules/modal/modal.component';
+import { TeaserComponent } from './components/stad-gent-components/molecules/teaser/teaser.component';
+import { EmptyComponent } from './components/status/empty/empty.component';
+import { LoadingComponent } from './components/status/loading/loading.component';
+import { NotFoundComponent } from './components/status/not-found/not-found.component';
+import { ImpersonateInterceptor } from './services/authentication/impersonate.interceptor';
+import { TokenInterceptor } from './services/authentication/token.interceptor';
+import { AuthorizationGuardService } from './services/guard/authorization/authorization-guard.service';
+import { HighlightComponent } from './components/stad-gent-components/molecules/highlight/highlight.component';
+import { ContactComponent } from './components/stad-gent-components/molecules/contact/contact.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -529,7 +531,9 @@ const routes: Routes = [
         NotFoundComponent,
         TeaserComponent,
         FaqManagementComponent,
-        CategoriesManagementComponent
+        CategoriesManagementComponent,
+        HighlightComponent,
+        ContactComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index 1a200ab95..ec37819b1 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -1,120 +1,53 @@
 <section class="messages messages--error" *ngIf="showStagingWarning">
-<div  markdown *ngIf="currentLanguage() | async as currlan"
-src="assets/md/staging-warning.{{currlan}}.md">>
-</div>
+    <div markdown *ngIf="currentLanguage() | async as currlan" src="assets/md/staging-warning.{{currlan}}.md">>
+    </div>
 </section>
 
 <div *ngIf="locations !== undefined && successOnRetrievingLocations === true">
-  <div *ngIf="locations.length > 0; else noLocations">
-    <!-- Provide a panel group for filter -->
-    <!-- <div class="panel-group">
-      <!-- Heading -->
-      <!-- <div class="panel-heading">
-        <h3 class="panel-title">
-          <a data-toggle="collapse" href="#filterBody" aria-expanded="true">
-            <i class="glyphicon glyphicon-plus"></i>
-            <i class="glyphicon glyphicon-minus"></i>
-            {{('dashboard.filter.title' | translate)}}
-          </a>
-        </h3>
-      </div>
-
-      Body
-      <div class="panel-collapse in" id="filterBody" *ngIf="tagObs | async as tags">
-        <div class="panel-body" style="padding: 20px">
-          <div class="row">
-            <div class="col-sm-3">
-              <mat-form-field *ngIf="tags !== undefined" style="width: 100%" [formGroup]="tagFilterFormGroup">
-                <mat-label>{{'dashboard.filter.tagsFilterTitle' | translate}}</mat-label>
-                <mat-select multiple formControlName="filteredTags" [compareWith]="compareTagsInSelection"
-                  (selectionChange)="onTagsSelectionChange($event)">
-                  <mat-option style="border: 0;" *ngFor="let tag of tags" [value]="tag">
-                    {{currentLang === 'nl' ? tag.dutch : tag.english}}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-
-            <div class="col-sm-3">
-              <mat-form-field *ngIf="tags !== undefined" style="width: 100%" [formGroup]="buildingFilterFormGroup">
-                <mat-label>{{'dashboard.filter.buildingsFilterTitle' | translate}}</mat-label>
-                <mat-select formControlName="filteredBuilding" (selectionChange)="onBuildingSelectionChange($event)">
-                  <mat-option style="border: 0;" *ngFor="let building of buildingObs | async" [value]="building">
-                    {{building.name}}
-                  </mat-option>
-                </mat-select>
-              </mat-form-field>
-            </div>
-
-            <div class="col-sm-2">
-              <div class="form-group">
-                <input [(ngModel)]="locationSearch" (keyup.enter)="onSearchEnter()" id="search" class="form-control"
-                  type="text" placeholder="{{'dashboard.filter.searchPlaceholder' | translate}}">
-              </div>
-            </div>
-
-            <div class="col-sm-1">
-              <button class="btn btn-primary" (click)="onSearchEnter()">
-                {{'general.buttons.search' | translate}}
-              </button>
-            </div>
-
-            <div class="col-sm-2">
-              <button class="btn btn-primary" (click)="toggleShowOpen()">
-                {{showOpen ? ('dashboard.filter.showAll' | translate) : ('dashboard.filter.showOpen' | translate)}}
-              </button>
-            </div>
-            <div class="col-sm-1">
-              <button class="btn btn-secondary" (click)="onClearSearch()">
-                {{'general.buttons.clear' | translate}}
-              </button>
-            </div>
-          </div>
+    <div *ngIf="locations.length > 0; else noLocations">
+        <div class="dashboard-item-container" fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start"
+            *ngIf="filteredLocations && filteredLocations.length > 0; else noMatchesFromFilter">
+            <app-dashboard-item fxFlex="0 1 calc(33% - 32px);" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%"
+                *ngFor="let location of filteredLocations" [location]="location"
+                [nextReservableFrom]="locationNextReservableFroms.get(location.name)">
+            </app-dashboard-item>
         </div>
-      </div>
-    </div>
-
-    <hr> -->
-
-
-    <div class="dashboard-item-container" fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start"
-      *ngIf="filteredLocations && filteredLocations.length > 0; else noMatchesFromFilter">
-      <app-dashboard-item fxFlex="0 1 calc(33% - 32px);" fxFlex.lt-md="0 1 calc(50% - 32px)" fxFlex.lt-sm="100%"
-        *ngFor="let location of filteredLocations" [location]="location"
-        [nextReservableFrom]="locationNextReservableFroms.get(location.name)">
-      </app-dashboard-item>
     </div>
-  </div>
 </div>
 
+<app-contact
+    title="Hellaur"
+    content="Lorem ipsum dolor sit amet, yappa yappa yappa yappa yappa.">
+</app-contact>
+
 <!-- Feedback to the user when the locations are loading/can't be retrieved -->
 <div class="container-fluid">
-  <div class="alert alert-info" *ngIf="successOnRetrievingLocations === null">
-    {{'general.waitingForServer' | translate}}
-  </div>
+    <div class="alert alert-info" *ngIf="successOnRetrievingLocations === null">
+        {{'general.waitingForServer' | translate}}
+    </div>
 
-  <div class="alert alert-error" *ngIf="successOnRetrievingLocations === false">
-    {{'dashboard.error' | translate}}
-  </div>
+    <div class="alert alert-error" *ngIf="successOnRetrievingLocations === false">
+        {{'dashboard.error' | translate}}
+    </div>
 </div>
 
 <ng-template #noMatchesFromFilter>
-  <div class="alert alert-warning">
-    {{'dashboard.filter.noMatchesFromFilter' | translate}}
-  </div>
+    <div class="alert alert-warning">
+        {{'dashboard.filter.noMatchesFromFilter' | translate}}
+    </div>
 </ng-template>
 
 <ng-template #noLocations>
-  <div class="alert alert-warning">
-    {{'dashboard.noLocations' | translate}}
-  </div>
+    <div class="alert alert-warning">
+        {{'dashboard.noLocations' | translate}}
+    </div>
 </ng-template>
 
 <!-- Label to remove warning, not set -->
 <label for="search"></label>
 
 <section class="highlight highlight--top banner">
-  <div class="highlight__inner" markdown *ngIf="currentLanguage() | async as currlan"
-    src="assets/md/banner.{{currlan}}.md">>
-  </div>
-</section>
+    <div class="highlight__inner" markdown *ngIf="currentLanguage() | async as currlan"
+        src="assets/md/banner.{{currlan}}.md">>
+    </div>
+</section>
\ No newline at end of file
diff --git a/frontend/src/app/components/faq/faq-search/faq-search.component.html b/frontend/src/app/components/faq/faq-search/faq-search.component.html
index 2515fe6b5..f453b10e3 100644
--- a/frontend/src/app/components/faq/faq-search/faq-search.component.html
+++ b/frontend/src/app/components/faq/faq-search/faq-search.component.html
@@ -27,10 +27,17 @@
             <p>{{ 'faq.search.noResults' | translate }}</p>
         </ng-container>
     </ng-container>
-    <h3 class="mb-4">{{ 'faq.search.popular' | translate }}</h3>
-    <ul class="icon-list mb-0" *ngIf="$pinned | async as pinned">
-        <li *ngFor="let item of pinned">
-            <i class="icon-arrow-right" aria-hidden="true"></i> <a [routerLink]="['/faq', item.id]">{{ item.title.translations[locale] }}</a>
-        </li>
-    </ul>
+    <h3 class="mb-4">
+        {{ 'faq.search.popular' | translate }}
+    </h3>
+    <ng-container *ngIf="$pinned | async as pinned">
+        <ul class="icon-list mb-0" *ngIf="pinned.length > 0">
+            <li *ngFor="let item of pinned">
+                <i class="icon-arrow-right" aria-hidden="true"></i> <a [routerLink]="['/faq', item.id]">{{ item.title.translations[locale] }}</a>
+            </li>
+        </ul>
+        <ng-container *ngIf="pinned.length === 0">
+            <p>{{ 'faq.search.noResults' | translate }}</p>
+        </ng-container>
+    </ng-container>
 </ng-container>
diff --git a/frontend/src/app/components/faq/faq.component.html b/frontend/src/app/components/faq/faq.component.html
index 4276c25fb..5a50e9694 100644
--- a/frontend/src/app/components/faq/faq.component.html
+++ b/frontend/src/app/components/faq/faq.component.html
@@ -19,28 +19,10 @@
                 </div>
 
                 <!-- Contact footer -->
-                <section class="highlight contact-details highlight--top">
-                    <div class="highlight__inner">
-                        <h2 class="my-0">
-                            {{ 'faq.contact.title' | translate }}
-                        </h2>
-
-                        <p class="my-4">
-                            {{ 'faq.contact.subtitle' | translate }}
-                        </p>
-
-                        <div class="contact-details-column">
-                            <ul class="icon-list mb-0">
-                                <li><i class="icon-marker" aria-hidden="true"></i><strong>De Therminal</strong> — Hoveniersberg 24, 9000 Gent</li>
-                                <li><i class="icon-envelope" aria-hidden="true"></i><a href="mailto:studieplekken@gentsestudentenraad.be" alt="Person mail link">studieplekken@gentsestudentenraad.be</a></li>
-                                <li><i class="icon-url" aria-hidden="true"></i><a href="https://bloklocaties.stad.gent" alt="Website link">https://bloklocaties.stad.gent</a></li>
-                            </ul>
-                        </div>
-
-                        <div class="contact-details-column"></div>
-
-                    </div>
-                </section>
+                 <app-contact
+                    [title]="'faq.contact.title' | translate"
+                    [content]="'faq.contact.subtitle' | translate">
+                 </app-contact>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/components/management/faq-management/faq-management.component.ts b/frontend/src/app/components/management/faq-management/faq-management.component.ts
index 642912648..c42547bdd 100644
--- a/frontend/src/app/components/management/faq-management/faq-management.component.ts
+++ b/frontend/src/app/components/management/faq-management/faq-management.component.ts
@@ -1,15 +1,15 @@
-import {Component, ViewChild} from '@angular/core';
-import {FaqService} from '@/services/api/faq/faq.service';
-import {BaseManagementComponent} from '@/components/management/base-management.component';
-import {FaqItem} from '@/model/FaqItem';
-import {ModalComponent} from '@/components/stad-gent-components/molecules/modal/modal.component';
-import {EMPTY, Observable} from 'rxjs';
-import {FaqCategory} from '@/model/FaqCategory';
-import {AbstractControl, FormBuilder, Validators} from '@angular/forms';
-import {TableMapper} from '@/model/Table';
-import {TranslateService} from '@ngx-translate/core';
+import { BaseManagementComponent } from '@/components/management/base-management.component';
+import { ModalComponent } from '@/components/stad-gent-components/molecules/modal/modal.component';
+import { FaqCategory } from '@/model/FaqCategory';
+import { FaqItem } from '@/model/FaqItem';
+import { TableMapper } from '@/model/Table';
+import { FaqService } from '@/services/api/faq/faq.service';
+import { Component, ViewChild } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-import {startWith, switchMap, tap} from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
 
 @Component({
     selector: 'app-faq-management',
diff --git a/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.html b/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.html
new file mode 100644
index 000000000..ae9906ec9
--- /dev/null
+++ b/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.html
@@ -0,0 +1,33 @@
+<section class="highlight contact-details  highlight--top">
+    <div class="highlight__inner">
+        <h2 class="my-0">
+            {{ title }}
+        </h2>
+
+        <p class="my-4 w-100">
+            {{ content }}
+        </p>
+
+        <div class="contact-details-column">
+            <ul class="icon-list">
+                <li>
+                    <i class="icon-marker" aria-hidden="true"></i>
+                    <strong>{{ contact.building }}</strong> — {{ contact.address }}
+                </li>
+                <li>
+                    <i class="icon-envelope" aria-hidden="true"></i>
+                    <a [href]="contact.email" alt="Person mail link">
+                        {{ contact.email }}
+                    </a>
+                </li>
+                <li>
+                    <i class="icon-url" aria-hidden="true"></i>
+                    <a [href]="contact.website" alt="Website link">
+                        {{ contact.website }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</section>
+
diff --git a/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.scss b/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.spec.ts b/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.spec.ts
new file mode 100644
index 000000000..85e48e027
--- /dev/null
+++ b/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactComponent } from './contact.component';
+
+describe('ContactComponent', () => {
+  let component: ContactComponent;
+  let fixture: ComponentFixture<ContactComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContactComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContactComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.ts b/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.ts
new file mode 100644
index 000000000..38993ea30
--- /dev/null
+++ b/frontend/src/app/components/stad-gent-components/molecules/contact/contact.component.ts
@@ -0,0 +1,28 @@
+import { contact } from '@/app.constants';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-contact',
+    templateUrl: './contact.component.html',
+    styleUrls: ['./contact.component.scss']
+})
+export class ContactComponent implements OnInit {
+    /* Component input attributes */
+    @Input() public title: string;
+    @Input() public content: string;
+
+    /* Component state */
+    public contact: any;
+
+    /**
+     * Constructor.
+     */
+    constructor() {
+        this.contact = contact;
+    }
+
+    ngOnInit(): void {
+        
+    }
+
+}
diff --git a/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.html b/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.html
new file mode 100644
index 000000000..0cba9a21b
--- /dev/null
+++ b/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.html
@@ -0,0 +1,11 @@
+<section class="highlight contact-details highlight--top">
+    <div class="highlight__inner">
+        <h2 class="my-0">
+            {{ title }}
+        </h2>
+
+        <p class="my-4">
+            {{ content }}
+        </p>
+    </div>
+</section>
\ No newline at end of file
diff --git a/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.scss b/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.spec.ts b/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.spec.ts
new file mode 100644
index 000000000..7685232a9
--- /dev/null
+++ b/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HighlightComponent } from './highlight.component';
+
+describe('HighlightComponent', () => {
+  let component: HighlightComponent;
+  let fixture: ComponentFixture<HighlightComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HighlightComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HighlightComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.ts b/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.ts
new file mode 100644
index 000000000..2da6875dc
--- /dev/null
+++ b/frontend/src/app/components/stad-gent-components/molecules/highlight/highlight.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-highlight',
+    templateUrl: './highlight.component.html',
+    styleUrls: ['./highlight.component.scss']
+})
+export class HighlightComponent implements OnInit {
+
+    /* Component input attributes */
+    @Input() public title: string;
+    @Input() public content: string;
+
+    ngOnInit(): void {
+        
+    }
+
+}