refactor(landing): restructure landing page components and templates

frontend/src/app/feature/landing/landing.component.ts

@@ -1,22 +1,55 @@
-import { Component, inject } from '@angular/core';
-import { KeycloakService } from 'keycloak-angular';
-import { RouterLink } from '@angular/router';
+import { ChangeDetectionStrategy, Component, OnInit, OnDestroy } from '@angular/core';
+import { NavbarComponent } from '../../shared/components/navbar/navbar.component';
+import { NgFor } from '@angular/common';
 
 @Component({
-  selector: 'app-landing',
+  selector: 'app-landing-page',
   standalone: true,
-  imports: [RouterLink],
+  imports: [NavbarComponent, NgFor],
   templateUrl: './landing.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LandingComponent {
-  private keycloakService: KeycloakService = inject(KeycloakService);
+export class LandingComponent implements OnInit, OnDestroy {
+  currentSlide = 0;
+  private autoplayInterval: ReturnType<typeof setInterval> | undefined;
 
-  public isLoggedIn = this.keycloakService.isLoggedIn();
+  ngOnInit() {
+    this.startAutoplay();
+  }
 
-  public login() {
-    const baseUrl = window.location.origin;
+  ngOnDestroy() {
+    this.stopAutoplay();
+  }
 
-    this.keycloakService.login({ redirectUri: `${baseUrl}/home` });
+  prevSlide() {
+    this.currentSlide = this.currentSlide === 0 ? 1 : 0;
+    this.resetAutoplay();
+  }
+
+  nextSlide() {
+    this.currentSlide = this.currentSlide === 1 ? 0 : 1;
+    this.resetAutoplay();
+  }
+
+  goToSlide(index: number) {
+    this.currentSlide = index;
+    this.resetAutoplay();
+  }
+
+  private startAutoplay() {
+    this.autoplayInterval = setInterval(() => {
+      this.nextSlide();
+    }, 5000);
+  }
+
+  private stopAutoplay() {
+    if (this.autoplayInterval) {
+      clearInterval(this.autoplayInterval);
+    }
+  }
+
+  private resetAutoplay() {
+    this.stopAutoplay();
+    this.startAutoplay();
   }
 }
-export class LandingPageComponent {}