feat: Initialize BizMatch application with core UI components, routing, listing pages, backend services, migration scripts, and vulnerability management.

2026-01-03 23:05:38 +01:00
parent e32e43d17f
commit e3e726d8ca
42 changed files with 1478 additions and 1579 deletions
--- a/bizmatch/angular.json
+++ b/bizmatch/angular.json
@@ -49,7 +49,8 @@
              "src/styles.scss",
              "src/styles/lazy-load.css",
              "node_modules/quill/dist/quill.snow.css",
-              "node_modules/leaflet/dist/leaflet.css"
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/ngx-sharebuttons/themes/default.scss"
            ]
          },
          "configurations": {
--- a/bizmatch/package.json
+++ b/bizmatch/package.json
@@ -18,18 +18,18 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^18.1.3",
-    "@angular/cdk": "^18.0.6",
-    "@angular/common": "^18.1.3",
-    "@angular/compiler": "^18.1.3",
-    "@angular/core": "^18.1.3",
-    "@angular/fire": "^18.0.1",
-    "@angular/forms": "^18.1.3",
-    "@angular/platform-browser": "^18.1.3",
-    "@angular/platform-browser-dynamic": "^18.1.3",
-    "@angular/platform-server": "^18.1.3",
-    "@angular/router": "^18.1.3",
-    "@angular/ssr": "^18.2.21",
+    "@angular/animations": "^19.2.16",
+    "@angular/cdk": "^19.1.5",
+    "@angular/common": "^19.2.16",
+    "@angular/compiler": "^19.2.16",
+    "@angular/core": "^19.2.16",
+    "@angular/fire": "^19.2.0",
+    "@angular/forms": "^19.2.16",
+    "@angular/platform-browser": "^19.2.16",
+    "@angular/platform-browser-dynamic": "^19.2.16",
+    "@angular/platform-server": "^19.2.16",
+    "@angular/router": "^19.2.16",
+    "@angular/ssr": "^19.2.16",
    "@bluehalo/ngx-leaflet": "^18.0.2",
    "@fortawesome/angular-fontawesome": "^0.15.0",
    "@fortawesome/fontawesome-free": "^6.7.2",
@@ -63,14 +63,14 @@
    "tslib": "^2.6.3",
    "urlcat": "^3.1.0",
    "uuid": "^10.0.0",
-    "zone.js": "~0.14.7",
+    "zone.js": "~0.15.0",
    "stripe": "^19.3.0",
    "zod": "^4.1.12"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^18.1.3",
-    "@angular/cli": "^18.1.3",
-    "@angular/compiler-cli": "^18.1.3",
+    "@angular-devkit/build-angular": "^19.2.16",
+    "@angular/cli": "^19.2.16",
+    "@angular/compiler-cli": "^19.2.16",
    "@types/express": "^4.17.21",
    "@types/jasmine": "~5.1.4",
    "@types/node": "^20.14.9",
@@ -84,6 +84,6 @@
    "karma-jasmine-html-reporter": "~2.1.0",
    "postcss": "^8.4.39",
    "tailwindcss": "^3.4.4",
-    "typescript": "~5.4.5"
+    "typescript": "~5.7.2"
  }
 }
