Added in components and made changes to home

frontend/peakvisor/src/app/home/feature/home.page.html

@@ -1,38 +1,7 @@
-<div class="w-full h-full bg-primary flex flex-column align-items-center flex-1 ">
-    <div class="max-h-4rem absolute z-4 right-0 w-full">
-        <app-navbar [dlmodeOnly]="false"/>
-    </div>
-    <div style="background-color: transparent;" class="top-0 absolute w-full h-full align-items-center z-2 justify-content-evenly vertical-align-middle flex flex-column">
-        <div class="w-7">
-            <h1 class="text-color text-8xl text-center heading">Your next adventure with nature awaits</h1>
-        </div>
-        <div class="flex flex-column justify-content-center">
-            <h3>Scroll Down</h3>
-            <ng-lottie #lottie [options]="options" (configReady)="togglePlay"></ng-lottie>
-        </div>
-    </div>
-    <div class="relative z-0 bg-primary">
-        <app-video src="assets/landingpagevideo.mov"/>
-    </div>
-    <div class="w-full">
-    <div class="bg-primary flex justify-content-center p-5 h-full flex-column align-items-center">
-        <h1 class="m-0 heading text-6xl">About PeakVisor</h1>
-        <p class="w-4 text-center">
-            PeakVisor is a platform that helps you find nature trails and parks to visit in Singapore. It lets you keep a record of all the trails that you’ve been to so you can easily find your next adventure!
-        </p>
-    </div>
-    <div class="bg-green-900 flex justify-content-center p-5 h-full flex-column align-items-center">
-        <h1 class="m-0 heading text-6xl">Statistics</h1>
-        <p class="w-4 text-center">
-            PeakVisor is a platform that helps you find nature trails and parks to visit in Singapore. It lets you keep a record of all the trails that you’ve been to so you can easily find your next adventure!
-        </p>
-        <app-statsboard/>
-    </div>
-    <div class="bg-primary flex justify-content-center p-5 h-full flex-column align-items-center">
-        <h1 class="m-0 heading text-6xl">Explore the trails</h1>
-        <p class="w-4 text-center">
-            PeakVisor is a platform that helps you find nature trails and parks to visit in Singapore. It lets you keep a record of all the trails that you’ve been to so you can easily find your next adventure!
-        </p>
-    </div>
-</div>
-</div>
+<app-navbar></app-navbar>
+<app-hero-section></app-hero-section>
+<app-video-background [src]="'assets/landingpagevideo.mov'"></app-video-background>
+<app-about-section></app-about-section>
+<app-stats-board></app-stats-board>
+<app-trails-section></app-trails-section>
+<app-footer></app-footer>

frontend/peakvisor/src/app/home/feature/home.page.spec.ts

@@ -1,24 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HomepageComponent } from './home.page';
-import { PhotodivComponent } from '../../components/photodiv/photodiv.component';
+import { HomePage } from './home.page';
 
 describe('HomepageComponent', () => {
-  let component: HomepageComponent;
-  let fixture: ComponentFixture<HomepageComponent>;
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HomepageComponent, PhotodivComponent]
-    })
-    .compileComponents();
+      declarations: [HomePage] 
+    }).compileComponents();
 
-    fixture = TestBed.createComponent(HomepageComponent);
+    fixture = TestBed.createComponent(HomePage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-});
+});

frontend/peakvisor/src/app/home/feature/home.page.ts

