add about, landing-page (#3)

frontend/src/app/about/about.component.html

@@ -1,3 +1,19 @@
-<p>
-  about works!
-</p>
+<div class="lp-columns">
+  <div>
+    <img class="lp-image" width="600px" height="400px" src="../../assets/lp.jpg">
+  </div>
+  <div class="lp-description">
+    <p>
+      <b>WheelJourney</b> to innowacyjna aplikacja stworzona z myślą o osobach niepełnosprawnych poruszających się na
+      wózkach
+      inwalidzkich. Jej głównym celem jest zapewnienie użytkownikom informacji na temat jakości dróg i ścieżek,
+      którymi zamierzają podróżować, aby umożliwić im wybór najbardziej dostępnych i bezpiecznych tras.
+    </p>
+
+    <p class="lp-description">
+      To nie tylko narzędzie nawigacyjne, ale również platforma, która umożliwia wymianę
+      doświadczeń i współpracę między osobami poruszającymi się na wózkach inwalidzkich. Dzięki tej aplikacji podróże
+      stają się bezpieczniejsze, bardziej dostępne i komfortowe dla wszystkich użytkowników.
+    </p>
+  </div>
+</div>

frontend/src/app/about/about.component.scss

@@ -0,0 +1,22 @@
+@use '@angular/material' as mat;
+@import '../../custom-theme.scss';
+
+.lp-columns {
+  display: flex;
+  gap: 64px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column-reverse;
+  padding: 16px 32px;
+}
+
+.lp-image {
+  border-radius: 16px;
+  object-fit: cover;
+}
+
+.lp-description {
+  font: mat.get-theme-typography($m3-light-theme, headline-small, font);
+  line-height: 1.6;
+  text-align: center;
+}

frontend/src/app/about/about.component.ts

@@ -1,15 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css']
+  styleUrls: ['./about.component.scss'],
 })
-export class AboutComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
+export class AboutComponent {}

frontend/src/app/app.component.css

@@ -1,8 +1 @@
-.main {
-  background-color: #fff;
-  border-radius: 16px;
-  width: calc(100% - 32px);
-  min-height: 85vh;
-  box-sizing: border-box;
-  margin: 16px;
-}
+

frontend/src/app/app.component.html

@@ -1,5 +1 @@
-<app-nav>
-  <main class="main">
-    <router-outlet></router-outlet>
-  </main>
-</app-nav>
+<router-outlet></router-outlet>

frontend/src/app/app.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterOutlet } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { NavComponent } from './nav/nav.component';
 
 @Component({

frontend/src/app/app.routes.ts

@@ -1,20 +1,45 @@
 import { Routes } from '@angular/router';
 import { MapComponent } from './map/map.component';
 import { AboutComponent } from './about/about.component';
+import { HomeComponent } from './home/home.component';
+import { NavComponent } from './nav/nav.component';
+import { DangerousPlacesComponent } from './dangerous-places/dangerous-places.component';
 
 export const routes: Routes = [
   {
-    path: 'map',
-    component: MapComponent,
+    path: '',
     pathMatch: 'full',
-    title: 'Mapa',
-    data: {
-      title: 'Mapa',
-    },
+    title: 'WheelJourney',
+    component: HomeComponent,
   },
   {
     path: '',
-    pathMatch: 'full',
-    component: AboutComponent,
+    component: NavComponent,
+    children: [
+      {
+        component: MapComponent,
+        path: 'map',
+        title: 'WheelJourney - mapa',
+        data: {
+          title: 'Mapa',
+        },
+      },
+      {
+        component: AboutComponent,
+        path: 'about',
+        title: 'WheelJourney - about',
+        data: {
+          title: 'Informacje',
+        },
+      },
+      {
+        component: DangerousPlacesComponent,
+        path: 'dangerous-places',
+        title: 'WheelJourney - niebezpieczne miejsca',
+        data: {
+          title: 'Niebezpiecznie miejsca',
+        },
+      },
+    ],
   },
 ];

frontend/src/app/dangerous-places/dangerous-places.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dangerous-places',
+  templateUrl: './dangerous-places.component.html',
+  styleUrls: ['./dangerous-places.component.scss'],
+})
+export class DangerousPlacesComponent {}

frontend/src/app/home/home.component.html

@@ -0,0 +1,25 @@
+<div class="lp">
+  <img width="160px" height="160px" class="lp-logo" src="../../assets/logo.png">
+  <h1 class="lp-title">WheelJourney</h1>
+  <p class="lp-subtitle">
+    Empowering Barrier-Free Exploration
+  </p>
+  <a mat-raised-button [routerLink]="['/map']">Zacznij korzystać!</a>
+  <div class="lp-columns">
+    <div>
+      <img class="lp-image" width="600px" height="400px" src="../../assets/lp.jpg">
+    </div>
+    <div class="lp-description">
+      <p>
+        WheelJourney to innowacyjna aplikacja stworzona z myślą o osobach niepełnosprawnych poruszających się na wózkach
+        inwalidzkich. Jej głównym celem jest zapewnienie użytkownikom informacji na temat jakości dróg i ścieżek,
+        którymi zamierzają podróżować, aby umożliwić im wybór najbardziej dostępnych i bezpiecznych tras.
+      </p>
+    </div>
+  </div>
+  <p class="lp-description lp-description-center">
+    WheelJourney to nie tylko narzędzie nawigacyjne, ale również platforma, która umożliwia wymianę
+    doświadczeń i współpracę między osobami poruszającymi się na wózkach inwalidzkich. Dzięki tej aplikacji podróże
+    stają się bezpieczniejsze, bardziej dostępne i komfortowe dla wszystkich użytkowników.
+  </p>
+</div>