--- a/bizmatch/proxy.conf.json
+++ b/bizmatch/proxy.conf.json
@@ -6,7 +6,7 @@
    "logLevel": "debug"
  },
  "/pictures": {
-    "target": "http://localhost:8080",
+    "target": "http://localhost:8081",
    "secure": false
  },
  "/ipify": {
--- a/bizmatch/server.ts
+++ b/bizmatch/server.ts
@@ -2,11 +2,10 @@
 import './src/ssr-dom-polyfill';

 import { APP_BASE_HREF } from '@angular/common';
-import { CommonEngine } from '@angular/ssr';
+import { AngularNodeAppEngine, createNodeRequestHandler, writeResponseToNodeResponse } from '@angular/ssr/node';
 import express from 'express';
 import { fileURLToPath } from 'node:url';
 import { dirname, join, resolve } from 'node:path';
-import bootstrap from './src/main.server';

 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
@@ -15,7 +14,7 @@ export function app(): express.Express {
  const browserDistFolder = resolve(serverDistFolder, '../browser');
  const indexHtml = join(serverDistFolder, 'index.server.html');

-  const commonEngine = new CommonEngine();
+  const angularApp = new AngularNodeAppEngine();

  server.set('view engine', 'html');
  server.set('views', browserDistFolder);
@@ -29,17 +28,15 @@ export function app(): express.Express {

  // All regular routes use the Angular engine
  server.get('*', (req, res, next) => {
-    const { protocol, originalUrl, baseUrl, headers } = req;
-
-    commonEngine
-      .render({
-        bootstrap,
-        documentFilePath: indexHtml,
-        url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: browserDistFolder,
-        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    angularApp
+      .handle(req)
+      .then((response) => {
+        if (response) {
+          writeResponseToNodeResponse(response, res);
+        } else {
+          res.sendStatus(404);
+        }
      })
-      .then((html) => res.send(html))
      .catch((err) => next(err));
  });

--- a/bizmatch/src/app/app.routes.ts
+++ b/bizmatch/src/app/app.routes.ts
@@ -15,7 +15,6 @@ import { HomeComponent } from './pages/home/home.component';
 import { BrokerListingsComponent } from './pages/listings/broker-listings/broker-listings.component';
 import { BusinessListingsComponent } from './pages/listings/business-listings/business-listings.component';
 import { CommercialPropertyListingsComponent } from './pages/listings/commercial-property-listings/commercial-property-listings.component';
-import { PricingComponent } from './pages/pricing/pricing.component';
 import { AccountComponent } from './pages/subscription/account/account.component';
 import { EditBusinessListingComponent } from './pages/subscription/edit-business-listing/edit-business-listing.component';
 import { EditCommercialPropertyListingComponent } from './pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component';
@@ -157,11 +156,7 @@ export const routes: Routes = [
    canActivate: [AuthGuard],
  },
  // #########
-  // Pricing
-  {
-    path: 'pricing',
-    component: PricingComponent,
-  },
+  // Email Verification
  {
    path: 'emailVerification',
    component: EmailVerificationComponent,
@@ -170,17 +165,6 @@ export const routes: Routes = [
    path: 'email-authorized',
    component: EmailAuthorizedComponent,
  },
-  {
-    path: 'pricingOverview',
-    component: PricingComponent,
-    data: {
-      pricingOverview: true,
-    },
-  },
-  {
-    path: 'pricing/:id',
-    component: PricingComponent,
-  },
  {
    path: 'success',
    component: SuccessComponent,
--- a/bizmatch/src/app/components/footer/footer.component.html
+++ b/bizmatch/src/app/components/footer/footer.component.html
--- a/bizmatch/src/app/components/header/header.component.html
+++ b/bizmatch/src/app/components/header/header.component.html
@@ -1,7 +1,7 @@
 <nav class="bg-white border-neutral-200 dark:bg-neutral-900 print:hidden">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
-      <img src="assets/images/header-logo.png" class="h-10 w-auto"
+      <img src="/assets/images/header-logo.png" class="h-10 w-auto"
        alt="BizMatch - Business Marketplace for Buying and Selling Businesses" />
    </a>
    <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
@@ -170,7 +170,7 @@
            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/businessListings') }"
            class="block py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700 inline-flex items-center"
            aria-current="page" (click)="closeMenusAndSetCriteria('businessListings')">
-            <img src="assets/images/business_logo.png" alt="Business" class="w-5 h-5 mr-2 object-contain" width="20"
+            <img src="/assets/images/business_logo.png" alt="Business" class="w-5 h-5 mr-2 object-contain" width="20"
              height="20" />
            <span>Businesses</span>
          </a>
@@ -181,8 +181,8 @@
            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/commercialPropertyListings') }"
            class="block py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700 inline-flex items-center"
            (click)="closeMenusAndSetCriteria('commercialPropertyListings')">
-            <img src="assets/images/properties_logo.png" alt="Properties" class="w-5 h-5 mr-2 object-contain" width="20"
-              height="20" />
+            <img src="/assets/images/properties_logo.png" alt="Properties" class="w-5 h-5 mr-2 object-contain"
+              width="20" height="20" />
            <span>Properties</span>
          </a>
        </li>
@@ -192,7 +192,7 @@
            [ngClass]="{ 'bg-primary-600 text-white md:text-primary-600 md:bg-transparent md:dark:text-primary-500': isActive('/brokerListings') }"
            class="inline-flex items-center py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700"
            (click)="closeMenusAndSetCriteria('brokerListings')">
-            <img src="assets/images/icon_professionals.png" alt="Professionals"
+            <img src="/assets/images/icon_professionals.png" alt="Professionals"
              class="w-5 h-5 mr-2 object-contain bg-transparent" style="mix-blend-mode: darken;" />
            <span>Professionals</span>
          </a>
--- a/bizmatch/src/app/components/header/header.component.ts
+++ b/bizmatch/src/app/components/header/header.component.ts
@@ -18,14 +18,14 @@ import { SelectOptionsService } from '../../services/select-options.service';
 import { SharedService } from '../../services/shared.service';
 import { UserService } from '../../services/user.service';
 import { map2User } from '../../utils/utils';
-import { DropdownComponent } from '../dropdown/dropdown.component';
+
 import { ModalService } from '../search-modal/modal.service';

@UntilDestroy()
@Component({
  selector: 'header',
  standalone: true,
-  imports: [CommonModule, RouterModule, DropdownComponent, FormsModule],
+  imports: [CommonModule, RouterModule, FormsModule],
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss',
 })
@@ -65,12 +65,14 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
    public selectOptions: SelectOptionsService,
    public authService: AuthService,
    private listingService: ListingsService,
-  ) {}
+  ) { }

  @HostListener('document:click', ['$event'])
  handleGlobalClick(event: Event) {
    const target = event.target as HTMLElement;
-    if (target.id !== 'sortDropdownButton' && target.id !== 'sortDropdownMobileButton') {
+    // Don't close sort dropdown when clicking on sort buttons or user menu button
+    const excludedIds = ['sortDropdownButton', 'sortDropdownMobileButton', 'user-menu-button'];
+    if (!excludedIds.includes(target.id) && !target.closest('#user-menu-button')) {
      this.sortDropdownVisible = false;
    }
  }
@@ -95,9 +97,15 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
      this.profileUrl = photoUrl;
    });

-    // User Updates
+    // User Updates - re-initialize Flowbite when user state changes
+    // This ensures the dropdown bindings are updated when the dropdown target changes
    this.userService.currentUser.pipe(untilDestroyed(this)).subscribe(u => {
+      const previousUser = this.user;
      this.user = u;
+      // Re-initialize Flowbite if user logged in/out state changed
+      if ((previousUser === null) !== (u === null)) {
+        setTimeout(() => initFlowbite(), 50);
+      }
    });

    // Router Events
--- a/bizmatch/src/app/components/validated-input/validated-input.component.ts
+++ b/bizmatch/src/app/components/validated-input/validated-input.component.ts
@@ -10,7 +10,7 @@ import { ValidationMessagesService } from '../validation-messages.service';
  selector: 'app-validated-input',
  templateUrl: './validated-input.component.html',
  standalone: true,
-  imports: [CommonModule, FormsModule, TooltipComponent, NgxMaskDirective, NgxMaskPipe],
+  imports: [CommonModule, FormsModule, TooltipComponent, NgxMaskDirective],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
--- a/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
+++ b/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
@@ -31,8 +31,8 @@
                class="text-primary-600 dark:text-primary-500 hover:underline">{{ listingUser.firstname }} {{
                listingUser.lastname }}</a>
              <img *ngIf="listing.imageName"
-                src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}"
-                class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" width="100" height="30" />
+                ngSrc="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}"
+                class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" width="100" height="30" alt="Business logo for {{ listingUser.firstname }} {{ listingUser.lastname }}" />
            </div>
          </div>
        </div>
@@ -135,6 +135,35 @@
    }
  </div>

+  <!-- FAQ Section for AEO (Answer Engine Optimization) -->
+  @if(businessFAQs && businessFAQs.length > 0) {
+  <div class="container mx-auto p-4 mt-8">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
+      <h2 class="text-2xl font-bold mb-6 text-gray-900">Frequently Asked Questions</h2>
+      <div class="space-y-4">
+        @for (faq of businessFAQs; track $index) {
+        <details class="group border border-gray-200 rounded-lg overflow-hidden hover:border-primary-300 transition-colors">
+          <summary class="flex items-center justify-between cursor-pointer p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
+            <h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
+            <svg class="w-5 h-5 text-gray-600 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+            </svg>
+          </summary>
+          <div class="p-4 bg-white border-t border-gray-200">
+            <p class="text-gray-700 leading-relaxed">{{ faq.answer }}</p>
+          </div>
+        </details>
+        }
+      </div>
+      <div class="mt-6 p-4 bg-primary-50 border-l-4 border-primary-500 rounded">
+        <p class="text-sm text-gray-700">
+          <strong class="text-primary-700">Have more questions?</strong> Contact the seller directly using the form above or reach out to our support team for assistance.
+        </p>
+      </div>
+    </div>
+  </div>
+  }
+
  <!-- Related Listings Section for SEO Internal Linking -->
  @if(relatedListings && relatedListings.length > 0) {
  <div class="container mx-auto p-4 mt-8">
--- a/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts
+++ b/bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectorRef, Component } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
@@ -33,7 +34,7 @@ import { ShareButton } from 'ngx-sharebuttons/button';
@Component({
  selector: 'app-details-business-listing',
  standalone: true,
-  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent, LeafletModule, BreadcrumbsComponent, ShareButton],
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent, LeafletModule, BreadcrumbsComponent, ShareButton, NgOptimizedImage],
  providers: [],
  templateUrl: './details-business-listing.component.html',
  styleUrl: '../details.scss',
@@ -70,6 +71,7 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
  env = environment;
  breadcrumbs: BreadcrumbItem[] = [];
  relatedListings: BusinessListing[] = [];
+  businessFAQs: Array<{ question: string; answer: string }> = [];

  constructor(
    private activatedRoute: ActivatedRoute,
@@ -155,7 +157,13 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
        { name: 'Business Listings', url: '/businessListings' },
        { name: this.selectOptions.getBusiness(this.listing.type), url: `/business/${this.listing.slug || this.listing.id}` }
      ]);
-      this.seoService.injectMultipleSchemas([productSchema, breadcrumbSchema]);
+
+      // Generate FAQ for AEO (Answer Engine Optimization)
+      this.businessFAQs = this.generateBusinessFAQ();
+      const faqSchema = this.seoService.generateFAQPageSchema(this.businessFAQs);
+
+      // Inject all schemas including FAQ
+      this.seoService.injectMultipleSchemas([productSchema, breadcrumbSchema, faqSchema]);

      // Generate breadcrumbs
      this.breadcrumbs = [
@@ -193,6 +201,101 @@ export class DetailsBusinessListingComponent extends BaseDetailsComponent {
    }
  }

+  /**
+   * Generate dynamic FAQ based on business listing data fields
+   * Provides AEO (Answer Engine Optimization) content
+   */
+  private generateBusinessFAQ(): Array<{ question: string; answer: string }> {
+    const faqs: Array<{ question: string; answer: string }> = [];
+
+    // FAQ 1: When was this business established?
+    if (this.listing.established) {
+      faqs.push({
+        question: 'When was this business established?',
+        answer: `This business was established ${this.listing.established} years ago${this.listing.established >= 10 ? ', demonstrating a proven track record and market stability' : ''}.`
+      });
+    }
+
+    // FAQ 2: What is the asking price?
+    if (this.listing.price) {
+      faqs.push({
+        question: 'What is the asking price for this business?',
+        answer: `The asking price for this business is $${this.listing.price.toLocaleString()}.${this.listing.salesRevenue ? ` With an annual revenue of $${this.listing.salesRevenue.toLocaleString()}, this represents a competitive valuation.` : ''}`
+      });
+    } else {
+      faqs.push({
+        question: 'What is the asking price for this business?',
+        answer: 'The asking price is available upon request. Please contact the seller for detailed pricing information.'
+      });
+    }
+
+    // FAQ 3: What is included in the sale?
+    const includedItems: string[] = [];
+    if (this.listing.realEstateIncluded) includedItems.push('real estate property');
+    if (this.listing.ffe) includedItems.push(`furniture, fixtures, and equipment valued at $${this.listing.ffe.toLocaleString()}`);
+    if (this.listing.inventory) includedItems.push(`inventory worth $${this.listing.inventory.toLocaleString()}`);
+
+    if (includedItems.length > 0) {
+      faqs.push({
+        question: 'What is included in the sale?',
+        answer: `The sale includes: ${includedItems.join(', ')}.${this.listing.leasedLocation ? ' The business operates from a leased location.' : ''}${this.listing.franchiseResale ? ' This is a franchise resale opportunity.' : ''}`
+      });
+    }
+
+    // FAQ 4: How many employees does the business have?
+    if (this.listing.employees) {
+      faqs.push({
+        question: 'How many employees does this business have?',
+        answer: `The business currently employs ${this.listing.employees} ${this.listing.employees === 1 ? 'person' : 'people'}.${this.listing.supportAndTraining ? ' The seller offers support and training to ensure smooth transition.' : ''}`
+      });
+    }
+
+    // FAQ 5: What is the annual revenue and cash flow?
+    if (this.listing.salesRevenue || this.listing.cashFlow) {
+      let answer = '';
+      if (this.listing.salesRevenue) {
+        answer += `The business generates an annual revenue of $${this.listing.salesRevenue.toLocaleString()}.`;
+      }
+      if (this.listing.cashFlow) {
+        answer += ` The annual cash flow is $${this.listing.cashFlow.toLocaleString()}.`;
+      }
+      faqs.push({
+        question: 'What is the financial performance of this business?',
+        answer: answer.trim()
+      });
+    }
+
+    // FAQ 6: Why is the business for sale?
+    if (this.listing.reasonForSale) {
+      faqs.push({
+        question: 'Why is this business for sale?',
+        answer: this.listing.reasonForSale
+      });
+    }
+
+    // FAQ 7: Where is the business located?
+    faqs.push({
+      question: 'Where is this business located?',
+      answer: `This ${this.selectOptions.getBusiness(this.listing.type)} business is located in ${this.listing.location.name || this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}.`
+    });
+
+    // FAQ 8: Is broker licensing required?
+    if (this.listing.brokerLicencing) {
+      faqs.push({
+        question: 'Is a broker license required for this business?',
+        answer: this.listing.brokerLicencing
+      });
+    }
+
+    // FAQ 9: What type of business is this?
+    faqs.push({
+      question: 'What type of business is this?',
+      answer: `This is a ${this.selectOptions.getBusiness(this.listing.type)} business${this.listing.established ? ` that has been operating for ${this.listing.established} years` : ''}.`
+    });
+
+    return faqs;
+  }
+
  ngOnDestroy() {
    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
    this.seoService.clearStructuredData(); // Clean up SEO structured data
--- a/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
+++ b/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
@@ -32,8 +32,8 @@
                  class="text-primary-600 dark:text-primary-500 hover:underline"> {{ detail.user.firstname }} {{
                  detail.user.lastname }} </a>
                <img *ngIf="detail.user.hasCompanyLogo"
-                  [src]="detail.imageBaseUrl + '/pictures/logo/' + detail.imagePath + '.avif?_ts=' + detail.ts"
-                  class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" width="100" height="30" />
+                  [ngSrc]="detail.imageBaseUrl + '/pictures/logo/' + detail.imagePath + '.avif?_ts=' + detail.ts"
+                  class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" width="100" height="30" alt="Company logo for {{ detail.user.firstname }} {{ detail.user.lastname }}" />
              </div>
            </div>
          </div>
@@ -149,6 +149,35 @@
    }
  </div>

+  <!-- FAQ Section for AEO (Answer Engine Optimization) -->
+  @if(propertyFAQs && propertyFAQs.length > 0) {
+  <div class="container mx-auto p-4 mt-8">
+    <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6">
+      <h2 class="text-2xl font-bold mb-6 text-gray-900">Frequently Asked Questions</h2>
+      <div class="space-y-4">
+        @for (faq of propertyFAQs; track $index) {
+        <details class="group border border-gray-200 rounded-lg overflow-hidden hover:border-primary-300 transition-colors">
+          <summary class="flex items-center justify-between cursor-pointer p-4 bg-gray-50 hover:bg-gray-100 transition-colors">
+            <h3 class="text-lg font-semibold text-gray-900">{{ faq.question }}</h3>
+            <svg class="w-5 h-5 text-gray-600 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+            </svg>
+          </summary>
+          <div class="p-4 bg-white border-t border-gray-200">
+            <p class="text-gray-700 leading-relaxed">{{ faq.answer }}</p>
+          </div>
+        </details>
+        }
+      </div>
+      <div class="mt-6 p-4 bg-primary-50 border-l-4 border-primary-500 rounded">
+        <p class="text-sm text-gray-700">
+          <strong class="text-primary-700">Have more questions?</strong> Contact the seller directly using the form above or reach out to our support team for assistance.
+        </p>
+      </div>
+    </div>
+  </div>
+  }
+
  <!-- Related Listings Section for SEO Internal Linking -->
  @if(relatedListings && relatedListings.length > 0) {
  <div class="container mx-auto p-4 mt-8">
--- a/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts
+++ b/bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts
@@ -1,4 +1,5 @@
 import { Component, NgZone } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
@@ -33,7 +34,7 @@ import { ShareButton } from 'ngx-sharebuttons/button';
@Component({
  selector: 'app-details-commercial-property-listing',
  standalone: true,
-  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent, GalleryModule, LeafletModule, BreadcrumbsComponent, ShareButton],
+  imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent, GalleryModule, LeafletModule, BreadcrumbsComponent, ShareButton, NgOptimizedImage],
  providers: [],
  templateUrl: './details-commercial-property-listing.component.html',
  styleUrl: '../details.scss',
@@ -73,6 +74,7 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
  images: Array<ImageItem> = [];
  relatedListings: CommercialPropertyListing[] = [];
  breadcrumbs: BreadcrumbItem[] = [];
+  propertyFAQs: Array<{ question: string; answer: string }> = [];
  constructor(
    private activatedRoute: ActivatedRoute,
    private listingsService: ListingsService,
@@ -174,7 +176,13 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
        { name: 'Commercial Properties', url: '/commercialPropertyListings' },
        { name: propertyData.propertyType, url: `/details-commercial-property/${this.listing.id}` }
      ]);
-      this.seoService.injectMultipleSchemas([realEstateSchema, breadcrumbSchema]);
+
+      // Generate FAQ for AEO (Answer Engine Optimization)
+      this.propertyFAQs = this.generatePropertyFAQ();
+      const faqSchema = this.seoService.generateFAQPageSchema(this.propertyFAQs);
+
+      // Inject all schemas including FAQ
+      this.seoService.injectMultipleSchemas([realEstateSchema, breadcrumbSchema, faqSchema]);

      // Generate breadcrumbs for navigation
      this.breadcrumbs = [
@@ -213,6 +221,60 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
    }
  }

