aknuth
/
bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

comment app-faq

This commit is contained in:
Andreas Knuth 2026-02-02 09:30:26 -06:00
parent e8f493558f
commit 152304aa71
1 changed files with 61 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
bizmatch/src/app/pages/home/home.component.html
View File

@ -5,10 +5,8 @@
<a routerLink="/account" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Account</a> <a routerLink="/account" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Account</a>
} @else { } @else {
<!-- <a routerLink="/pricing" class="text-neutral-800">Pricing</a> --> <!-- <a routerLink="/pricing" class="text-neutral-800">Pricing</a> -->
<a routerLink="/login" [queryParams]="{ mode: 'login' }" <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-primary-600 border border-primary-600 px-3 py-2 rounded">Log In</a>
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: '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> --> <!-- <a routerLink="/login" class="text-primary-500 hover:underline">Login/Register</a> -->
} }
</div> </div>
@ -40,7 +38,8 @@
<!-- 1. px-4 für <main> (vorher px-2 sm:px-4) --> <!-- 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"> <main class="flex flex-col items-center justify-center px-4 w-full flex-grow">
<div <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"> <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 --> <!-- 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"> <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">
@ -53,74 +52,79 @@
<!-- 2) Textblock --> <!-- 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"> <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 <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>
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 <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)]">
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
Find profitable businesses for sale, commercial real estate, and franchise opportunities across the United </p>
States</p>
</div> </div>
</section> </section>
<!-- Restliche Anpassungen (Innenabstände, Button-Paddings etc.) bleiben wie im vorherigen Schritt --> <!-- Restliche Anpassungen (Innenabstände, Button-Paddings etc.) bleiben wie im vorherigen Schritt -->
<div <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 }">
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){ @if(!aiSearch){
<div <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">
class="text-sm lg:text-base mb-1 text-center text-neutral-500 border-neutral-200 dark:text-neutral-400 dark:border-neutral-700 flex justify-between">
<ul class="flex flex-wrap -mb-px w-full"> <ul class="flex flex-wrap -mb-px w-full">
<li class="w-[33%]"> <li class="w-[33%]">
<a (click)="changeTab('business')" [ngClass]=" <a
(click)="changeTab('business')"
[ngClass]="
activeTabAction === 'business' activeTabAction === 'business'
? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500'] ? ['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'] : ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
" "
class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"> class="tab-link 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" /> <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> <span>Businesses</span>
</a> </a>
</li> </li>
@if ((numberOfCommercial$ | async) > 0) { @if ((numberOfCommercial$ | async) > 0) {
<li class="w-[33%]"> <li class="w-[33%]">
<a (click)="changeTab('commercialProperty')" [ngClass]=" <a
(click)="changeTab('commercialProperty')"
[ngClass]="
activeTabAction === 'commercialProperty' activeTabAction === 'commercialProperty'
? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500'] ? ['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'] : ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
" "
class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"> class="tab-link 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" /> <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> <span>Properties</span>
</a> </a>
</li> </li>
} }
<li class="w-[33%]"> <li class="w-[33%]">
<a (click)="changeTab('broker')" [ngClass]=" <a
(click)="changeTab('broker')"
[ngClass]="
activeTabAction === 'broker' activeTabAction === 'broker'
? ['text-primary-600', 'border-primary-600', 'active', 'dark:text-primary-500', 'dark:border-primary-500'] ? ['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'] : ['border-transparent', 'hover:text-neutral-600', 'hover:border-neutral-300', 'dark:hover:text-neutral-300']
" "
class="tab-link hover:cursor-pointer inline-flex items-center justify-center px-1 py-2 md:p-4 border-b-2 rounded-t-lg"> class="tab-link 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" >
<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" 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;" /> style="mix-blend-mode: darken"
/>
<span>Professionals</span> <span>Professionals</span>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
} @if(criteria && !aiSearch){ } @if(criteria && !aiSearch){
<div <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">
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="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"> <div class="relative max-sm:border border-neutral-300 rounded-md">
<select <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]" 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)" [ngModel]="criteria.types"
[ngClass]="{ 'placeholder-selected': criteria.types.length === 0 }"> (ngModelChange)="onTypesChange($event)"
[ngClass]="{ 'placeholder-selected': criteria.types.length === 0 }"
>
<option [value]="[]">{{ getPlaceholderLabel() }}</option> <option [value]="[]">{{ getPlaceholderLabel() }}</option>
@for(type of getTypes(); track type){ @for(type of getTypes(); track type){
<option [value]="type.value">{{ type.name }}</option> <option [value]="type.value">{{ type.name }}</option>
@ -134,12 +138,21 @@
<div class="md:flex-auto md:w-36 flex-grow md:border-r border-neutral-300 mb-2 md:mb-0"> <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"> <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" <ng-select
[hideSelected]="true" [trackByFn]="trackByFn" [minTermLength]="2" [loading]="cityLoading" class="custom md:border-none rounded-md md:rounded-none"
typeToSearchText="Please enter 2 or more characters" [typeahead]="cityInput$" [ngModel]="cityOrState" [multiple]="false"
(ngModelChange)="setCityOrState($event)" placeholder="Enter City or State ..." groupBy="type"> [hideSelected]="true"
@for (city of cities$ | async; track city.id) { @let state = city.type==='city'?city.content.state:''; [trackByFn]="trackByFn"
@let separator = city.type==='city'?' - ':''; [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-option [value]="city">{{ city.content.name }}{{ separator }}{{ state }}</ng-option>
} }
</ng-select> </ng-select>
@ -150,8 +163,10 @@
<div class="relative max-sm:border border-neutral-300 rounded-md"> <div class="relative max-sm:border border-neutral-300 rounded-md">
<select <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]" 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" (ngModelChange)="onRadiusChange($event)"
[ngClass]="{ 'placeholder-selected': !criteria.radius }"> [ngModel]="criteria.radius"
[ngClass]="{ 'placeholder-selected': !criteria.radius }"
>
<option [value]="null">City Radius</option> <option [value]="null">City Radius</option>
@for(dist of selectOptions.distances; track dist){ @for(dist of selectOptions.distances; track dist){
<option [value]="dist.value">{{ dist.name }}</option> <option [value]="dist.value">{{ dist.name }}</option>
@ -165,16 +180,12 @@
} }
<div class="bg-primary-500 hover:bg-primary-600 max-sm:rounded-md search-button"> <div class="bg-primary-500 hover:bg-primary-600 max-sm:rounded-md search-button">
@if( numberOfResults$){ @if( numberOfResults$){
<button <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()">
class="w-full h-full text-white font-bold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[52px] flex items-center justify-center gap-2"
(click)="search()">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<span>Search {{ numberOfResults$ | async }}</span> <span>Search {{ numberOfResults$ | async }}</span>
</button> </button>
}@else { }@else {
<button <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()">
class="w-full h-full text-white font-bold py-2 px-4 md:py-3 md:px-6 focus:outline-none rounded-md md:rounded-none min-h-[52px] flex items-center justify-center gap-2"
(click)="search()">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<span>Search</span> <span>Search</span>
</button> </button>
@ -188,8 +199,8 @@
</div> </div>
<!-- FAQ Section for SEO/AEO --> <!-- FAQ Section for SEO/AEO -->
<div class="w-full px-4 mt-12 max-w-4xl mx-auto"> <!-- <div class="w-full px-4 mt-12 max-w-4xl mx-auto">
<app-faq [faqItems]="faqItems"></app-faq> <app-faq [faqItems]="faqItems"></app-faq>
</div> </div> -->
</main> </main>
<!-- ==== ANPASSUNGEN ENDE ==== --> <!-- ==== ANPASSUNGEN ENDE ==== -->