Layout

eslint.config.js

@@ -31,7 +31,6 @@ module.exports = tseslint.config(
       ...angular.configs.tsRecommended,
       eslintPluginPrettierRecommended,
     ],
-
     // Set the custom processor which will allow us to have our inline Component templates extracted
     // and treated as if they are HTML files (and therefore have the .html config below applied to them)
     processor: angular.processInlineTemplates,
@@ -59,6 +58,7 @@ module.exports = tseslint.config(
           allow: ['warn', 'error'],
         },
       ],
+      '@typescript-eslint/no-extraneous-class': 'warn',
     },
   },
   {

src/app/app.component.scss

@@ -0,0 +1,19 @@
+.background {
+  background-image: url('../../public/background.svg');
+  background-repeat: no-repeat;
+  z-index: -1;
+  position: absolute;
+  height: 50vh;
+  width: 100%;
+  background-position: 33%;
+  background-size: 150%;
+  image-rendering: pixelated;
+}
+.glass {
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  min-height: 100vh;
+  backdrop-filter: blur(40px) saturate(140%);
+  background-color: rgba(0, 100, 42, 0.1);
+}

src/app/app.component.ts

@@ -4,7 +4,7 @@ import { RouterOutlet } from '@angular/router';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, AppComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

src/app/app.routes.ts

@@ -1,3 +1,27 @@
 import { Routes } from '@angular/router';
+import { AuthPageComponent } from './pages/auth-page/auth-page.component';
+import { LandingPageComponent } from './pages/landing-page/landing-page.component';
+import { FaqPageComponent } from './pages/faq-page/faq-page.component';
+import { AssoPageComponent } from './pages/asso-page/asso-page.component';
+import { TransparencyPageComponent } from './pages/transparency-page/transparency-page.component';
+import { UserPageComponent } from './pages/user-page/user-page.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: 'auth',
+    component: AuthPageComponent,
+    /*children: [
+      { path: 'login', loadComponent: () => import('./pages/auth-page/login.component').then(m => m.LoginComponent) },
+      {
+        path: 'register',
+        loadComponent: () => import('./pages/auth-page/register.component').then(m => m.RegisterComponent),
+      },
+    ],*/
+  },
+  { path: 'home', component: LandingPageComponent },
+  { path: 'faq', component: FaqPageComponent },
+  { path: 'asso', component: AssoPageComponent },
+  { path: 'transparency', component: TransparencyPageComponent },
+  { path: 'profile', component: UserPageComponent },
+  { path: '**', redirectTo: 'home' },
+];

src/app/pages/asso-page/asso-page.component.html

@@ -0,0 +1 @@
+<p>asso-page works!</p>

src/app/pages/asso-page/asso-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AssoPageComponent } from './asso-page.component';
+
+describe('AssoPageComponent', () => {
+  let component: AssoPageComponent;
+  let fixture: ComponentFixture<AssoPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AssoPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AssoPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/asso-page/asso-page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-asso-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './asso-page.component.html',
+  styleUrl: './asso-page.component.scss',
+})
+export class AssoPageComponent {}

src/app/pages/auth-page/auth-page.component.html

@@ -0,0 +1,2 @@
+<p>auth-page works!</p>
+<router-outlet></router-outlet>

src/app/pages/auth-page/auth-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthPageComponent } from './auth-page.component';
+
+describe('AuthPageComponent', () => {
+  let component: AuthPageComponent;
+  let fixture: ComponentFixture<AuthPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AuthPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/auth-page/auth-page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-auth-page',
+  standalone: true,
+  imports: [RouterOutlet],
+  templateUrl: './auth-page.component.html',
+  styleUrl: './auth-page.component.scss',
+})
+export class AuthPageComponent {}

src/app/pages/faq-page/faq-page.component.html

@@ -0,0 +1 @@
+<p>faq-page works!</p>

src/app/pages/faq-page/faq-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FaqPageComponent } from './faq-page.component';
+
+describe('FaqPageComponent', () => {
+  let component: FaqPageComponent;
+  let fixture: ComponentFixture<FaqPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FaqPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FaqPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/faq-page/faq-page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-faq-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './faq-page.component.html',
+  styleUrl: './faq-page.component.scss',
+})
+export class FaqPageComponent {}

src/app/pages/landing-page/landing-page.component.html

@@ -0,0 +1 @@
+<p>landing-page works!</p>

src/app/pages/landing-page/landing-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingPageComponent } from './landing-page.component';
+
+describe('LandingPageComponent', () => {
+  let component: LandingPageComponent;
+  let fixture: ComponentFixture<LandingPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LandingPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LandingPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/landing-page/landing-page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-landing-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './landing-page.component.html',
+  styleUrl: './landing-page.component.scss',
+})
+export class LandingPageComponent {}

src/app/pages/transparency-page/transparency-page.component.html

@@ -0,0 +1 @@
+<p>transparency-page works!</p>

src/app/pages/transparency-page/transparency-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransparencyPageComponent } from './transparency-page.component';
+
+describe('TransparencyPageComponent', () => {
+  let component: TransparencyPageComponent;
+  let fixture: ComponentFixture<TransparencyPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransparencyPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TransparencyPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/transparency-page/transparency-page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-transparency-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './transparency-page.component.html',
+  styleUrl: './transparency-page.component.scss',
+})
+export class TransparencyPageComponent {}

src/app/pages/user-page/user-page.component.html

@@ -0,0 +1 @@
+<p>user-page works!</p>

src/app/pages/user-page/user-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserPageComponent } from './user-page.component';
+
+describe('UserPageComponent', () => {
+  let component: UserPageComponent;
+  let fixture: ComponentFixture<UserPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/user-page/user-page.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-page',
+  standalone: true,
+  imports: [],
+  templateUrl: './user-page.component.html',
+  styleUrl: './user-page.component.scss',
+})
+export class UserPageComponent {}

src/index.html

@@ -8,6 +8,6 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
-    <app-root></app-root>
+      <app-root></app-root>
   </body>
 </html>

src/styles.scss

@@ -1 +1,13 @@
 /* You can add global styles to this file, and also import other style files */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  min-height: 100vh;
+  background-color: #fbe6e6;
+}
+app-root {
+  min-height: 100vh;
+}