+  /**
+   * Generate dynamic FAQ based on commercial property listing data
+   * Provides AEO (Answer Engine Optimization) content
+   */
+  private generatePropertyFAQ(): Array<{ question: string; answer: string }> {
+    const faqs: Array<{ question: string; answer: string }> = [];
+
+    // FAQ 1: What type of property is this?
+    faqs.push({
+      question: 'What type of commercial property is this?',
+      answer: `This is a ${this.selectOptions.getCommercialProperty(this.listing.type)} property located in ${this.listing.location.name || this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}.`
+    });
+
+    // FAQ 2: What is the asking price?
+    if (this.listing.price) {
+      faqs.push({
+        question: 'What is the asking price for this property?',
+        answer: `The asking price for this commercial property is $${this.listing.price.toLocaleString()}.`
+      });
+    } else {
+      faqs.push({
+        question: 'What is the asking price for this property?',
+        answer: 'The asking price is available upon request. Please contact the seller for detailed pricing information.'
+      });
+    }
+
+    // FAQ 3: Where is the property located?
+    faqs.push({
+      question: 'Where is this commercial property located?',
+      answer: `The property is located in ${this.listing.location.name || this.listing.location.county}, ${this.selectOptions.getState(this.listing.location.state)}.${this.listing.location.street ? ' The exact address will be provided after initial contact.' : ''}`
+    });
+
+    // FAQ 4: How long has the property been listed?
+    const daysListed = this.getDaysListed();
+    faqs.push({
+      question: 'How long has this property been on the market?',
+      answer: `This property was listed on ${this.dateInserted()} and has been on the market for ${daysListed} ${daysListed === 1 ? 'day' : 'days'}.`
+    });
+
+    // FAQ 5: How can I schedule a viewing?
+    faqs.push({
+      question: 'How can I schedule a property viewing?',
+      answer: 'To schedule a viewing of this commercial property, please use the contact form above to get in touch with the listing agent. They will coordinate a convenient time for you to visit the property.'
+    });
+
+    // FAQ 6: What is the zoning for this property?
+    faqs.push({
+      question: 'What is this property suitable for?',
+      answer: `This ${this.selectOptions.getCommercialProperty(this.listing.type)} property is ideal for various commercial uses. Contact the seller for specific zoning information and permitted use details.`
+    });
+
+    return faqs;
+  }
+
  ngOnDestroy() {
    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
    this.seoService.clearStructuredData(); // Clean up SEO structured data
--- a/bizmatch/src/app/pages/details/details-user/details-user.component.html
+++ b/bizmatch/src/app/pages/details/details-user/details-user.component.html
@@ -11,9 +11,9 @@
      <div class="flex items-center space-x-4">
        <!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
        @if(user.hasProfile){
-        <img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" width="80" height="80" />
+        <img ngSrc="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" width="80" height="80" priority alt="Profile picture of {{ user.firstname }} {{ user.lastname }}" />
        } @else {
-        <img src="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" width="80" height="80" />
+        <img ngSrc="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" width="80" height="80" priority alt="Default profile picture" />
        }
        <div>
          <h1 class="text-2xl font-bold flex items-center">
@@ -32,7 +32,7 @@
          </p>
        </div>
        @if(user.hasCompanyLogo){
-        <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" width="44" height="56" />
+        <img ngSrc="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" width="44" height="56" alt="Company logo of {{ user.companyName }}" />
        }
        <!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
      </div>
@@ -130,9 +130,9 @@
        <div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/commercial-property', listing.slug || listing.id]">
          <div class="flex items-center space-x-4">
            @if (listing.imageOrder?.length>0){
-            <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="w-12 h-12 object-cover rounded" />
+            <img ngSrc="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="w-12 h-12 object-cover rounded" width="48" height="48" alt="Property image for {{ listing.title }}" />
            } @else {
-            <img src="assets/images/placeholder_properties.jpg" class="w-12 h-12 object-cover rounded" />
+            <img ngSrc="assets/images/placeholder_properties.jpg" class="w-12 h-12 object-cover rounded" width="48" height="48" alt="Property placeholder image" />
            }
            <div>
              <p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
--- a/bizmatch/src/app/pages/details/details-user/details-user.component.ts
+++ b/bizmatch/src/app/pages/details/details-user/details-user.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Observable } from 'rxjs';
@@ -18,7 +19,7 @@ import { formatPhoneNumber, map2User } from '../../../utils/utils';
@Component({
  selector: 'app-details-user',
  standalone: true,
-  imports: [SharedModule, BreadcrumbsComponent],
+  imports: [SharedModule, BreadcrumbsComponent, NgOptimizedImage],
  templateUrl: './details-user.component.html',
  styleUrl: '../details.scss',
 })
--- a/bizmatch/src/app/pages/home/home.component.html
+++ b/bizmatch/src/app/pages/home/home.component.html
@@ -1,12 +1,14 @@
 <header class="w-full flex justify-between items-center p-4 bg-white top-0 z-10 h-16 md:h-20">
-  <img src="assets/images/header-logo.png" alt="Logo" class="h-8 md:h-10 w-auto" />
+  <img src="/assets/images/header-logo.png" alt="Logo" class="h-8 md:h-10 w-auto" />
  <div class="hidden md:flex items-center space-x-4">
    @if(user){
    <a routerLink="/account" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Account</a>
    } @else {
    <!-- <a routerLink="/pricing" class="text-neutral-800">Pricing</a> -->
-    <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Log In</a>
-    <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white bg-primary-600 px-4 py-2 rounded">Sign Up</a>
+    <a routerLink="/login" [queryParams]="{ mode: 'login' }"
+      class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Log In</a>
+    <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="text-white bg-primary-600 px-4 py-2 rounded">Sign
+      Up</a>
    <!-- <a routerLink="/login" class="text-primary-500 hover:underline">Login/Register</a> -->
    }
  </div>
@@ -38,8 +40,7 @@
 <!-- 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="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">
    <div class="flex justify-center w-full">
      <!-- 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">
@@ -52,72 +53,74 @@

          <!-- 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">
-            <h1 class="text-[1.55rem] sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight drop-shadow-[0_2px_6px_rgba(0,0,0,0.55)]">Buy & Sell Businesses and Commercial Properties</h1>
+            <h1
+              class="text-[1.55rem] sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight drop-shadow-[0_2px_6px_rgba(0,0,0,0.55)]">
+              Buy & Sell Businesses and Commercial Properties</h1>

-            <p class="mt-3 sm:mt-4 text-base sm:text-lg md:text-xl lg:text-2xl font-medium text-white/90 drop-shadow-[0_1.5px_4px_rgba(0,0,0,0.6)]">Find profitable businesses for sale, commercial real estate, and franchise opportunities across the United States</p>
+            <p
+              class="mt-3 sm:mt-4 text-base sm:text-lg md:text-xl lg:text-2xl font-medium text-white/90 drop-shadow-[0_1.5px_4px_rgba(0,0,0,0.6)]">
+              Find profitable businesses for sale, commercial real estate, and franchise opportunities across the United
+              States</p>
          </div>
        </section>
        <!-- Restliche Anpassungen (Innenabstände, Button-Paddings etc.) bleiben wie im vorherigen Schritt -->
-        <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 }">
+        <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">
+          <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">
              <li class="w-[33%]">