@@ -1,54 +1,11 @@
-import { AfterContentInit, Component, ViewChild } from '@angular/core';
-import { PhotodivComponent } from '../../components/photodiv/photodiv.component';
-import { NavbarComponent } from '../../components/navbar/navbar.component';
-import { VideoComponent } from '../../components/video/video.component';
-import { SvgComponent } from '../../components/svg/svg.component';
-import { StatsboardComponent } from '../../components/statsboard/statsboard.component';
-import { AnimationLoader, AnimationOptions, LottieComponent, provideLottieOptions } from 'ngx-lottie';
-import { AnimationItem } from 'lottie-web';
-import { AppComponent } from '../../app.component';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { animate, glide, spring, stagger } from "motion"
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
-  selector: 'app-homepage',
-  standalone: true,
-  imports: [PhotodivComponent, NavbarComponent,VideoComponent,SvgComponent,StatsboardComponent,LottieComponent],
-  providers:[provideLottieOptions({
-    player: () => import(/* webpackChunkName: 'lottie-web' */ 'lottie-web'),
-  }),AnimationLoader],
-  templateUrl: './homepage.component.html',
-  styleUrl: './homepage.component.css'
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-
-
-
-export class HomepageComponent implements AfterContentInit{
-  @ViewChild('lottie',{ static: true }) lf: any;
-
-  ngAfterContentInit(){
-    animate(
-      "h1",
-      { y: [-50,0],
-        opacity:[0,1]
-      },
-      {
-        delay: stagger(0.1),
-        duration: 0.5,
-        easing: spring({stiffness: 50,damping: 200})
-      }
-    )
-  }
-
-  togglePlay(e:any){
-    console.log(e)
-  }
-  options: AnimationOptions = {
-    path: '/assets/svg/scrolldown.json',
-    loop: true,
-    autoplay:true,
-  };
-
-
-}
-
+export class HomePage {
+  constructor() {}
+}

frontend/peakvisor/src/app/home/ui/about/about.component.html

@@ -0,0 +1,7 @@
+<div class="w-full">
+    <div class="bg-primary flex justify-content-center p-5 h-full flex-column align-items-center">
+        <h1 class="m-0 heading text-6xl">About PeakVisor</h1>
+        <p class="w-4 text-center">
+            PeakVisor is a platform that helps you find nature trails and parks to visit in Singapore. It lets you keep a record of all the trails that you’ve been to so you can easily find your next adventure!
+        </p>
+    </div>

frontend/peakvisor/src/app/home/ui/about/about.component.ts

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

frontend/peakvisor/src/app/home/ui/hero/hero.component.html

@@ -0,0 +1,9 @@
+<div style="background-color: transparent;" class="top-0 absolute w-full h-full align-items-center z-2 justify-content-evenly vertical-align-middle flex flex-column">
+    <div class="w-7">
+        <h1 class="text-color text-8xl text-center heading">Your next adventure with nature awaits</h1>
+    </div>
+    <div class="flex flex-column justify-content-center">
+        <h3>Scroll Down</h3>
+        <ng-lottie #lottie [options]="options" (configReady)="togglePlay"></ng-lottie>
+    </div>
+</div>

frontend/peakvisor/src/app/home/ui/hero/hero.component.ts

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

frontend/peakvisor/src/app/home/ui/stats-board/stats-board.component.html

@@ -0,0 +1,7 @@
+<div class="bg-green-900 flex justify-content-center p-5 h-full flex-column align-items-center">
+    <h1 class="m-0 heading text-6xl">Statistics</h1>
+    <p class="w-4 text-center">
+        PeakVisor is a platform that helps you find nature trails and parks to visit in Singapore. It lets you keep a record of all the trails that you’ve been to so you can easily find your next adventure!
+    </p>
+    <app-statsboard/>
+</div>

frontend/peakvisor/src/app/home/ui/stats-board/stats-board.component.ts

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

frontend/peakvisor/src/app/home/ui/trails/trails.component.html

@@ -0,0 +1,6 @@
+<div class="bg-primary flex justify-content-center p-5 h-full flex-column align-items-center">
+    <h1 class="m-0 heading text-6xl">Explore the trails</h1>
+    <p class="w-4 text-center">
+        PeakVisor is a platform that helps you find nature trails and parks to visit in Singapore. It lets you keep a record of all the trails that you’ve been to so you can easily find your next adventure!
+    </p>
+</div>

frontend/peakvisor/src/app/home/ui/trails/trails.component.ts

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

frontend/peakvisor/src/app/home/ui/video-background/video-background.component.html

@@ -0,0 +1,3 @@
+<div class="relative z-0 bg-primary">
+    <app-video src="assets/landingpagevideo.mov"/>
+</div>

