feat: add about page

app/src/app/app-routing.module.ts

@@ -12,6 +12,11 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/home/home.module').then((m) => m.HomePageModule),
   },
+  {
+    path: 'about',
+    loadChildren: () =>
+      import('./pages/about/about.module').then((m) => m.AboutPageModule),
+  },
   {
     path: 'reservations',
     loadChildren: () =>
@@ -67,6 +72,10 @@ const routes: Routes = [
         (m) => m.ForbiddenPageModule,
       ),
   },
+  {
+    path: 'about',
+    loadChildren: () => import('./pages/about/about.module').then(m => m.AboutPageModule)
+  },
 ];
 
 @NgModule({

app/src/app/pages/about/about-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AboutPage } from './about.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AboutPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AboutPageRoutingModule {}

app/src/app/pages/about/about.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AboutPageRoutingModule } from './about-routing.module';
+
+import { AboutPage } from './about.page';
+import {TranslateModule} from "@ngx-translate/core";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AboutPageRoutingModule,
+    TranslateModule
+  ],
+  declarations: [AboutPage]
+})
+export class AboutPageModule {}

app/src/app/pages/about/about.page.html

@@ -0,0 +1,37 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>{{'ABOUT.HEADER' | translate }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true" class="ion-padding">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">about</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>
+        {{'ABOUT.CARDHEADER1' | translate}}
+      </ion-card-title>
+      <ion-card-content>
+          {{'ABOUT.BODY' | translate}}
+      </ion-card-content>
+      <ion-card-title>
+        {{'ABOUT.CARDHEADER2' | translate}}
+      </ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      {{'ABOUT.BODY2' | translate}}
+      <ion-button class="custom-button" expand="full" color="primary" href="https://github.com/RefuAPP/">
+        {{'ABOUT.LEARNMORE' | translate}}
+        <ion-icon slot="end" name="logo-github"></ion-icon>
+      </ion-button>
+    </ion-card-content>
+    <ion-img src="assets/img/aboutus-cartoon.jpg"></ion-img>
+  </ion-card>
+</ion-content>

app/src/app/pages/about/about.page.scss

@@ -0,0 +1,36 @@
+ion-content {
+  --background: var(--ion-background-color);
+}
+
+ion-card {
+  margin: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  transition: all 0.3s ease-in-out;
+}
+
+ion-card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+ion-card-content {
+  font-size: 18px;
+  padding: 20px;
+}
+
+ion-img {
+  height: 100%;
+  padding: 5%;
+  border-radius: 50px;
+  object-fit: cover;
+}
+
+.custom-button {
+  margin-top: 40px;
+  white-space: normal;
+  transition: all 0.3s ease-in-out;
+}
+
+.custom-button:hover {
+  transform: scale(1.02);
+}

app/src/app/pages/about/about.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AboutPage } from './about.page';
+
+describe('AboutPage', () => {
+  let component: AboutPage;
+  let fixture: ComponentFixture<AboutPage>;
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(AboutPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

app/src/app/pages/about/about.page.ts

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

app/src/app/state/auth/auth.selectors.ts

@@ -42,6 +42,13 @@ export const getTopItems = createSelector(isAuthenticated, (auth) => {
 });
 
 export const getBottomItems = createSelector(isAuthenticated, (auth) => {
+  const baseItems = [
+    {
+      titleTranslateKey: 'MENU.ABOUT',
+      url: '/about',
+      icon: 'information-circle',
+    },
+  ] as MenuItem[];
   if (auth)
     return [
       {
@@ -54,12 +61,12 @@ export const getBottomItems = createSelector(isAuthenticated, (auth) => {
         url: '/logout',
         icon: 'log-out',
       },
-    ] as MenuItem[];
+    ].concat(baseItems) as MenuItem[];
   return [
     {
       titleTranslateKey: 'MENU.LOGIN',
       url: '/login',
       icon: 'log-in',
     },
-  ] as MenuItem[];
+  ].concat(baseItems) as MenuItem[];
 });

app/src/assets/i18n/ca.json

@@ -142,6 +142,14 @@
     "EMERGENCY_PHONE_NUMBER": "Número d'emergència: {{emergencyPhoneNumber}}",
     "SETTINGS": "Configuració"
   },
+  "ABOUT": {
+    "HEADER": "Sobre nosaltres",
+    "CARDHEADER1": "Qui som",
+    "CARDHEADER2": "Sobre RefuApp",
+    "BODY": "Som Ferran, Oriol, Pablo i Alex, estudiants de postgrau en Ciències de la Computació a la Universitat de Lleida (UdL). Units per la nostra passió per la tecnologia i les activitats a l'aire lliure, hem creat RefuAPP - una aplicació innovadora destinada a millorar l'experiència d'aventura a l'aire lliure als Pirineus.",
+    "BODY2": "RefuApp és més que un simple mapa; és el teu guia digital per recórrer els Pirineus. L'aplicació ofereix una visió completa de la regió, incloent les ubicacions dels refugis. Amb un simple toc, pots conèixer les instal·lacions, capacitats i més de cada refugi. El nostre sistema de reserva distintiu permet als usuaris \"reservar\" virtualment un lloc per a la nit, afegint a la comprensió col·lectiva de la capacitat del refugi. En algunes ubicacions, hem integrat tecnologia avançada com ara sensors infrarojos i càmeres tèrmiques per rastrejar la capacitat del refugi en temps real, oferint-te la informació més precisa i actual.",
+    "LEARNMORE": "Sabies que RefuApp és de codi obert? Fes click per veure més!"
+  },
   "SETTINGS": {
     "LANGUAGE": "Idioma",
     "FORCE_LANGUAGE": "Forçar idioma",
@@ -157,6 +165,7 @@
     "RESERVATIONS": "Reserves",
     "PROFILE": "Perfil",
     "LOGOUT": "Tancar sessió",
+    "ABOUT": "Sobre nosaltres",
     "LOGIN": "Iniciar sessió"
   },
   "MINOR_ERRORS": {

app/src/assets/i18n/en.json

@@ -142,6 +142,14 @@
     "EMERGENCY_PHONE_NUMBER": "Emergency Phone Number: {{emergencyPhoneNumber}}",
     "SETTINGS": "Settings"
   },
+  "ABOUT": {
+    "HEADER": "About us",
+    "CARDHEADER1": "Who we are",
+    "CARDHEADER2": "About RefuApp",
+    "BODY": "We are Ferran, Oriol, Pablo, and Alex, postgraduate students in Computer Science at the University of Lleida (UdL). United by our love for technology and outdoor activities, we have created RefuAPP - a groundbreaking application intended to improve the outdoor adventure experience in the Pyrenees.",
+    "BODY2": "RefuApp is more than merely a map; it's your digital guide for traversing the Pyrenees. The app offers a comprehensive view of the region, including the locations of shelters. With a simple touch, you can learn about each shelter's facilities, capacities, and more. Our distinctive reservation system lets users virtually \"book\" a spot for the night, adding to the collective understanding of the shelter's capacity. At certain locations, we've integrated advanced technology such as infrared sensors and thermal cameras to track the shelter's capacity in real time, giving you the most precise and current information.",
+    "LEARNMORE": "Did you know that RefuApp is open source? Click to learn more!"
+  },
   "SETTINGS": {
     "LANGUAGE": "Language",
     "FORCE_LANGUAGE": "Force Language",
@@ -156,6 +164,7 @@
     "HOME": "Home",
     "RESERVATIONS": "Reservations",
     "PROFILE": "Profile",
+    "ABOUT": "About us",
     "LOGOUT": "LogOut",
     "LOGIN": "LogIn"
   },

app/src/assets/i18n/es.json

@@ -142,6 +142,14 @@
     "EMERGENCY_PHONE_NUMBER": "Número de emergencia: {{emergencyPhoneNumber}}",
     "SETTINGS": "Configuración"
   },
+  "ABOUT": {
+    "HEADER": "Sobre nosotros",
+    "CARDHEADER1": "Quiénes somos",
+    "CARDHEADER2": "Sobre RefuApp",
+    "BODY": "Somos Ferran, Oriol, Pablo y Alex, estudiantes de postgrado en Ciencias de la Computación en la Universidad de Lleida (UdL). Unidos por nuestro amor por la tecnología y las actividades al aire libre, hemos creado RefuAPP - una aplicación innovadora destinada a mejorar la experiencia de aventura al aire libre en los Pirineos.",
+    "BODY2": "RefuApp es más que un simple mapa; es tu guía digital para recorrer los Pirineos. La aplicación ofrece una visión completa de la región, incluyendo las ubicaciones de los refugios. Con un simple toque, puedes conocer las instalaciones, capacidades y más de cada refugio. Nuestro sistema de reserva distintivo permite a los usuarios \"reservar\" virtualmente un lugar para pasar la noche, contribuyendo al conocimiento colectivo de la capacidad del refugio. En algunas ubicaciones, hemos integrado tecnología avanzada como sensores infrarrojos y cámaras térmicas para rastrear la capacidad del refugio en tiempo real, ofreciéndote la información más precisa y actualizada.",
+    "LEARNMORE": "¿Sabías que RefuApp es de código abierto? Haz click para ver más!"
+  },
   "SETTINGS": {
     "LANGUAGE": "Idioma",
     "FORCE_LANGUAGE": "Forzar idioma",
@@ -157,6 +165,7 @@
     "RESERVATIONS": "Reservas",
     "PROFILE": "Perfil",
     "LOGOUT": "Cerrar sesión",
+    "ABOUT": "Sobre nosotros",
     "LOGIN": "Iniciar sesión"
   },
   "MINOR_ERRORS": {