103 lines
5.6 KiB
HTML
103 lines
5.6 KiB
HTML
<div class="container">
|
|
<div class="wrapper">
|
|
<div class="py-3 px-6 flex align-items-center justify-content-between relative">
|
|
<a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" /></a>
|
|
<div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 top-100 px-6 lg:px-0 shadow-2 lg:shadow-none z-2">
|
|
<section></section>
|
|
<div class="flex justify-content-between lg:block border-top-1 lg:border-top-none border-gray-800 py-3 lg:py-0 mt-3 lg:mt-0">
|
|
@if(userService.isLoggedIn()){
|
|
<p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account']"></p-button>
|
|
} @else {
|
|
<p-button label="Log In" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="login()"></p-button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-8 md:px-6 lg:px-8">
|
|
<div class="flex flex-wrap">
|
|
<div class="w-12 lg:w-6 p-4">
|
|
<h1 class="text-6xl font-bold text-blue-900 mt-0 mb-3">Find businesses for sale</h1>
|
|
<p class="text-3xl text-blue-600 mt-0 mb-5">Unlocking Exclusive Opportunities, Empowering Entrepreneurial Dreams</p>
|
|
<ul class="list-none p-0 m-0">
|
|
<li class="mb-3 flex align-items-center"><i class="pi pi-compass text-yellow-500 text-xl mr-2"></i><span class="text-blue-600 line-height-3">Texas expertise and nationwide presence</span></li>
|
|
<li class="mb-3 flex align-items-center"><i class="pi pi-map text-yellow-500 text-xl mr-2"></i><span class="text-blue-600 line-height-3">Industry diversity</span></li>
|
|
<li class="mb-3 flex align-items-center"><i class="pi pi-calendar text-yellow-500 text-xl mr-2"></i><span class="text-blue-600 line-height-3">Support throughout the entire process</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="w-12 lg:w-6 text-center lg:text-right flex">
|
|
<div class="mt-5">
|
|
<ul class="flex flex-column align-items-left gap-3 px-2 py-3 list-none surface-border">
|
|
<li><button pButton pRipple icon="pi pi-user" (click)="changeTab('business')" label="Businesses" [ngClass]="{ 'p-button-text text-700': activeTabAction !== 'business' }"></button></li>
|
|
<li>
|
|
<button
|
|
pButton
|
|
pRipple
|
|
icon="pi pi-shield"
|
|
(click)="changeTab('commercialProperty')"
|
|
label="Commercial Property"
|
|
[ngClass]="{ 'p-button-text text-700': activeTabAction != 'commercialProperty' }"
|
|
></button>
|
|
</li>
|
|
<li>
|
|
<button pButton pRipple icon="pi pi-globe" (click)="changeTab('broker')" label="Professionals/Brokers Directory" [ngClass]="{ 'p-button-text text-700': activeTabAction != 'broker' }"></button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div [ngClass]="{ 'mt-5': activeTabAction === 'business', 'mt-11': activeTabAction === 'commercialProperty', 'mt-22': activeTabAction === 'broker' }">
|
|
<div class="flex flex-column align-items-right gap-3 px-2 py-3 my-3 surface-border">
|
|
<p-dropdown
|
|
[filter]="true"
|
|
filterBy="name"
|
|
[options]="states"
|
|
[(ngModel)]="criteria.state"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
[showClear]="true"
|
|
placeholder="State"
|
|
[style]="{ width: '200px' }"
|
|
></p-dropdown>
|
|
@if(activeTabAction === 'business'){
|
|
<p-dropdown
|
|
[filter]="true"
|
|
filterBy="name"
|
|
[options]="selectOptions.typesOfBusiness"
|
|
[(ngModel)]="criteria.type"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
[showClear]="true"
|
|
placeholder="Category"
|
|
[style]="{ width: '200px' }"
|
|
></p-dropdown>
|
|
} @if(activeTabAction === 'commercialProperty'){
|
|
<p-dropdown
|
|
[options]="selectOptions.typesOfCommercialProperty"
|
|
[(ngModel)]="criteria.type"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
[showClear]="true"
|
|
placeholder="Category"
|
|
[style]="{ width: '200px' }"
|
|
></p-dropdown>
|
|
} @if(activeTabAction === 'business' || activeTabAction === 'commercialProperty'){
|
|
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.minPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Min Price" [style]="{ width: '200px' }"></p-dropdown>
|
|
<p-dropdown [options]="selectOptions.prices" [(ngModel)]="criteria.maxPrice" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Max Price" [style]="{ width: '200px' }"></p-dropdown>
|
|
}
|
|
<button pButton pRipple label="Find" class="ml-3 font-bold" [style]="{ width: '200px' }" (click)="search()"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-12 flex justify-content-center">
|
|
<button
|
|
type="button"
|
|
pButton
|
|
pRipple
|
|
label="Create Your Listing"
|
|
class="block mt-7 mb-7 lg:mb-0 p-button-rounded p-button-success p-button-lg font-medium"
|
|
[routerLink]="userService.isLoggedIn() ? '/createBusinessListing' : '/pricing'"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|