frontend/peakvisor/src/app/home/ui/video-background/video-background.component.ts

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

frontend/peakvisor/src/app/shared/ui/button/button.component.html

@@ -0,0 +1 @@
+<p-button size="large" [text]="text"  [style]="{'width':'100%'}" [class]="class" [routerLink]="routerLink.length>0?routerLink:null" [label]="label" [severity]="severity"></p-button>

frontend/peakvisor/src/app/shared/ui/button/button.component.spec.ts

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

frontend/peakvisor/src/app/shared/ui/button/button.component.ts

@@ -0,0 +1,18 @@
+import { Component,Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ButtonModule } from 'primeng/button';
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [ButtonModule, RouterModule],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css'
+})
+
+export class ButtonComponent {
+  @Input() class:string='';
+  @Input() routerLink:string = '';
+  @Input() label:string = '';
+  @Input() severity:string = '';
+  @Input() text:boolean = false;
+}

frontend/peakvisor/src/app/shared/ui/header/header.component.spec.ts

@@ -1,18 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Header } from './header.component';
 
-import { NavbarComponent } from './header.component';
-
-describe('NavbarComponent', () => {
-  let component: NavbarComponent;
-  let fixture: ComponentFixture<NavbarComponent>;
+describe('Header', () => {
+  let component: Header;
+  let fixture: ComponentFixture<Header>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [NavbarComponent]
+      imports: [Header]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(NavbarComponent);
+    fixture = TestBed.createComponent(Header);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

frontend/peakvisor/src/app/shared/ui/header/header.component.ts

@@ -1,27 +1,8 @@
-import { Component, Input } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { SvgComponent } from '../svg/svg.component';
-import { ButtonComponent} from '../button/button.component';
-import { IconbuttonComponent } from '../iconbutton/iconbutton.component';
-import { AsyncPipe, CommonModule } from '@angular/common';
-import { AppState } from '../../state/app.state';
-import { Store, provideState } from '@ngrx/store';
-import { Observable } from 'rxjs';
-import { selectAuthenticated } from '../../state/authState/authState.selector';
-import { BrowserModule } from '@angular/platform-browser';
-import { authStateReducer } from '../../state/authState/authState.reducer';
+import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-navbar',
-  standalone: true,
-  imports: [ButtonModule,SvgComponent,ButtonComponent,IconbuttonComponent, CommonModule, AsyncPipe],
-  templateUrl: './navbar.component.html',
-  styleUrl: './navbar.component.css'
+  selector: 'app-header', 
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css'] 
 })
-export class NavbarComponent {
-  authState$:Observable<boolean>;
-  constructor(private store:Store<AppState>){
-    this.authState$ = this.store.select(selectAuthenticated)
-  }
-  @Input() dlmodeOnly:boolean = false;
-}
+export class Header {}

frontend/peakvisor/src/app/shared/ui/header/header.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HeaderComponent } from './header.component';
+import { RouterModule } from '@angular/router'; // Needed if your header uses routerLink
+import { ButtonModule } from 'primeng/button'; // Assuming ButtonModule is where app-button is declared
+
+@NgModule({
+  imports: [CommonModule, RouterModule, ButtonModule],
+  declarations: [HeaderComponent],
+  exports: [HeaderComponent],
+})
+export class HeaderModule {}

frontend/peakvisor/src/app/shared/ui/iconbutton/iconbutton.component.html

@@ -0,0 +1 @@
+<p-button icon="pi pi-check" size="large" [rounded]="true"></p-button>

frontend/peakvisor/src/app/shared/ui/iconbutton/iconbutton.component.spec.ts

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

frontend/peakvisor/src/app/shared/ui/iconbutton/iconbutton.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+
+@Component({
+  selector: 'app-iconbutton',
+  standalone: true,
+  imports: [ButtonModule],
+  templateUrl: './iconbutton.component.html',
+  styleUrl: './iconbutton.component.css'
+})
+export class IconbuttonComponent {
+
+}