SEO

bizmatch/src/app/pages/home/home.component.html

@@ -10,7 +10,12 @@
     <!-- <a routerLink="/login" class="text-primary-500 hover:underline">Login/Register</a> -->
     }
   </div>
-  <button (click)="toggleMenu()" class="md:hidden text-neutral-600">
+  <button
+    (click)="toggleMenu()"
+    class="md:hidden text-neutral-600"
+    aria-label="Open navigation menu"
+    [attr.aria-expanded]="isMenuOpen"
+  >
     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7"></path>
     </svg>
@@ -26,7 +31,11 @@
     <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-white text-xl py-2">Log In</a>
     <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white text-xl py-2">Sign Up</a>
     }
-    <button (click)="toggleMenu()" class="text-white mt-4">
+    <button
+      (click)="toggleMenu()"
+      class="text-white mt-4"
+      aria-label="Close navigation menu"
+    >
       <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
       </svg>
@@ -38,17 +47,34 @@
 <!-- 1. px-4 für <main> (vorher px-2 sm:px-4) -->
 <main class="flex flex-col items-center justify-center px-4 w-full flex-grow">
   <div
-    class="bg-cover-custom pb-12 md:py-20 flex flex-col w-full rounded-xl lg:rounded-2xl md:drop-shadow-custom-md lg:drop-shadow-custom-lg min-h-[calc(100vh_-_20rem)] lg:min-h-[calc(100vh_-_10rem)] max-sm:bg-contain max-sm:bg-bottom max-sm:bg-no-repeat max-sm:min-h-[60vh] max-sm:bg-primary-600"
+    class="relative overflow-hidden pb-12 md:py-20 flex flex-col w-full rounded-xl lg:rounded-2xl md:drop-shadow-custom-md lg:drop-shadow-custom-lg min-h-[calc(100vh_-_20rem)] lg:min-h-[calc(100vh_-_10rem)] max-sm:min-h-[60vh] max-sm:bg-primary-600"
   >
-    <div class="flex justify-center w-full">
+    <!-- Optimized Background Image -->
+    <picture class="absolute inset-0 w-full h-full z-0 pointer-events-none">
+      <source srcset="/assets/images/flags_bg.avif" type="image/avif">
+      <img
+        width="2500"
+        height="1285"
+        fetchpriority="high"
+        loading="eager"
+        src="/assets/images/flags_bg.jpg"
+        alt=""
+        class="w-full h-full object-cover"
+      >
+    </picture>
+    
+    <!-- Gradient Overlay -->
+    <div class="absolute inset-0 bg-gradient-to-b from-black/35 via-black/15 to-transparent z-0 pointer-events-none"></div>
+
+    <div class="flex justify-center w-full relative z-10">
       <!-- 3. Für Mobile: m-2 statt max-w-xs; ab sm: wieder max-width und kein Margin -->
       <div class="w-full m-2 sm:m-0 sm:max-w-md md:max-w-xl lg:max-w-2xl xl:max-w-3xl">
         <!-- Hero-Container -->
         <section class="relative">
           <!-- Dein Hintergrundbild liegt hier per CSS oder absolutem <img> -->
 
-          <!-- 1) Overlay: sorgt für Kontrast auf hellem Himmel -->
+          <!-- 1) Overlay: sorgt für Kontrast auf hellem Himmel (Previous overlay removed, using new global overlay) -->
-          <div aria-hidden="true" class="pointer-events-none absolute inset-0"></div>
+          <!-- <div aria-hidden="true" class="pointer-events-none absolute inset-0"></div> -->
 
           <!-- 2) Textblock -->
           <div class="relative z-10 mx-auto max-w-4xl px-6 sm:px-6 py-4 sm:py-16 text-center text-white">