-                <a
-                  (click)="changeTab('business')"
-                  [ngClass]="
+                <a (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"
-                >
-                  <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" />
+                  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">
+                  <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" />
                  <span>Businesses</span>
                </a>
              </li>
              @if ((numberOfCommercial$ | async) > 0) {
              <li class="w-[33%]">
-                <a
-                  (click)="changeTab('commercialProperty')"
-                  [ngClass]="
+                <a (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"
-                >
-                  <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" />
+                  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">
+                  <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" />
                  <span>Properties</span>
                </a>
              </li>
              }
              <li class="w-[33%]">
-                <a
-                  (click)="changeTab('broker')"
-                  [ngClass]="
+                <a (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"
-                >
-                  <img src="assets/images/icon_professionals.png" alt="Search business professionals and brokers" class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain bg-transparent" style="mix-blend-mode: darken;" />
+                  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">
+                  <img src="/assets/images/icon_professionals.png" alt="Search business professionals and brokers"
+                    class="tab-icon w-6 h-6 md:w-7 md:h-7 mr-1 md:mr-2 object-contain bg-transparent"
+                    style="mix-blend-mode: darken;" />
                  <span>Professionals</span>
                </a>
              </li>
            </ul>
          </div>
          } @if(criteria && !aiSearch){
-          <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="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">
                <select
                  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)"
-                  [ngClass]="{ 'placeholder-selected': criteria.types.length === 0 }"
-                >
+                  [ngModel]="criteria.types" (ngModelChange)="onTypesChange($event)"
+                  [ngClass]="{ 'placeholder-selected': criteria.types.length === 0 }">
                  <option [value]="[]">{{ getPlaceholderLabel() }}</option>
                  @for(type of getTypes(); track type){
                  <option [value]="type.value">{{ type.name }}</option>
@@ -131,21 +134,12 @@

            <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">
-                <ng-select
-                  class="custom md:border-none rounded-md md:rounded-none"
-                  [multiple]="false"
-                  [hideSelected]="true"
-                  [trackByFn]="trackByFn"
-                  [minTermLength]="2"
-                  [loading]="cityLoading"
-                  typeToSearchText="Please enter 2 or more characters"
-                  [typeahead]="cityInput$"
-                  [ngModel]="cityOrState"
-                  (ngModelChange)="setCityOrState($event)"
-                  placeholder="Enter City or State ..."
-                  groupBy="type"
-                >
-                  @for (city of cities$ | async; track city.id) { @let state = city.type==='city'?city.content.state:''; @let separator = city.type==='city'?' - ':'';
+                <ng-select class="custom md:border-none rounded-md md:rounded-none" [multiple]="false"
+                  [hideSelected]="true" [trackByFn]="trackByFn" [minTermLength]="2" [loading]="cityLoading"
+                  typeToSearchText="Please enter 2 or more characters" [typeahead]="cityInput$" [ngModel]="cityOrState"
+                  (ngModelChange)="setCityOrState($event)" placeholder="Enter City or State ..." groupBy="type">
+                  @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>
                  }
                </ng-select>
@@ -156,10 +150,8 @@
              <div class="relative max-sm:border border-neutral-300 rounded-md">
                <select
                  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"
-                  [ngClass]="{ 'placeholder-selected': !criteria.radius }"
-                >
+                  (ngModelChange)="onRadiusChange($event)" [ngModel]="criteria.radius"
+                  [ngClass]="{ 'placeholder-selected': !criteria.radius }">
                  <option [value]="null">City Radius</option>
                  @for(dist of selectOptions.distances; track dist){
                  <option [value]="dist.value">{{ dist.name }}</option>
@@ -173,12 +165,16 @@
            }
            <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
+                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>
                <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
+                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>
                <span>Search</span>
              </button>
@@ -196,4 +192,4 @@
    <app-faq [faqItems]="faqItems"></app-faq>
  </div>
 </main>
-<!-- ==== ANPASSUNGEN ENDE ==== -->
+<!-- ==== ANPASSUNGEN ENDE ==== -->
--- a/bizmatch/src/app/pages/home/home.component.ts
+++ b/bizmatch/src/app/pages/home/home.component.ts
@@ -24,7 +24,7 @@ import { map2User } from '../../utils/utils';
@Component({
  selector: 'app-home',
  standalone: true,
-  imports: [CommonModule, FormsModule, RouterModule, NgSelectModule, TooltipComponent, FaqComponent],
+  imports: [CommonModule, FormsModule, RouterModule, NgSelectModule, FaqComponent],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
 })
@@ -117,7 +117,7 @@ export class HomeComponent {
    private authService: AuthService,
    private filterStateService: FilterStateService,
    private seoService: SeoService,
-  ) {}
+  ) { }

  async ngOnInit() {
    // Flowbite is now initialized once in AppComponent
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html
@@ -15,12 +15,14 @@
      <!-- SEO-optimized heading -->
      <div class="mb-6">
        <h1 class="text-3xl md:text-4xl font-bold text-neutral-900 mb-2">Professional Business Brokers & Advisors</h1>
-        <p class="text-lg text-neutral-600">Connect with licensed business brokers, CPAs, attorneys, and other professionals across the United States.</p>
+        <p class="text-lg text-neutral-600">Connect with licensed business brokers, CPAs, attorneys, and other
+          professionals across the United States.</p>
      </div>

      <!-- Mobile Filter Button -->
      <div class="md:hidden mb-4">
-        <button (click)="openFilterModal()" class="w-full bg-primary-600 text-white py-3 px-4 rounded-lg flex items-center justify-center">
+        <button (click)="openFilterModal()"
+          class="w-full bg-primary-600 text-white py-3 px-4 rounded-lg flex items-center justify-center">
          <i class="fas fa-filter mr-2"></i>
          Filter Results
        </button>
@@ -31,25 +33,23 @@
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Professional Cards -->
        @for (user of users; track user) {
-        <div class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6 flex flex-col justify-between hover:shadow-2xl transition-all duration-300 hover:scale-[1.02]">
+        <div
+          class="bg-white rounded-lg drop-shadow-custom-bg-mobile md:drop-shadow-custom-bg p-6 flex flex-col justify-between hover:shadow-2xl transition-all duration-300 hover:scale-[1.02]">
          <div class="flex items-start space-x-4">
            @if(user.hasProfile){
            <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
-                 [alt]="altText.generateBrokerProfileAlt(user)"
-                 class="rounded-md w-20 h-26 object-cover"
-                 width="80"
-                 height="104" />
+              [alt]="altText.generateBrokerProfileAlt(user)" class="rounded-md w-20 h-26 object-cover" width="80"
+              height="104" />
            } @else {
-            <img src="assets/images/person_placeholder.jpg"
-                 alt="Default business broker placeholder profile photo"
-                 class="rounded-md w-20 h-26 object-cover"
-                 width="80"
-                 height="104" />
+            <img src="/assets/images/person_placeholder.jpg" alt="Default business broker placeholder profile photo"
+              class="rounded-md w-20 h-26 object-cover" width="80" height="104" />
            }
            <div class="flex-1">
              <p class="text-sm text-neutral-800 mb-2">{{ user.description }}</p>
              <h3 class="text-lg font-semibold">
-                {{ user.firstname }} {{ user.lastname }}<span class="bg-neutral-200 text-neutral-700 text-xs font-semibold px-2 py-1 rounded ml-4">{{ user.location?.name }} - {{ user.location?.state }}</span>
+                {{ user.firstname }} {{ user.lastname }}<span
+                  class="bg-neutral-200 text-neutral-700 text-xs font-semibold px-2 py-1 rounded ml-4">{{
+                  user.location?.name }} - {{ user.location?.state }}</span>
              </h3>
              <div class="flex items-center space-x-2 mt-2">
                <app-customer-sub-type [customerSubType]="user.customerSubType"></app-customer-sub-type>
@@ -61,18 +61,15 @@
          <div class="mt-4 flex justify-between items-center">
            @if(user.hasCompanyLogo){
            <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}"
-                 [alt]="altText.generateCompanyLogoAlt(user.companyName, user.firstname + ' ' + user.lastname)"
-                 class="w-8 h-10 object-contain"
-                 width="32"
-                 height="40" />
+              [alt]="altText.generateCompanyLogoAlt(user.companyName, user.firstname + ' ' + user.lastname)"
+              class="w-8 h-10 object-contain" width="32" height="40" />
            } @else {
-            <img src="assets/images/placeholder.png"
-                 alt="Default company logo placeholder"
-                 class="w-8 h-10 object-contain"
-                 width="32"
-                 height="40" />
+            <img src="/assets/images/placeholder.png" alt="Default company logo placeholder"
+              class="w-8 h-10 object-contain" width="32" height="40" />
            }
-            <button class="bg-success-500 hover:bg-success-600 text-white font-medium py-2 px-4 rounded-full flex items-center" [routerLink]="['/details-user', user.id]">
+            <button
+              class="bg-success-500 hover:bg-success-600 text-white font-medium py-2 px-4 rounded-full flex items-center"
+              [routerLink]="['/details-user', user.id]">
              View Full profile
              <i class="fas fa-arrow-right ml-2"></i>
            </button>
@@ -84,39 +81,33 @@
      <!-- Empty State -->
      <div class="w-full flex items-center flex-wrap justify-center gap-10 py-12">
        <div class="grid gap-4 w-60">
-          <svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161" fill="none">
+          <svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" width="154" height="161" viewBox="0 0 154 161"
+            fill="none">
            <path
              d="M0.0616455 84.4268C0.0616455 42.0213 34.435 7.83765 76.6507 7.83765C118.803 7.83765 153.224 42.0055 153.224 84.4268C153.224 102.42 147.026 118.974 136.622 132.034C122.282 150.138 100.367 161 76.6507 161C52.7759 161 30.9882 150.059 16.6633 132.034C6.25961 118.974 0.0616455 102.42 0.0616455 84.4268Z"
-              fill="#EEF2FF"
-            />
+              fill="#EEF2FF" />
            <path
              d="M96.8189 0.632498L96.8189 0.632384L96.8083 0.630954C96.2034 0.549581 95.5931 0.5 94.9787 0.5H29.338C22.7112 0.5 17.3394 5.84455 17.3394 12.4473V142.715C17.3394 149.318 22.7112 154.662 29.338 154.662H123.948C130.591 154.662 135.946 149.317 135.946 142.715V38.9309C135.946 38.0244 135.847 37.1334 135.648 36.2586L135.648 36.2584C135.117 33.9309 133.874 31.7686 132.066 30.1333C132.066 30.1331 132.065 30.1329 132.065 30.1327L103.068 3.65203C103.068 3.6519 103.067 3.65177 103.067 3.65164C101.311 2.03526 99.1396 0.995552 96.8189 0.632498Z"
-              fill="white"
-              stroke="#E5E7EB"
-            />
+              fill="white" stroke="#E5E7EB" />
            <ellipse cx="80.0618" cy="81" rx="28.0342" ry="28.0342" fill="#EEF2FF" />
            <path
              d="M99.2393 61.3061L99.2391 61.3058C88.498 50.5808 71.1092 50.5804 60.3835 61.3061C49.6423 72.0316 49.6422 89.4361 60.3832 100.162C71.109 110.903 88.4982 110.903 99.2393 100.162C109.965 89.4363 109.965 72.0317 99.2393 61.3061ZM105.863 54.6832C120.249 69.0695 120.249 92.3985 105.863 106.785C91.4605 121.171 68.1468 121.171 53.7446 106.785C39.3582 92.3987 39.3582 69.0693 53.7446 54.683C68.1468 40.2965 91.4605 40.2966 105.863 54.6832Z"
-              stroke="#E5E7EB"
-            />
-            <path d="M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z" stroke="#E5E7EB" />
+              stroke="#E5E7EB" />
+            <path
+              d="M110.782 119.267L102.016 110.492C104.888 108.267 107.476 105.651 109.564 102.955L118.329 111.729L110.782 119.267Z"
+              stroke="#E5E7EB" />
            <path
              d="M139.122 125.781L139.122 125.78L123.313 109.988C123.313 109.987 123.313 109.987 123.312 109.986C121.996 108.653 119.849 108.657 118.521 109.985L118.871 110.335L118.521 109.985L109.047 119.459C107.731 120.775 107.735 122.918 109.044 124.247L109.047 124.249L124.858 140.06C128.789 143.992 135.191 143.992 139.122 140.06C143.069 136.113 143.069 129.728 139.122 125.781Z"
-              fill="#A5B4FC"
-              stroke="#818CF8"
-            />
+              fill="#A5B4FC" stroke="#818CF8" />
            <path
              d="M83.185 87.2285C82.5387 87.2285 82.0027 86.6926 82.0027 86.0305C82.0027 83.3821 77.9987 83.3821 77.9987 86.0305C77.9987 86.6926 77.4627 87.2285 76.8006 87.2285C76.1543 87.2285 75.6183 86.6926 75.6183 86.0305C75.6183 80.2294 84.3831 80.2451 84.3831 86.0305C84.3831 86.6926 83.8471 87.2285 83.185 87.2285Z"
-              fill="#4F46E5"
-            />
+              fill="#4F46E5" />
            <path
              d="M93.3528 77.0926H88.403C87.7409 77.0926 87.2049 76.5567 87.2049 75.8946C87.2049 75.2483 87.7409 74.7123 88.403 74.7123H93.3528C94.0149 74.7123 94.5509 75.2483 94.5509 75.8946C94.5509 76.5567 94.0149 77.0926 93.3528 77.0926Z"
-              fill="#4F46E5"
-            />
+              fill="#4F46E5" />
            <path
              d="M71.5987 77.0925H66.6488C65.9867 77.0925 65.4507 76.5565 65.4507 75.8945C65.4507 75.2481 65.9867 74.7122 66.6488 74.7122H71.5987C72.245 74.7122 72.781 75.2481 72.781 75.8945C72.781 76.5565 72.245 77.0925 71.5987 77.0925Z"
-              fill="#4F46E5"
-            />
+              fill="#4F46E5" />
            <rect x="38.3522" y="21.5128" width="41.0256" height="2.73504" rx="1.36752" fill="#4F46E5" />
            <rect x="38.3522" y="133.65" width="54.7009" height="5.47009" rx="2.73504" fill="#A5B4FC" />
            <rect x="38.3522" y="29.7179" width="13.6752" height="2.73504" rx="1.36752" fill="#4F46E5" />
@@ -125,10 +116,14 @@
            <circle cx="67.0702" cy="31.0854" r="1.36752" fill="#4F46E5" />
          </svg>
          <div>
-            <h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There're no professionals here</h2>
-            <p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to <br />see professionals</p>
+            <h2 class="text-center text-black text-xl font-semibold leading-loose pb-2">There're no professionals here
+            </h2>
+            <p class="text-center text-black text-base font-normal leading-relaxed pb-4">Try changing your filters to
+              <br />see professionals</p>
            <div class="flex gap-3">
-              <button (click)="clearAllFilters()" class="w-full px-3 py-2 rounded-full border border-neutral-300 text-neutral-900 text-xs font-semibold leading-4">Clear Filter</button>
+              <button (click)="clearAllFilters()"
+                class="w-full px-3 py-2 rounded-full border border-neutral-300 text-neutral-900 text-xs font-semibold leading-4">Clear
+                Filter</button>
            </div>
          </div>
        </div>
@@ -143,4 +138,4 @@
      }
    </div>
  </div>
-</div>
+</div>
--- a/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
+++ b/bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts
@@ -25,7 +25,7 @@ import { assignProperties, resetUserListingCriteria } from '../../../utils/utils
@Component({
  selector: 'app-broker-listings',
  standalone: true,
-  imports: [CommonModule, FormsModule, RouterModule, NgOptimizedImage, PaginatorComponent, CustomerSubTypeComponent, BreadcrumbsComponent, SearchModalBrokerComponent],
+  imports: [CommonModule, FormsModule, RouterModule, PaginatorComponent, CustomerSubTypeComponent, BreadcrumbsComponent, SearchModalBrokerComponent],
  templateUrl: './broker-listings.component.html',
  styleUrls: ['./broker-listings.component.scss', '../../pages.scss'],
 })
@@ -118,7 +118,7 @@ export class BrokerListingsComponent implements OnInit, OnDestroy {
    this.search();
  }

-  reset() {}
+  reset() { }

  // New methods for filter actions
  clearAllFilters() {
--- a/bizmatch/src/app/pages/login/login.component.ts
+++ b/bizmatch/src/app/pages/login/login.component.ts
@@ -37,7 +37,8 @@ export class LoginComponent {
        user.subscriptionPlan = activeSubscription[0].metadata['plan'] === 'Broker Plan' ? 'broker' : 'professional';
        this.userService.saveGuaranteed(user);
      } else {
-        this.router.navigate([`/pricing`]);
+        // Pricing page removed - redirect to home
+        this.router.navigate([`/home`]);
        return;
      }
    }
--- a/bizmatch/src/app/pages/pricing/pricing.component.html
+++ b/bizmatch/src/app/pages/pricing/pricing.component.html
@@ -1,148 +0,0 @@
-<div class="container mx-auto px-4 py-16">
-  <h1 class="text-4xl font-bold text-center mb-12">Choose the Right Plan for Your Business</h1>
-
-  <div
-    [ngClass]="{
-      'grid gap-8 mx-auto': true,
-      'md:grid-cols-3 max-w-7xl': !user || !user.subscriptionPlan,
-      'md:grid-cols-2 max-w-4xl': user && user.subscriptionPlan
-    }"
-  >
-    @if(!user || !user.subscriptionPlan) {
-    <!-- Free Plan -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden flex flex-col h-full">
-      <div class="px-6 py-8 bg-gray-50 text-center border-b">
-        <h3 class="text-2xl font-semibold text-gray-700">Buyer & Seller</h3>
-        <p class="mt-4 text-gray-600">Commercial Properties</p>
-        <p class="mt-4 text-4xl font-bold text-gray-900">Free</p>
-        <p class="mt-2 text-gray-600">Forever</p>
-      </div>
-      <div class="px-6 py-8 flex-grow">
-        <ul class="text-sm text-gray-600">
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Create property listings
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Get early access to new listings
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Extended search functionality
-          </li>
-        </ul>
-      </div>
-      @if(!pricingOverview){
-      <div class="px-6 py-4 mt-auto">
-        <button (click)="register()" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Sign Up Now</button>
-      </div>
-      }
-    </div>
-    }
-
-    <!-- Professional Plan -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden flex flex-col h-full">
-      <div class="px-6 py-8 bg-blue-50 text-center border-b">
-        <h3 class="text-2xl font-semibold text-gray-700">Professional</h3>
-        <p class="mt-4 text-gray-600">CPA, Attorney, Title Company, etc.</p>
-        <p class="mt-4 text-4xl font-bold text-gray-900">$29</p>
-        <p class="mt-2 text-gray-600">per month</p>
-      </div>
-      <div class="px-6 py-8 flex-grow">
-        <ul class="text-sm text-gray-600">
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Professionals Directory listing
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            3-Month Free Trial
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Detailed visitor statistics
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            In-portal contact forms
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            One-month refund guarantee
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Premium support
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Price stability
-          </li>
-        </ul>
-      </div>
-      @if(!pricingOverview){
-      <div class="px-6 py-4 mt-auto">
-        <button (click)="register('price_1PpSkpDjmFBOcNBs9UDPgBos')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button>
-      </div>
-      }
-    </div>
-
-    <!-- Business Broker Plan -->
-    <div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-blue-500 flex flex-col h-full">
-      <div class="px-6 py-8 bg-blue-500 text-center border-b">
-        <h3 class="text-2xl font-semibold text-white">Business Broker</h3>
-        <p class="mt-4 text-blue-100">Create & Manage Listings</p>
-        <p class="mt-4 text-4xl font-bold text-white">$49</p>
-        <p class="mt-2 text-blue-100">per month</p>
-      </div>
-      <div class="px-6 py-8 flex-grow">
-        <ul class="text-sm text-gray-600">
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Create business listings
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Professionals Directory listing
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            3-Month Free Trial
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Detailed visitor statistics
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            In-portal contact forms
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            One-month refund guarantee
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Premium support
-          </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Price stability
-          </li>
-        </ul>
-      </div>
-      @if(!pricingOverview){
-      <div class="px-6 py-4 mt-auto">
-        <button (click)="register('price_1PpSmRDjmFBOcNBsaaSp2nk9')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button>
-      </div>
-      }
-    </div>
-  </div>
-
-  <div class="mt-16 text-center">
-    <h2 class="text-2xl font-semibold mb-4">Not sure which plan is right for you?</h2>
-    <p class="text-gray-600 mb-8">Contact our sales team for a personalized recommendation.</p>
-    <a routerLink="/emailUs" class="bg-blue-500 text-white rounded-full px-6 py-3 font-semibold hover:bg-blue-600 transition duration-300">Contact Sales</a>
-  </div>
-</div>
--- a/bizmatch/src/app/pages/pricing/pricing.component.scss
+++ b/bizmatch/src/app/pages/pricing/pricing.component.scss
@@ -1,11 +0,0 @@
-:host {
-  height: 100%;
-}
-
-// .container {
-//   background-image: url(../../../assets/images/index-bg.jpg), url(../../../assets/images/pricing-4.svg);
-//   //background-image: url(../../../assets/images/corpusChristiSkyline.jpg);
-//   background-size: cover;
-//   background-position: center;
-//   height: 100vh;
-// }
--- a/bizmatch/src/app/pages/pricing/pricing.component.ts
+++ b/bizmatch/src/app/pages/pricing/pricing.component.ts
@@ -1,103 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { StripeService } from 'ngx-stripe';
-import { switchMap } from 'rxjs';
-import { User } from '../../../../../bizmatch-server/src/models/db.model';
-import { Checkout, KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
-import { environment } from '../../../environments/environment';
-import { AuditService } from '../../services/audit.service';
-import { AuthService } from '../../services/auth.service';
-import { UserService } from '../../services/user.service';
-import { SharedModule } from '../../shared/shared/shared.module';
-import { map2User } from '../../utils/utils';
-
-@Component({
-  selector: 'app-pricing',
-  standalone: true,
-  imports: [SharedModule],
-  templateUrl: './pricing.component.html',
-  styleUrl: './pricing.component.scss',
-})
-export class PricingComponent {
-  private apiBaseUrl = environment.apiBaseUrl;
-  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
-  pricingOverview: boolean | undefined = this.activatedRoute.snapshot.data['pricingOverview'] as boolean | undefined;
-  keycloakUser: KeycloakUser;
-  user: User;
-  constructor(
-    private http: HttpClient,
-    private stripeService: StripeService,
-    private activatedRoute: ActivatedRoute,
-    private userService: UserService,
-    private router: Router,
-    private auditService: AuditService,
-    private authService: AuthService,
-  ) {}
-
-  async ngOnInit() {
-    const token = await this.authService.getToken();
-    this.keycloakUser = map2User(token);
-    if (this.keycloakUser) {
-      this.user = await this.userService.getByMail(this.keycloakUser.email);
-      const originalKeycloakUser = await this.userService.getKeycloakUser(this.keycloakUser.id);
-      const priceId = originalKeycloakUser.attributes && originalKeycloakUser.attributes['priceID'] ? originalKeycloakUser.attributes['priceID'][0] : null;
-      if (priceId) {
-        originalKeycloakUser.attributes['priceID'] = null;
-        await this.userService.updateKeycloakUser(originalKeycloakUser);
-      }
-      if (!this.user.subscriptionPlan) {
-        if (this.id === 'free' || priceId === 'free') {
-          this.user.subscriptionPlan = 'free';
-          await this.userService.saveGuaranteed(this.user);
-          this.router.navigate([`/account`]);
-        } else if (this.id || priceId) {
-          const base64PriceId = this.id ? this.id : priceId;
-          this.checkout({ priceId: atob(base64PriceId), email: this.keycloakUser.email, name: `${this.keycloakUser.firstName} ${this.keycloakUser.lastName}` });
-        }
-      }
-    } else {
-      this.pricingOverview = false;
-    }
-  }
-
-  async register(priceId?: string) {
-    if (this.keycloakUser) {
-      if (!priceId) {
-        this.user = await this.userService.getByMail(this.keycloakUser.email);
-        this.user.subscriptionPlan = 'free';
-        await this.userService.saveGuaranteed(this.user);
-        this.router.navigate([`/account`]);
-      } else {
-        this.checkout({ priceId: priceId, email: this.keycloakUser.email, name: `${this.keycloakUser.firstName} ${this.keycloakUser.lastName}` });
-      }
-    } else {
-      // if (priceId) {
-      //   this.keycloakService.register({
-      //     redirectUri: `${window.location.origin}/pricing/${btoa(priceId)}`,
-      //   });
-      // } else {
-      //   this.keycloakService.register({ redirectUri: `${window.location.origin}/pricing/free` });
-      // }
-    }
-  }
-
-  checkout(checkout: Checkout) {
-    // Check the server.js tab to see an example implementation
-    this.http
-      .post(`${this.apiBaseUrl}/bizmatch/payment/create-checkout-session`, checkout)
-      .pipe(
-        switchMap((session: any) => {
-          return this.stripeService.redirectToCheckout({ sessionId: session.id });
-        }),
-      )
-      .subscribe(result => {
-        // If `redirectToCheckout` fails due to a browser or network
-        // error, you should display the localized error message to your
-        // customer using `error.message`.
-        if (result.error) {
-          alert(result.error.message);
-        }
-      });
-  }
-}
--- a/bizmatch/src/app/pages/subscription/account/account.component.html
+++ b/bizmatch/src/app/pages/subscription/account/account.component.html
@@ -6,8 +6,10 @@
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="md:col-span-2">
          <label for="email" class="block text-sm font-medium text-gray-700">E-mail (required)</label>
-          <input type="email" id="email" name="email" [(ngModel)]="user.email" disabled class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
-          <p class="text-xs text-gray-500 mt-1">You can only modify your email by contacting us at support&#64;bizmatch.net</p>
+          <input type="email" id="email" name="email" [(ngModel)]="user.email" disabled
+            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
+          <p class="text-xs text-gray-500 mt-1">You can only modify your email by contacting us at
+            support&#64;bizmatch.net</p>
        </div>
        @if (isProfessional || (authService.isAdmin() | async)){
        <div class="flex flex-row items-center justify-around md:space-x-4">
@@ -16,20 +18,21 @@
            <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
              @if(user?.hasCompanyLogo){
              <img src="{{ companyLogoUrl }}" alt="Company logo" class="max-w-full max-h-full" />
-              <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('logo')">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
+              <div
+                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer"
+                (click)="deleteConfirm('logo')">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                  class="w-4 h-4 text-gray-600">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
              } @else {
-              <img src="assets/images/placeholder.png" class="max-w-full max-h-full" />
+              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" />
              }
            </div>
-            <button
-              type="button"
+            <button type="button"
              class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-              (click)="uploadCompanyLogo()"
-            >
+              (click)="uploadCompanyLogo()">
              Upload
            </button>
          </div>
@@ -38,20 +41,21 @@
            <div class="w-20 h-20 w-full rounded-md flex items-center justify-center relative">
              @if(user?.hasProfile){
              <img src="{{ profileUrl }}" alt="Profile picture" class="max-w-full max-h-full" />
-              <div class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer" (click)="deleteConfirm('profile')">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
+              <div
+                class="absolute top-[-0.5rem] right-[0rem] bg-white rounded-full p-1 drop-shadow-custom-bg hover:cursor-pointer"
+                (click)="deleteConfirm('profile')">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
+                  class="w-4 h-4 text-gray-600">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
              } @else {
-              <img src="assets/images/placeholder.png" class="max-w-full max-h-full" />
+              <img src="/assets/images/placeholder.png" class="max-w-full max-h-full" />
              }
            </div>
-            <button
-              type="button"
+            <button type="button"
              class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-              (click)="uploadProfile()"
-            >
+              (click)="uploadProfile()">
              Upload
            </button>
          </div>
@@ -74,11 +78,13 @@
        @if ((authService.isAdmin() | async) && !id){
        <div>
          <label for="customerType" class="block text-sm font-medium text-gray-700">User Type</label>
-          <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
+          <span
+            class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
        </div>

        }@else{
-        <app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
+        <app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType"
+          [options]="customerTypeOptions"></app-validated-select>
        } @if (isProfessional){
        <!-- <div>
          <label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>
@@ -86,7 +92,8 @@
            <option *ngFor="let subType of customerSubTypes" [value]="subType">{{ subType | titlecase }}</option>
          </select>
        </div> -->
-        <app-validated-select label="Professional Type" name="customerSubType" [(ngModel)]="user.customerSubType" [options]="customerSubTypeOptions"></app-validated-select>
+        <app-validated-select label="Professional Type" name="customerSubType" [(ngModel)]="user.customerSubType"
+          [options]="customerSubTypeOptions"></app-validated-select>
        }
      </div>
      @if (isProfessional){
@@ -99,8 +106,10 @@
          <label for="description" class="block text-sm font-medium text-gray-700">Describe yourself</label>
          <input type="text" id="description" name="description" [(ngModel)]="user.description" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
        </div> -->
-        <app-validated-input label="Company Name" name="companyName" [(ngModel)]="user.companyName"></app-validated-input>
-        <app-validated-input label="Describe Yourself" name="description" [(ngModel)]="user.description"></app-validated-input>
+        <app-validated-input label="Company Name" name="companyName"
+          [(ngModel)]="user.companyName"></app-validated-input>
+        <app-validated-input label="Describe Yourself" name="description"
+          [(ngModel)]="user.description"></app-validated-input>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -116,11 +125,14 @@
          <label for="companyLocation" class="block text-sm font-medium text-gray-700">Company Location</label>
          <input type="text" id="companyLocation" name="companyLocation" [(ngModel)]="user.companyLocation" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
        </div> -->
-        <app-validated-input label="Your Phone Number" name="phoneNumber" [(ngModel)]="user.phoneNumber" mask="(000) 000-0000"></app-validated-input>
-        <app-validated-input label="Company Website" name="companyWebsite" [(ngModel)]="user.companyWebsite"></app-validated-input>
+        <app-validated-input label="Your Phone Number" name="phoneNumber" [(ngModel)]="user.phoneNumber"
+          mask="(000) 000-0000"></app-validated-input>
+        <app-validated-input label="Company Website" name="companyWebsite"
+          [(ngModel)]="user.companyWebsite"></app-validated-input>
        <!-- <app-validated-input label="Company Location" name="companyLocation" [(ngModel)]="user.companyLocation"></app-validated-input> -->
        <!-- <app-validated-city label="Company Location" name="location" [(ngModel)]="user.location"></app-validated-city> -->
-        <app-validated-location label="Company Location" name="location" [(ngModel)]="user.location"></app-validated-location>
+        <app-validated-location label="Company Location" name="location"
+          [(ngModel)]="user.location"></app-validated-location>
      </div>

      <!-- <div>
@@ -128,21 +140,21 @@
        <quill-editor [(ngModel)]="user.companyOverview" name="companyOverview" [modules]="quillModules"></quill-editor>
      </div> -->
      <div>
-        <app-validated-quill label="Company Overview" name="companyOverview" [(ngModel)]="user.companyOverview"></app-validated-quill>
+        <app-validated-quill label="Company Overview" name="companyOverview"
+          [(ngModel)]="user.companyOverview"></app-validated-quill>
      </div>
      <div>
        <!-- <label for="offeredServices" class="block text-sm font-medium text-gray-700">Services We Offer</label>
        <quill-editor [(ngModel)]="user.offeredServices" name="offeredServices" [modules]="quillModules"></quill-editor> -->
-        <app-validated-quill label="Services We Offer" name="offeredServices" [(ngModel)]="user.offeredServices"></app-validated-quill>
+        <app-validated-quill label="Services We Offer" name="offeredServices"
+          [(ngModel)]="user.offeredServices"></app-validated-quill>
      </div>

      <div>
        <h3 class="text-lg font-medium text-gray-700 mb-2 relative w-fit">
          Areas We Serve @if(getValidationMessage('areasServed')){
-          <div
-            [attr.data-tooltip-target]="tooltipTargetAreasServed"
-            class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
-          >
+          <div [attr.data-tooltip-target]="tooltipTargetAreasServed"
+            class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer">
            !
          </div>
          <app-tooltip [id]="tooltipTargetAreasServed" [text]="getValidationMessage('areasServed')"></app-tooltip>
@@ -159,19 +171,25 @@
        @for (areasServed of user.areasServed; track areasServed; let i=$index){
        <div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
          <div class="col-span-6">
-            <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="areasServed.state" (ngModelChange)="setState(i, $event)" name="areasServed_state{{ i }}"> </ng-select>
+            <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value"
+              [(ngModel)]="areasServed.state" (ngModelChange)="setState(i, $event)" name="areasServed_state{{ i }}">
+            </ng-select>
          </div>
          <div class="col-span-5">
            <!-- <input type="text" id="county{{ i }}" name="county{{ i }}" [(ngModel)]="areasServed.county" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" /> -->
-            <app-validated-county name="county{{ i }}" [(ngModel)]="areasServed.county" labelClasses="text-gray-900 font-medium" [state]="areasServed.state" [readonly]="!areasServed.state"></app-validated-county>
+            <app-validated-county name="county{{ i }}" [(ngModel)]="areasServed.county"
+              labelClasses="text-gray-900 font-medium" [state]="areasServed.state"
+              [readonly]="!areasServed.state"></app-validated-county>
          </div>
          <div class="col-span-1">
-            <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8" (click)="removeArea(i)">-</button>
+            <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8"
+              (click)="removeArea(i)">-</button>
          </div>
        </div>
        }
        <div class="mt-2">
-          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8" (click)="addArea()">+</button>
+          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8"
+            (click)="addArea()">+</button>

          <span class="text-sm text-gray-500 ml-2">[Add more Areas or remove existing ones.]</span>
        </div>
@@ -180,10 +198,8 @@
      <div>
        <h3 class="text-lg font-medium text-gray-700 mb-2 relative">
          Licensed In@if(getValidationMessage('licensedIn')){
-          <div
-            [attr.data-tooltip-target]="tooltipTargetLicensed"
-            class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
-          >
+          <div [attr.data-tooltip-target]="tooltipTargetLicensed"
+            class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer">
            !
          </div>
          <app-tooltip [id]="tooltipTargetLicensed" [text]="getValidationMessage('licensedIn')"></app-tooltip>
@@ -200,22 +216,20 @@
        @for (licensedIn of user.licensedIn; track licensedIn; let i=$index){
        <div class="grid grid-cols-12 md:gap-4 gap-1 mb-3 md:mb-1">
          <div class="col-span-6">
-            <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="licensedIn.state" name="licensedIn_state{{ i }}"> </ng-select>
+            <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="licensedIn.state"
+              name="licensedIn_state{{ i }}"> </ng-select>
          </div>
          <div class="col-span-5">
-            <input
-              type="text"
-              id="licenseNumber{{ i }}"
-              name="licenseNumber{{ i }}"
-              [(ngModel)]="licensedIn.registerNo"
-              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-            />
+            <input type="text" id="licenseNumber{{ i }}" name="licenseNumber{{ i }}" [(ngModel)]="licensedIn.registerNo"
+              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
          </div>
-          <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8" (click)="removeLicence(i)">-</button>
+          <button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md h-[42px] w-8"
+            (click)="removeLicence(i)">-</button>
        </div>
        }
        <div class="mt-2">
-          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8" (click)="addLicence()">+</button>
+          <button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2 h-[42px] w-8"
+            (click)="addLicence()">+</button>
          <span class="text-sm text-gray-500 ml-2">[Add more licenses or remove existing ones.]</span>
        </div>
      </div>
@@ -231,7 +245,9 @@
      </div>

      <div class="flex justify-start">
-        <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" (click)="updateProfile(user)">
+        <button type="submit"
+          class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          (click)="updateProfile(user)">
          Update Profile
        </button>
      </div>
@@ -314,5 +330,6 @@
  </div>
  }
 </div>
-<app-image-crop-and-upload [uploadParams]="uploadParams" (uploadFinished)="uploadFinished($event)"></app-image-crop-and-upload>
-<app-confirmation></app-confirmation>
+<app-image-crop-and-upload [uploadParams]="uploadParams"
+  (uploadFinished)="uploadFinished($event)"></app-image-crop-and-upload>
+<app-confirmation></app-confirmation>
--- a/bizmatch/src/app/pages/subscription/account/account.component.ts
+++ b/bizmatch/src/app/pages/subscription/account/account.component.ts
@@ -39,16 +39,12 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
  imports: [
    SharedModule,
    QuillModule,
-    NgxCurrencyDirective,
    NgSelectModule,
-    ImageCropperComponent,
    ConfirmationComponent,
    ImageCropAndUploadComponent,
-    MessageComponent,
    ValidatedInputComponent,
    ValidatedSelectComponent,
    ValidatedQuillComponent,
-    ValidatedCityComponent,
    TooltipComponent,
    ValidatedCountyComponent,
    ValidatedLocationComponent,
@@ -95,7 +91,7 @@ export class AccountComponent {
    private datePipe: DatePipe,
    private router: Router,
    public authService: AuthService,
-  ) {}
+  ) { }
  async ngOnInit() {
    // Flowbite is now initialized once in AppComponent
    if (this.id) {
@@ -162,7 +158,7 @@ export class AccountComponent {
  ngOnDestroy() {
    this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
  }
-  printInvoice(invoice: Invoice) {}
+  printInvoice(invoice: Invoice) { }

  async updateProfile(user: User) {
    try {
--- a/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
+++ b/bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
@@ -37,17 +37,14 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
  standalone: true,
  imports: [
    SharedModule,
-    ArrayToStringPipe,
    DragDropModule,
    QuillModule,
-    NgxCurrencyDirective,
    NgSelectModule,
    ValidatedInputComponent,
    ValidatedQuillComponent,
    ValidatedNgSelectComponent,
    ValidatedPriceComponent,
    ValidatedTextareaComponent,
-    ValidatedCityComponent,
    ValidatedLocationComponent,
  ],
  providers: [],
--- a/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts
+++ b/bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts
@@ -41,12 +41,9 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
  standalone: true,
  imports: [
    SharedModule,
-    ArrayToStringPipe,
    DragDropModule,
    QuillModule,
-    NgxCurrencyDirective,
    NgSelectModule,
-    ImageCropperComponent,
    ConfirmationComponent,
    DragDropMixedComponent,
    ValidatedInputComponent,
@@ -54,7 +51,6 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
    ValidatedNgSelectComponent,
    ValidatedPriceComponent,
    ValidatedLocationComponent,
-    ValidatedCityComponent,
    ImageCropAndUploadComponent,
  ],
  providers: [],
--- a/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.ts
+++ b/bizmatch/src/app/pages/subscription/my-listing/my-listing.component.ts
@@ -15,7 +15,7 @@ import { map2User } from '../../../utils/utils';
@Component({
  selector: 'app-my-listing',
  standalone: true,
-  imports: [SharedModule, ConfirmationComponent, MessageComponent],
+  imports: [SharedModule, ConfirmationComponent],
  providers: [],
  templateUrl: './my-listing.component.html',
  styleUrl: './my-listing.component.scss',
@@ -45,7 +45,7 @@ export class MyListingComponent {
    private messageService: MessageService,
    private confirmationService: ConfirmationService,
    private authService: AuthService,
-  ) {}
+  ) { }

  async ngOnInit() {
    const token = await this.authService.getToken();
--- a/bizmatch/src/app/services/seo.service.ts
+++ b/bizmatch/src/app/services/seo.service.ts
@@ -133,9 +133,18 @@ export class SeoService {
      'description': listing.description,
      'image': listing.images || [],
      'url': `${this.baseUrl}/business/${urlSlug}`,
-      'offers': {
+      'brand': {
+        '@type': 'Brand',
+        'name': listing.businessName
+      },
+      'category': listing.category || 'Business'
+    };
+
+    // Only include offers if askingPrice is available
+    if (listing.askingPrice && listing.askingPrice > 0) {
+      schema['offers'] = {
        '@type': 'Offer',
-        'price': listing.askingPrice,
+        'price': listing.askingPrice.toString(),
        'priceCurrency': 'USD',
        'availability': 'https://schema.org/InStock',
        'url': `${this.baseUrl}/business/${urlSlug}`,
@@ -145,13 +154,25 @@ export class SeoService {
          'name': this.siteName,
          'url': this.baseUrl
        }
-      },
-      'brand': {
-        '@type': 'Brand',
-        'name': listing.businessName
-      },
-      'category': listing.category || 'Business'
-    };
+      };
+    } else {
+      // For listings without a price, use PriceSpecification with "Contact for price"
+      schema['offers'] = {
+        '@type': 'Offer',
+        'priceCurrency': 'USD',
+        'availability': 'https://schema.org/InStock',
+        'url': `${this.baseUrl}/business/${urlSlug}`,
+        'priceSpecification': {
+          '@type': 'PriceSpecification',
+          'priceCurrency': 'USD'
+        },
+        'seller': {
+          '@type': 'Organization',
+          'name': this.siteName,
+          'url': this.baseUrl
+        }
+      };
+    }

    // Add aggregateRating with placeholder data
    schema['aggregateRating'] = {
@@ -271,7 +292,7 @@ export class SeoService {
   * Generate RealEstateListing schema for commercial property
   */
  generateRealEstateListingSchema(property: any): object {
-    const schema = {
+    const schema: any = {
      '@context': 'https://schema.org',
      '@type': 'RealEstateListing',
      'name': property.propertyName || `${property.propertyType} in ${property.city}`,
@@ -290,19 +311,36 @@ export class SeoService {
        '@type': 'GeoCoordinates',
        'latitude': property.latitude,
        'longitude': property.longitude
-      } : undefined,
-      'offers': {
+      } : undefined
+    };
+
+    // Only include offers with price if askingPrice is available
+    if (property.askingPrice && property.askingPrice > 0) {
+      schema['offers'] = {
        '@type': 'Offer',
-        'price': property.askingPrice,
+        'price': property.askingPrice.toString(),
        'priceCurrency': 'USD',
        'availability': 'https://schema.org/InStock',
+        'url': `${this.baseUrl}/details-commercial-property/${property.id}`,
        'priceSpecification': {
          '@type': 'PriceSpecification',
-          'price': property.askingPrice,
+          'price': property.askingPrice.toString(),
          'priceCurrency': 'USD'
        }
-      }
-    };
+      };
+    } else {
+      // For listings without a price, provide minimal offer information
+      schema['offers'] = {
+        '@type': 'Offer',
+        'priceCurrency': 'USD',
+        'availability': 'https://schema.org/InStock',
+        'url': `${this.baseUrl}/details-commercial-property/${property.id}`,
+        'priceSpecification': {
+          '@type': 'PriceSpecification',
+          'priceCurrency': 'USD'
+        }
+      };
+    }

    // Add property-specific details
    if (property.squareFootage) {
--- a/bizmatch/src/build.ts
+++ b/bizmatch/src/build.ts
@@ -1,6 +1,6 @@
 // Build information, automatically generated by `the_build_script` :zwinkern:
 const build = {
-    timestamp: "GER: 02.01.2026 23:17 | TX: 01/02/2026 4:17 PM"
+    timestamp: "GER: 03.01.2026 13:12 | TX: 01/03/2026 6:12 AM"
 };

 export default build;
--- a/bizmatch/src/environments/environment.prod.ts
+++ b/bizmatch/src/environments/environment.prod.ts
@@ -4,7 +4,7 @@ export const environment = environment_base;
 environment.production = true;
 environment.apiBaseUrl = 'https://api.bizmatch.net';
 environment.mailinfoUrl = 'https://www.bizmatch.net';
-environment.imageBaseUrl = 'https://www.bizmatch.net';
+environment.imageBaseUrl = 'https://api.bizmatch.net';

 environment.POSTHOG_KEY = 'phc_eUIcIq0UPVzEDtZLy78klKhGudyagBz3goDlKx8SQFe';
 environment.POSTHOG_HOST = 'https://eu.i.posthog.com';
--- a/bizmatch/src/environments/environment.ts
+++ b/bizmatch/src/environments/environment.ts
@@ -2,4 +2,4 @@ import { environment_base } from './environment.base';

 export const environment = environment_base;
 environment.mailinfoUrl = 'http://localhost:4200';
-environment.imageBaseUrl = 'http://localhost:4200';
+environment.imageBaseUrl = 'http://localhost:3001';
--- a/bizmatch/src/index.html
+++ b/bizmatch/src/index.html
@@ -1,63 +1,67 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Bizmatch - Find Business for sale</title>
-    <meta name="description" content="Find or Sell Businesses and Restaurants" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

-    <!-- Mobile App & Theme Meta Tags -->
-    <meta name="theme-color" content="#0066cc" />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-    <meta name="apple-mobile-web-app-title" content="BizMatch" />
-    <meta name="application-name" content="BizMatch" />
-    <meta name="msapplication-TileColor" content="#0066cc" />
+<head>
+  <meta charset="utf-8" />
+  <title>Bizmatch - Find Business for sale</title>
+  <meta name="description" content="Find or Sell Businesses and Restaurants" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

-    <!-- Resource Hints for Performance -->
-    <!-- Google Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
-    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
+  <!-- Mobile App & Theme Meta Tags -->
+  <meta name="theme-color" content="#0066cc" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-title" content="BizMatch" />
+  <meta name="application-name" content="BizMatch" />
+  <meta name="msapplication-TileColor" content="#0066cc" />

-    <!-- Image CDN -->
-    <link rel="preconnect" href="https://dev.bizmatch.net" crossorigin />
-    <link rel="dns-prefetch" href="https://dev.bizmatch.net" />
+  <!-- Resource Hints for Performance -->
+  <!-- Google Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
+  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

-    <!-- Firebase Services -->
-    <link rel="preconnect" href="https://firebase.google.com" />
-    <link rel="preconnect" href="https://firebasestorage.googleapis.com" />
-    <link rel="dns-prefetch" href="https://firebasestorage.googleapis.com" />
-    <link rel="dns-prefetch" href="https://firebaseapp.com" />
+  <!-- Image CDN -->
+  <link rel="preconnect" href="https://dev.bizmatch.net" crossorigin />
+  <link rel="dns-prefetch" href="https://dev.bizmatch.net" />

-    <!-- Preload critical assets -->
-    <link rel="preload" as="image" href="assets/images/header-logo.png" type="image/png" />
+  <!-- Firebase Services -->
+  <link rel="preconnect" href="https://firebase.google.com" />
+  <link rel="preconnect" href="https://firebasestorage.googleapis.com" />
+  <link rel="dns-prefetch" href="https://firebasestorage.googleapis.com" />
+  <link rel="dns-prefetch" href="https://firebaseapp.com" />

-    <!-- Prefetch common assets -->
-    <link rel="prefetch" as="image" href="assets/images/business_logo.png" />
-    <link rel="prefetch" as="image" href="assets/images/properties_logo.png" />
-    <link rel="prefetch" as="image" href="assets/images/placeholder.png" />
-    <link rel="prefetch" as="image" href="assets/images/person_placeholder.jpg" />
-    <meta name="robots" content="index, follow" />
-    <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
-    <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
-    <meta property="og:locale" content="en_US" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="front-page - BizMatch" />
-    <meta property="og:description" content="We are dedicated to providing a simple to use way for people in business to get in contact with each other." />
-    <meta property="og:site_name" content="BizMatch" />
-    <meta property="article:modified_time" content="2016-11-17T15:57:10+00:00" />
-    <meta property="og:image:width" content="1200" />
-    <meta property="og:image:height" content="630" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <base href="/" />
-    <link rel="icon" href="assets/cropped-Favicon-32x32.png" sizes="32x32" />
-    <link rel="icon" href="assets/cropped-Favicon-192x192.png" sizes="192x192" />
-    <link rel="apple-touch-icon" href="assets/cropped-Favicon-180x180.png" />
-  </head>
-  <body class="flex flex-col min-h-screen">
-    <app-root></app-root>
-  </body>
-</html>
+  <!-- Preload critical assets -->
+  <link rel="preload" as="image" href="/assets/images/header-logo.png" type="image/png" />
+
+  <!-- Prefetch common assets -->
+  <link rel="prefetch" as="image" href="/assets/images/business_logo.png" />
+  <link rel="prefetch" as="image" href="/assets/images/properties_logo.png" />
+  <link rel="prefetch" as="image" href="/assets/images/placeholder.png" />
+  <link rel="prefetch" as="image" href="/assets/images/person_placeholder.jpg" />
+  <meta name="robots" content="index, follow" />
+  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+  <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="front-page - BizMatch" />
+  <meta property="og:description"
+    content="We are dedicated to providing a simple to use way for people in business to get in contact with each other." />
+  <meta property="og:site_name" content="BizMatch" />
+  <meta property="article:modified_time" content="2016-11-17T15:57:10+00:00" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <base href="/" />
+  <link rel="icon" href="/assets/cropped-Favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" href="/assets/cropped-Favicon-192x192.png" sizes="192x192" />
+  <link rel="apple-touch-icon" href="/assets/cropped-Favicon-180x180.png" />
+</head>
+
+<body class="flex flex-col min-h-screen">
+  <app-root></app-root>
+</body>
+
+</html>
--- a/bizmatch/src/styles.scss
+++ b/bizmatch/src/styles.scss
@@ -1,31 +1,34 @@
-// @import 'primeng/resources/primeng.css';
-// @import 'primeicons/primeicons.css';
-@import '@ng-select/ng-select/themes/default.theme.css';
-// @import 'primeflex/primeflex.css';
-@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
-// @import 'primeng/resources/themes/lara-light-blue/theme.css';
-@import '@fortawesome/fontawesome-free/css/all.min.css';
+// Use @tailwind directives instead of @import both to silence deprecation warnings
+// and because it's the recommended Tailwind CSS syntax
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// External CSS imports - these URL imports don't trigger deprecation warnings
+@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
+
+// Local CSS files loaded as CSS (not SCSS) to avoid @import deprecation
+// Note: These are loaded via angular.json styles array is the preferred approach,
+// but for now we keep them here for simplicity
+@import '@ng-select/ng-select/themes/default.theme.css';

-// In Ihrer src/styles.css Datei:
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import 'ngx-sharebuttons/themes/default';
-/* styles.scss */
-@import 'leaflet/dist/leaflet.css';
 :root {
  --text-color-secondary: rgba(255, 255, 255);
  --wrapper-width: 1491px;
  // --secondary-color: #ffffff; /* Setzt die secondary Farbe auf weiß */
 }
+
 .p-button.p-button-secondary.p-button-outlined {
  color: #ffffff;
 }
+
 html,
 body,
 app-root {
  margin: 0;
  height: 100%;
+
  &:hover a {
    cursor: pointer;
  }
@@ -67,11 +70,13 @@ textarea {
 // }

 main {
-  flex: 1 0 auto; /* Füllt den verfügbaren Platz */
+  flex: 1 0 auto;
+  /* Füllt den verfügbaren Platz */
 }

 footer {
-  flex-shrink: 0; /* Verhindert Schrumpfen */
+  flex-shrink: 0;
+  /* Verhindert Schrumpfen */
 }

 *:focus,
@@ -103,14 +108,17 @@ p-menubarsub ul {
  height: 100%;
  margin: auto;
 }
+
 .p-editor-container .ql-toolbar {
  background: #f9fafb;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
 }
+
 .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
  margin-right: 0 !important;
 }
+
 input::placeholder,
 textarea::placeholder {
  color: #999 !important;
@@ -131,4 +139,4 @@ textarea::placeholder {
  /* Optional: Anpassen der Marker-Icon-Größe */
  width: 25px;
  height: 41px;
-}
+}