Modern Landing Page - Copy this Angular, Css Component to your project

i want you to improve on this existing component:import { Component} from "@angular/core"; @Component({ selector: 'app-main-page', templateUrl: './main-page.component.html', styleUrls: ['./main-page.component.scss'], imports: [], }) export class MainPageComponent { readonly title: string = 'POLYTOPIA'; readonly teamMembers: string[] = ["hossa", "lol", "allo"]; readonly gameLogoPath: string = 'https://www.citypng.com/public/uploads/preview/hd-cyberpunk-2077-game-official-logo-png-701751694787431j4jtp1luyo.png'; gameLogoError: boolean = false; handleGameLogoError(): void { this.gameLogoError = true; } } <div class="container justified" style="background: url('https://mir-s3-cdn-cf.behance.net/project_modules/fs/9bc27292880429.5e569ff84e4d0.gif') no-repeat center center; background-size: cover;"> <h1 class="header-item"> {{ title }}</h1> @if (!gameLogoError) { <img [src]="gameLogoPath" (error)="handleGameLogoError()" alt="Logo Jeu" /> } @else { <p class="error-message">Failed to load game logo.</p> } <section id="server-message" class="justified"> <div class="button-container"> <button class="button" > <span>Joindre une partie</span> <div class="top"></div> <div class="left"></div> <div class="bottom"></div> <div class="right"></div> </button> <button class="button" > <span>Créer une partie</span> <div class="top"></div> <div class="left"></div> <div class="bottom"></div> <div class="right"></div> </button> <button class="button" > <span>Administer les jeux</span> <div class="top"></div> <div class="left"></div> <div class="bottom"></div> <div class="right"></div> </button> </div> </section> <footer class="footer-item"> <h4 class="team-name">Équipe 112</h4> <p> @for (member of teamMembers; track member) { <span>{{ member }}</span> @if (!$last) {, } } </p> </footer> </div> $primary-bg: #1a1625; $primary-text: #7ee0d0; $accent-gold: #ffd700; $glow-teal: rgba(126, 224, 208, 0.2); $glow-gold: rgba(255, 215, 0, 0.2); .container { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 20px; box-sizing: border-box; background-color: $primary-bg; color: $primary-text; } .justified { display: flex; flex-direction: column; align-items: center; width: 100%; } img { width: 500px; height: 300px; margin: 20px 0; object-fit: contain; } .button-container { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 300px; } .button { padding: 20px 60px; background-color: $primary-bg; border: none; font-size: 18px; position: relative; transition: 500ms; } .button span { color: $primary-text; position: relative; transition: 500ms; transition-delay: 500ms; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; } .button:before { content: ''; position: absolute; width: 0%; height: 0%; left: 50%; right: 50%; top: 50%; bottom: 50%; transition: 500ms; transition-delay: 500ms; background-color: $primary-text; box-shadow: 0 0 10px $primary-text, 0 0 30px $primary-text, 0 0 50px $primary-text; } .button div { transition: 500ms; position: absolute; background-color: $primary-text; box-shadow: 0 0 15px $primary-text, 0 0 30px $primary-text, 0 0 50px $primary-text; } .button .top { width: 15px; height: 2px; top: 0; left: 0; } .button .bottom { width: 15px; height: 2px; bottom: 0; right: 0; } .button .left { width: 2px; height: 15px; top: 0; left: 0; } .button .right { width: 2px; height: 15px; bottom: 0; right: 0; } .button:hover { color: $primary-bg; cursor: pointer; } .button:hover span { color: $primary-bg; } .button:hover:before { width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .button:hover .top, .button:hover .bottom { width: 100%; } .button:hover .left, .button:hover .right { height: 100%; } .team-name { font-size: 1.2rem; margin-bottom: 10px; color: $primary-text; text-shadow: 0 0 10px $primary-text; } .header-item { font-size: 2.5rem; font-weight: bold; margin: 20px 0; text-align: center; color: $primary-text; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 0 10px $glow-gold; } .footer-item { margin-top: auto; text-align: center; padding: 20px; width: 100%; } .footer-item p { margin: 0; line-height: 1.5; color: $primary-bg; opacity: 0.8; } .footer-item span { color: $primary-text; transition: color 0.3s ease; } .footer-item span:hover { color: $accent-gold; } @media (max-width: 768px) { img { width: 100% !important; height: auto !important; max-width: 500px; } .header-item { font-size: 2rem; } .button-container { max-width: 250px; } }