@@ -63,55 +89,66 @@
         <div class="search-form-container bg-white bg-opacity-80 pb-4 md:pb-6 pt-2 px-3 sm:px-4 md:px-6 rounded-lg shadow-lg w-full" [ngClass]="{ 'pt-6': aiSearch }">
           @if(!aiSearch){
           <div class="text-sm lg:text-base mb-1 text-center text-neutral-500 border-neutral-200 dark:text-neutral-400 dark:border-neutral-700 flex justify-between">
-            <ul class="flex flex-wrap -mb-px w-full">
+            <ul class="flex flex-wrap -mb-px w-full" role="tablist">
-              <li class="w-[33%]">
+              <li class="w-[33%]" role="presentation">
-                <a
+                <button
+                  type="button"
+                  role="tab"
+                  [attr.aria-selected]="activeTabAction === 'business'"
                   (click)="changeTab('business')"
                   [ngClass]="
                     activeTabAction === 'business'
                       ? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500']
                       : ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
                   "
-                  class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
+                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent"
                 >
-                  <img src="/assets/images/business_logo.png" alt="Search businesses for sale" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain" width="28" height="28" />
+                  <img src="/assets/images/business_logo.png" alt="" aria-hidden="true" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain" width="28" height="28" />
                   <span>Businesses</span>
-                </a>
+                </button>
               </li>
               @if ((numberOfCommercial$ | async) > 0) {
-              <li class="w-[33%]">
+              <li class="w-[33%]" role="presentation">
-                <a
+                <button
+                  type="button"
+                  role="tab"
+                  [attr.aria-selected]="activeTabAction === 'commercialProperty'"
                   (click)="changeTab('commercialProperty')"
                   [ngClass]="
                     activeTabAction === 'commercialProperty'
                       ? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500']
                       : ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
                   "
-                  class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
+                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent"
                 >
-                  <img src="/assets/images/properties_logo.png" alt="Search commercial properties for sale" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain" width="28" height="28" />
+                  <img src="/assets/images/properties_logo.png" alt="" aria-hidden="true" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain" width="28" height="28" />
                   <span>Properties</span>
-                </a>
+                </button>
               </li>
               }
-              <li class="w-[33%]">
+              <li class="w-[33%]" role="presentation">
-                <a
+                <button
+                  type="button"
+                  role="tab"
+                  [attr.aria-selected]="activeTabAction === 'broker'"
                   (click)="changeTab('broker')"
                   [ngClass]="
                     activeTabAction === 'broker'
                       ? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500']
                       : ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
                   "
-                  class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"
+                  class="tab-link w-full hover:cursor-pointer inline-flex items-center justify-center px-3 py-3 md:p-4 border-b-2 rounded-t-lg bg-transparent"
                 >
                   <img
                     src="/assets/images/icon_professionals.png"
-                    alt="Search business professionals and brokers"
+                    alt=""
-                    class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain bg-transparent"
+                    aria-hidden="true"
+                    class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain"
                     style="mix-blend-mode: darken"
+                    width="28" height="28"
                   />
                   <span>Professionals</span>
-                </a>
+                </button>
               </li>
             </ul>
           </div>
@@ -119,7 +156,11 @@
           <div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-neutral-300">
             <div class="md:flex-none md:w-48 flex-1 md:border-r border-neutral-300 overflow-hidden mb-2 md:mb-0">
               <div class="relative max-sm:border border-neutral-300 rounded-md">
+                <label for="type-filter" class="sr-only">Filter by type</label>
                 <select
+                  id="type-filter"
+                  aria-label="Filter by type"
+
                   class="appearance-none bg-transparent w-full py-4 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none min-h-[52px]"
                   [ngModel]="criteria.types"
                   (ngModelChange)="onTypesChange($event)"
@@ -138,6 +179,7 @@
 
             <div class="md:flex-auto md:w-36 flex-grow md:border-r border-neutral-300 mb-2 md:mb-0">
               <div class="relative max-sm:border border-neutral-300 rounded-md">
+                <label for="location-search" class="sr-only">Search by city or state</label>
                 <ng-select
                   class="custom md:border-none rounded-md md:rounded-none"
                   [multiple]="false"
@@ -151,6 +193,8 @@
                   (ngModelChange)="setCityOrState($event)"
                   placeholder="Enter City or State ..."
                   groupBy="type"
+                  labelForId="location-search"
+                  aria-label="Search by city or state"
                 >
                   @for (city of cities$ | async; track city.id) { @let state = city.type==='city'?city.content.state:''; @let separator = city.type==='city'?' - ':'';
                   <ng-option [value]="city">{{ city.content.name }}{{ separator }}{{ state }}</ng-option>
@@ -161,7 +205,10 @@
             @if (criteria.radius && !aiSearch){
             <div class="md:flex-none md:w-36 flex-1 md:border-r border-neutral-300 mb-2 md:mb-0">
               <div class="relative max-sm:border border-neutral-300 rounded-md">
+                <label for="radius-filter" class="sr-only">Filter by radius</label>
                 <select
+                  id="radius-filter"
+                  aria-label="Filter by radius"
                   class="appearance-none bg-transparent w-full py-4 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none min-h-[52px]"
                   (ngModelChange)="onRadiusChange($event)"
                   [ngModel]="criteria.radius"
@@ -180,13 +227,13 @@
             }
             <div class="bg-primary-500 hover:bg-primary-600 max-sm:rounded-md search-button">
               @if( numberOfResults$){
-              <button class="w-full h-full text-white font-bold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[52px] flex items-center justify-center gap-2" (click)="search()">
+              <button aria-label="Search listings" class="w-full h-full text-white font-bold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[52px] flex items-center justify-center gap-2" (click)="search()">
-                <i class="fas fa-search"></i>
+                <i class="fas fa-search" aria-hidden="true"></i>
                 <span>Search {{ numberOfResults$ | async }}</span>
               </button>
               }@else {
-              <button class="w-full h-full text-white font-bold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[52px] flex items-center justify-center gap-2" (click)="search()">
+              <button aria-label="Search listings" class="w-full h-full text-white font-bold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[52px] flex items-center justify-center gap-2" (click)="search()">
-                <i class="fas fa-search"></i>
+                <i class="fas fa-search" aria-hidden="true"></i>
                 <span>Search</span>
               </button>
               }

bizmatch/src/app/pages/home/home.component.scss

@@ -1,36 +1,4 @@
-.bg-cover-custom {
-  position: relative;
-  // Prioritize AVIF format (69KB) over JPG (26MB)
-  background-image: url('/assets/images/flags_bg.avif');
-  background-size: cover;
-  background-position: center;
-  border-radius: 20px;
 
-  // Fallback for browsers that don't support AVIF
-  @supports not (background-image: url('/assets/images/flags_bg.avif')) {
-    background-image: url('/assets/images/flags_bg.jpg');
-  }
-
-  // Add gradient overlay for better text contrast
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0) 100%);
-    border-radius: 20px;
-    pointer-events: none;
-    z-index: 1;
-  }
-
-  // Ensure content stays above overlay
-  > * {
-    position: relative;
-    z-index: 2;
-  }
-}
 select:not([size]) {
   background-image: unset;
 }