frontend/src/app/home/home.component.scss

@@ -0,0 +1,63 @@
+@use '@angular/material' as mat;
+@import '../../custom-theme.scss';
+
+.lp {
+  width: 100%;
+  background-color: #dae2f9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 24px 12px;
+  box-sizing: border-box;
+}
+
+.lp-logo {
+  width: 160px;
+  height: 160px;
+  object-fit: contain;
+}
+
+.lp-title {
+  font: mat.get-theme-typography($m3-light-theme, display-large, font);
+  margin-bottom: 32px;
+}
+
+.lp-subtitle {
+  font: mat.get-theme-typography($m3-light-theme, headline-medium, font);
+  margin-top: 0;
+}
+
+.lp-columns {
+  display: flex;
+  gap: 64px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  max-width: 1300px;
+  margin-top: 64px;
+
+  @media (min-width: 1576px) {
+    flex-direction: row;
+  }
+}
+
+.lp-image {
+  border-radius: 16px;
+  object-fit: cover;
+}
+
+.lp-description {
+  font: mat.get-theme-typography($m3-light-theme, headline-small, font);
+  line-height: 1.6;
+  max-width: 1300px;
+  text-align: center;
+
+  @media (min-width: 1576px) {
+    text-align: left;
+  }
+}
+
+.lp-description-center {
+  text-align: center;
+}

frontend/src/app/home/home.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+  imports: [MatButtonModule, RouterModule],
+})
+export class HomeComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit() {}
+}

frontend/src/app/nav/nav.component.html

@@ -1,20 +1,22 @@
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
     [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
-    <mat-toolbar class="toolbar">
+    <mat-toolbar class="toolbar sidenav-toolbar">
       <img class="app-logo" src="../../assets/logo.png">
       <h1 class="app-title">WheelJourney</h1>
     </mat-toolbar>
     <mat-nav-list>
+      <p class="navigation-label">Nawigacja</p>
       <a mat-list-item [routerLink]="['/map']" routerLinkActive="router-link-active" [routerLinkActiveOptions]="{exact:
       true}">
         <mat-icon class="material-icons-outlined" aria-hidden="false" fontIcon="map"></mat-icon>
         Mapa</a>
-      <a mat-list-item [routerLink]="['/']" routerLinkActive="router-link-active" [routerLinkActiveOptions]="{exact:
+      <a mat-list-item [routerLink]="['/dangerous-places']" routerLinkActive="router-link-active"
+        [routerLinkActiveOptions]="{exact:
       true}">
         <mat-icon class="material-icons-outlined" aria-hidden="false" fontIcon="dangerous"></mat-icon>
         Niebezpieczne miejsca</a>
-      <a mat-list-item [routerLink]="['/']" routerLinkActive="router-link-active" [routerLinkActiveOptions]="{exact:
+      <a mat-list-item [routerLink]="['/about']" routerLinkActive="router-link-active" [routerLinkActiveOptions]="{exact:
       true}">
         <mat-icon class="material-icons-outlined" aria-hidden="false" fontIcon="info"></mat-icon>
         Infomacje</a>
@@ -24,11 +26,13 @@ <h1 class="app-title">WheelJourney</h1>
     <mat-toolbar class="toolbar">
       @if (isHandset$ | async) {
       <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        <mat-icon class="material-icons-outlined" aria-label="Side nav toggle icon" fontIcon="menu"></mat-icon>
       </button>
       }
       {{title()}}
     </mat-toolbar>
-    <ng-content></ng-content>
+    <main class="main">
+      <router-outlet></router-outlet>
+    </main>
   </mat-sidenav-content>
 </mat-sidenav-container>

frontend/src/app/nav/nav.component.scss

@@ -8,10 +8,14 @@
 
 .sidenav {
   width: 360px;
-  padding: 0 12px;
+  padding: 16px;
   background-color: #f0f1f9;
 }
 
+.sidenav-toolbar {
+  margin-bottom: 32px;
+}
+
 .content-sidenav {
   background-color: #f0f1f9;
 }
@@ -27,13 +31,32 @@
 }
 
 .app-logo {
-  width: 64px;
-  height: 64px;
+  width: 48px;
+  height: 48px;
   object-fit: contain;
   margin-right: 32px;
+
+  @media (min-width: 768px) {
+    width: 64px;
+    height: 64px;
+  }
 }
 
 .app-title {
   font: mat.get-theme-typography($m3-light-theme, headline-small, font);
   color: mat.get-theme-color($m3-light-theme, on-secondary-container);
+}
+
+.navigation-label {
+  padding: 8px 16px;
+  font: mat.get-theme-typography($m3-light-theme, label-large, font);
+}
+
+.main {
+  background-color: #fff;
+  border-radius: 16px;
+  width: calc(100% - 32px);
+  min-height: 85vh;
+  box-sizing: border-box;
+  margin: 0 16px 16px;
 }

frontend/src/app/nav/nav.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { AsyncPipe } from '@angular/common';
@@ -15,7 +15,6 @@ import {
   NavigationEnd,
   Router,
   RouterModule,
-  TitleStrategy,
 } from '@angular/router';
 
 @Component({
@@ -36,7 +35,6 @@ import {
 })
 export class NavComponent {
   private breakpointObserver = inject(BreakpointObserver);
-  private titleStrategy = inject(TitleStrategy);
   public route = inject(ActivatedRoute);
   public router = inject(Router);
   public title = toSignal(