neuer Spinner, SEO Tags

angular.json

@@ -125,5 +125,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app.component.ts

@@ -5,28 +5,41 @@ import { RouterOutlet } from '@angular/router';
 import * as AOS from 'aos';
 import { OverlayService } from './services/overlay.service';
 import { Observable } from 'rxjs';
+import { LoadingSpinnerComponent } from './components/loading-spinner.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet],
+  imports: [CommonModule, RouterOutlet, LoadingSpinnerComponent],
   template: `
     <router-outlet></router-outlet>
 
     <!-- Please Wait Overlay -->
     <div 
       *ngIf="isLoading$ | async" 
-      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div class="text-white text-lg">Please Wait...</div>
+      class="fixed inset-0 bg-[rgb(0,0,0)]/[.50] flex items-center justify-center z-50 transition-opacity duration-300">
+      <app-loading-spinner></app-loading-spinner>
     </div>
 
     <!-- Success Message Overlay -->
     <div 
       *ngIf="isSuccess$ | async" 
-      class="fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow z-50">
+      class="fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow z-50 animate-fadeIn">
+      <div class="flex items-center">
+        <i class="fas fa-check-circle mr-2"></i>
         Message successfully sent
       </div>
+    </div>
   `,
+  styles: [`
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-fadeIn {
+      animation: fadeIn 0.3s ease-in-out;
+    }
+  `]
 })
 export class AppComponent {
   isLoading$: Observable<boolean>;

src/app/components/loading-spinner.component.ts

@@ -0,0 +1,16 @@
+// src/app/components/loading-spinner.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-loading-spinner',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="flex items-center justify-center space-x-2">
+      <div class="h-8 w-8 rounded-full border-4 border-t-blue-500 border-b-blue-700 border-l-blue-600 border-r-transparent animate-spin"></div>
+      <div class="text-white text-xl font-medium">Please Wait...</div>
+    </div>
+  `
+})
+export class LoadingSpinnerComponent {}

src/index.html

@@ -7,6 +7,27 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.png">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  
+  <!-- SEO Meta Tags -->
+  <meta name="description" content="Bay Area Affiliates provides comprehensive IT services including hardware support, network infrastructure, virtualization solutions and more for businesses in the Coastal Bend area.">
+  <meta name="keywords" content="IT Services, Network Support, Computer Repair, Coastal Bend, Windows 11 Upgrade, VPN Setup, Web Services, Server Repair">
+  <meta name="author" content="Bay Area Affiliates, Inc.">
+  
+  <!-- Open Graph / Social Media Tags -->
+  <meta property="og:title" content="Bay Area Affiliates, Inc. | IT Services for Coastal Bend">
+  <meta property="og:description" content="Providing top-notch Computer & Networking solutions to the Coastal Bend community for over 25 years.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://bayarea-cc.com">
+  <meta property="og:image" content="assets/it-services.jpg">
+  
+  <!-- Twitter Card tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Bay Area Affiliates, Inc. | IT Services">
+  <meta name="twitter:description" content="Reliable IT Services for the Coastal Bend community for over 25 years.">
+  <meta name="twitter:image" content="assets/it-services.jpg">
+  
+  <!-- Canonical URL -->
+  <link rel="canonical" href="https://bayarea-cc.com">
 </head>
 <body class="font-sans antialiased text-gray-800">
   <app-root></app-root>