Fix an issue with home on app

src/app/app.component.html

@@ -1,13 +1,4 @@
-<div class="fullscreen-container" *ngIf="showWelcome">
-  <img src="/icons/icon-1024x1024.png" alt="Moments Logo" class="logo" />
-  <div class="content">
-    <h1>Welcome to Moments</h1>
-    <button [routerLink]="['/collage']" class="start-button">
-      Create Collage
-    </button>
-    <button *ngIf="showInstallButton" (click)="installPwa()" class="install-button">
-      Install App
-    </button>
-  </div>
-</div>
+<button *ngIf="showInstallButton" (click)="installPwa()" class="install-button">
+  Install App
+</button>
 <router-outlet />

src/app/app.component.ts

@@ -1,29 +1,17 @@
 import { Component, OnInit } from '@angular/core';
 import { RouterModule, RouterOutlet } from '@angular/router';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { Router, NavigationEnd } from '@angular/router';
-import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, CommonModule, FormsModule, RouterModule],
+  imports: [RouterOutlet, CommonModule, RouterModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
 export class AppComponent implements OnInit {
   deferredPrompt: any;
   showInstallButton = false;
-  showWelcome = true;
-
-  constructor(private router: Router) {
-    router.events.pipe(
-      filter(event => event instanceof NavigationEnd)
-    ).subscribe((event: any) => {
-      this.showWelcome = event.url === '/home' || event.url === '/';
-    });
-  }
 
   ngOnInit() {
     window.addEventListener('beforeinstallprompt', (e) => {

src/app/app.routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '@angular/router';
 import { PhotoCollageComponent } from './photo-collage/photo-collage.component';
-import { AppComponent } from './app.component';
+import { HomeComponent } from './home/home.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
-  { path: 'home', component: AppComponent },
+  { path: 'home', component: HomeComponent },
   { path: 'collage', component: PhotoCollageComponent }
 ];

src/app/home/home.component.css

@@ -0,0 +1,70 @@
+.fullscreen-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .fullscreen-container .logo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    z-index: 1;
+  }
+
+  .content h1 {
+    color: white;
+    font-size: 3rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    margin-bottom: 2rem;
+  }
+
+  .start-button {
+    padding: 12px 24px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 24px;
+    font-size: 1.1rem;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s;
+  }
+
+  .start-button:hover {
+    transform: scale(1.05);
+    background-color: #0056b3;
+  }
+
+  .install-button {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 12px 24px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 24px;
+    font-size: 1.1rem;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    transition: transform 0.2s;
+  }
+
+  .install-button:hover {
+    transform: scale(1.05);
+    background-color: #0056b3;
+  }
+

src/app/home/home.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  template: `
+    <div class="fullscreen-container">
+      <img src="/icons/icon-1024x1024.png" alt="Moments Logo" class="logo" />
+      <div class="content">
+        <h1>Welcome to Moments</h1>
+        <button [routerLink]="['/collage']" class="start-button">
+          Create Collage
+        </button>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent {}