[frontend] Fix hood page

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

@@ -1,7 +1,3 @@
-a {
-  text-decoration: none;
-}
-
 .title {
   text-align: left;
   padding-top: 10%;

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

@@ -1,5 +1,8 @@
-<h1>
+<div class="container">
-  {{ hood.name }}
+  <h1 class="heading">Hood - {{ hood.name }}</h1>
-</h1>
+  <div>
+    <markdown class="markdown" [data]="hood.landingpage"></markdown>
+  </div>
 
-<markdown class="markdown" [data]="hood.landingpage"></markdown>
+  <app-platforms-info-page [hoodId]="hoodId"></app-platforms-info-page>
+</div>

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

@@ -0,0 +1,17 @@
+.container {
+  display: grid;
+  margin-left: 15%;
+  margin-right: 15%;
+  margin-top: 5%;
+  margin-bottom: 5%;
+  gap: 30px;
+}
+
+.heading {
+  font-size: 2.3125rem;
+  margin-bottom: 20px;
+}
+
+.markdown {
+  margin-bottom: 50px;
+}

kibicara-frontend/src/app/hoodpage/hoodpage.component.ts

@@ -9,6 +9,7 @@ import { first } from 'rxjs/operators';
   styleUrls: ['./hoodpage.component.scss'],
 })
 export class HoodpageComponent implements OnInit {
+  hoodId;
   hood: BodyHood;
 
   constructor(
@@ -18,10 +19,10 @@ export class HoodpageComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    const hoodId = this.route.snapshot.params['id'];
+    this.hoodId = this.route.snapshot.params['id'];
-    if (hoodId) {
+    if (this.hoodId) {
       this.hoodsService
-        .getHood(hoodId)
+        .getHood(this.hoodId)
         .pipe(first())
         .subscribe((data) => {
           this.hood = data;

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

@@ -1,7 +1,3 @@
-a {
-  text-decoration: none;
-}
-
 .searchbar {
   margin-top: 30px;
   width: 100%;