@@ -269,3 +237,16 @@ header {
     }
   }
 }
+
+// Screen reader only - visually hidden but accessible
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

bizmatch/src/app/pages/home/home.component.ts

@@ -125,7 +125,7 @@ export class HomeComponent {
     // Set SEO meta tags for home page
     this.seoService.updateMetaTags({
       title: 'BizMatch - Buy & Sell Businesses and Commercial Properties',
-      description: 'Find profitable businesses for sale, commercial real estate, and franchise opportunities across the United States. Browse thousands of listings from verified sellers and brokers.',
+      description: 'Find profitable businesses for sale, commercial real estate, and franchise opportunities. Browse thousands of verified listings across the US.',
       keywords: 'business for sale, businesses for sale, buy business, sell business, commercial property, commercial real estate, franchise opportunities, business broker, business marketplace',
       type: 'website'
     });

bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts

@@ -86,8 +86,8 @@ export class BusinessListingsComponent implements OnInit, OnDestroy {
 
     // Set SEO meta tags for business listings page
     this.seoService.updateMetaTags({
-      title: 'Businesses for Sale - Find Profitable Business Opportunities | BizMatch',
+      title: 'Businesses for Sale - Profitable Opportunities | BizMatch',
-      description: 'Browse thousands of businesses for sale across the United States. Find restaurants, franchises, retail stores, and more. Verified listings from business owners and brokers.',
+      description: 'Browse thousands of businesses for sale. Find restaurants, franchises, retail stores, and more. Verified listings from owners and brokers.',
       keywords: 'businesses for sale, buy a business, business opportunities, franchise for sale, restaurant for sale, retail business for sale, business broker listings',
       type: 'website'
     });

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts

@@ -83,8 +83,8 @@ export class CommercialPropertyListingsComponent implements OnInit, OnDestroy {
 
     // Set SEO meta tags for commercial property listings page
     this.seoService.updateMetaTags({
-      title: 'Commercial Properties for Sale - Office, Retail, Industrial Real Estate | BizMatch',
+      title: 'Commercial Properties for Sale - Office, Retail | BizMatch',
-      description: 'Browse commercial real estate listings including office buildings, retail spaces, warehouses, and industrial properties. Investment opportunities from verified sellers and brokers across the United States.',
+      description: 'Browse commercial real estate: office buildings, retail spaces, warehouses, and industrial properties. Verified investment opportunities.',
       keywords: 'commercial property for sale, commercial real estate, office building for sale, retail space for sale, warehouse for sale, industrial property, investment property, commercial property listings',
       type: 'website'
     });