From 3038098cf5daeafeec0b599fcedea724ba921c06 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Wed, 26 Feb 2025 14:01:31 +0100
Subject: [PATCH] neuer Spinner, SEO Tags

---
 angular.json                                  |  3 +++
 src/app/app.component.ts                      | 25 ++++++++++++++-----
 .../components/loading-spinner.component.ts   | 16 ++++++++++++
 src/index.html                                | 21 ++++++++++++++++
 4 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 src/app/components/loading-spinner.component.ts

diff --git a/angular.json b/angular.json
index 6e5a67d..6f10acf 100644
--- a/angular.json
+++ b/angular.json
@@ -125,5 +125,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e2f8d79..315ca01 100644
--- a/src/app/app.component.ts
+++ b/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">
-      Message successfully sent
+      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>;
@@ -49,4 +62,4 @@ export class AppComponent {
       AOS.refresh();
     }, 500);
   }
-}
+}
\ No newline at end of file
diff --git a/src/app/components/loading-spinner.component.ts b/src/app/components/loading-spinner.component.ts
new file mode 100644
index 0000000..0dd46af
--- /dev/null
+++ b/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 {}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 0e4c9b5..b12938d 100644
--- a/src/index.html
+++ b/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>