Marketing
This commit is contained in:
parent
4230867608
commit
9121ca1a69
|
|
@ -17,11 +17,11 @@
|
|||
<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">Arcu cursus euismod quis viverra nibh cras. Amet justo donec enim diam vulputate ut.</p>
|
||||
<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">Senectus et netus et malesuada fames.</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">Orci a scelerisque purus semper eget.</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">Aenean sed adipiscing diam donec adipiscing tristique.</span></li>
|
||||
<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">
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
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() ? '/createListing' : '/pricing'"
|
||||
[routerLink]="userService.isLoggedIn() ? '/createBusinessListing' : '/pricing'"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
:host {
|
||||
height: 100%
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-image: url(../../../assets/images/index-bg.webp);
|
||||
//background-image: url(../../../assets/images/corpusChristiSkyline.jpg);
|
||||
//background-image: url(../../../assets/images/index-bg.webp);
|
||||
// background-image: url(../../../assets/images/1_Version.jpg);
|
||||
background-image: url(../../../assets/images/2_1_Version.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.combo_lp{
|
||||
.combo_lp {
|
||||
width: 200px;
|
||||
}
|
||||
.p-button-white{
|
||||
color:aliceblue
|
||||
}
|
||||
.p-button-white {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { User } from '../../../../../bizmatch-server/src/models/db.model';
|
|||
import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
|
||||
import { SelectOptionsService } from '../../services/select-options.service';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils';
|
||||
import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from '../../utils/utils';
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
standalone: true,
|
||||
|
|
@ -30,6 +30,7 @@ export class HomeComponent {
|
|||
user$: Observable<User>;
|
||||
public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public userService: UserService) {
|
||||
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
|
||||
resetCriteria(this.criteria);
|
||||
}
|
||||
ngOnInit() {
|
||||
this.user$ = this.userService.getUserObservable();
|
||||
|
|
|
|||
|
|
@ -1,85 +1,92 @@
|
|||
<div class="container">
|
||||
<div class="wrapper">
|
||||
<div class="py-3 px-6 flex flex-column align-items-center justify-content-between relative">
|
||||
<a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" ></a>
|
||||
<div class="px-4 py-8 md:px-6 lg:px-8 bg-no-repeat bg-cover" >
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6 lg:pr-8">
|
||||
<div class="text-900 font-bold text-6xl text-blue-900 mb-4">Pricing</div>
|
||||
<div class="text-700 text-xl text-blue-600 line-height-3 mb-4 lg:mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velitnumquam eligendi quos.</div>
|
||||
</div>
|
||||
<div class="w-full md:w-6 lg:w-3">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Arcu vitae elementum</span>
|
||||
</li>
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Dui faucibus in ornare</span>
|
||||
</li>
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Morbi tincidunt augue</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-full md:w-6 lg:w-3 md:pl-5">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Duis ultricies lacus sed</span>
|
||||
</li>
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap mt-5 -mx-3">
|
||||
<div class="w-full lg:w-4 p-3">
|
||||
<div class="shadow-2 p-3 h-full bg-primary" style="border-radius: 6px">
|
||||
<div class="font-medium text-xl mb-5">Free Forever</div>
|
||||
<div class="font-bold text-5xl mb-5">Free</div>
|
||||
<button (click)="register()" type="button" pRipple class="font-medium appearance-none border-none p-2 surface-0 text-primary hover:surface-100 p-component lg:w-full border-rounded cursor-pointer transition-colors transition-duration-150" style="border-radius: 6px">
|
||||
<span>Create Account</span>
|
||||
</button>
|
||||
<p class="text-sm line-height-3 mb-0 mt-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4 p-3">
|
||||
<div class="shadow-2 p-3 h-full surface-card" style="border-radius: 6px">
|
||||
<div class="font-medium text-xl mb-5 text-900 ">Monthly</div>
|
||||
<div class="flex align-items-center mb-5">
|
||||
<span class="text-900 font-bold text-5xl">$29</span>
|
||||
<span class="font-medium text-500 ml-2">per month</span>
|
||||
</div>
|
||||
<button (click)="register()" pButton pRipple label="Proceed Monthly" icon="pi pi-arrow-right" iconPos="right" class="lg:w-full font-medium p-2" style="border-radius: 6px"></button>
|
||||
<p class="text-sm line-height-3 mb-0 mt-5">Nec ultrices dui sapien eget. Amet nulla facilisi morbi tempus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4 p-3">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="flex flex-row justify-content-between mb-5 align-items-center">
|
||||
<div class="text-900 text-xl font-medium">Yearly</div>
|
||||
<span class="bg-orange-100 500 text-orange-500 font-semibold px-2 py-1 border-round">🎉 Save 20%</span>
|
||||
</div>
|
||||
<div class="flex align-items-center mb-5">
|
||||
<span class="text-900 font-bold text-5xl">$275</span>
|
||||
<span class="font-medium text-500 ml-2">per year</span>
|
||||
</div>
|
||||
<button (click)="register()" pButton pRipple label="Proceed Yearly" icon="pi pi-arrow-right" iconPos="right" class="lg:w-full font-medium p-2" style="border-radius: 6px"></button>
|
||||
<p class="text-sm line-height-3 mb-0 mt-5">Placerat in egestas erat imperdiet sed euismod nisi porta.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="py-3 px-6 flex flex-column align-items-center justify-content-between relative">
|
||||
<a routerLink="/home"><img src="../../../assets/images/header-logo.png" alt="Image" height="50" /></a>
|
||||
<div class="px-4 py-8 md:px-6 lg:px-8 bg-no-repeat bg-cover">
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full lg:w-6 lg:pr-8">
|
||||
<div class="text-900 font-bold text-6xl text-blue-900 mb-4">Pricing</div>
|
||||
<div class="text-700 text-xl text-blue-600 line-height-3 mb-4 lg:mb-0">
|
||||
With the "Forever Free" package, you can get started right away. If you need more support or a larger data volume, you can upgrade to the "Monthly" or "Yearly" package at any time.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="w-full md:w-6 lg:w-3">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Flexible pricing</span>
|
||||
</li>
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Upgradeable plans</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-full md:w-6 lg:w-3 md:pl-5">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Customizable options</span>
|
||||
</li>
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Monthly/Yearly package</span>
|
||||
</li>
|
||||
<!-- <li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Imperdiet proin</span>
|
||||
</li>
|
||||
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max">
|
||||
<i class="pi pi-check text-green-500 mr-3"></i>
|
||||
<span>Nisi scelerisque</span>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap mt-5 -mx-3">
|
||||
<div class="w-full lg:w-4 p-3">
|
||||
<div class="shadow-2 p-3 h-full bg-primary" style="border-radius: 6px">
|
||||
<div class="font-medium text-xl mb-5">Free Forever</div>
|
||||
<div class="font-bold text-5xl mb-5">Free</div>
|
||||
<button
|
||||
(click)="register()"
|
||||
type="button"
|
||||
pRipple
|
||||
class="font-medium appearance-none border-none p-2 surface-0 text-primary hover:surface-100 p-component lg:w-full border-rounded cursor-pointer transition-colors transition-duration-150"
|
||||
style="border-radius: 6px"
|
||||
>
|
||||
<span>Create Account</span>
|
||||
</button>
|
||||
<p class="text-sm line-height-3 mb-0 mt-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4 p-3">
|
||||
<div class="shadow-2 p-3 h-full surface-card" style="border-radius: 6px">
|
||||
<div class="font-medium text-xl mb-5 text-900">Monthly</div>
|
||||
<div class="flex align-items-center mb-5">
|
||||
<span class="text-900 font-bold text-5xl">$29</span>
|
||||
<span class="font-medium text-500 ml-2">per month</span>
|
||||
</div>
|
||||
<button (click)="register()" pButton pRipple label="Proceed Monthly" icon="pi pi-arrow-right" iconPos="right" class="lg:w-full font-medium p-2" style="border-radius: 6px"></button>
|
||||
<p class="text-sm line-height-3 mb-0 mt-5">Nec ultrices dui sapien eget. Amet nulla facilisi morbi tempus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:w-4 p-3">
|
||||
<div class="shadow-2 p-3 h-full flex flex-column surface-card" style="border-radius: 6px">
|
||||
<div class="flex flex-row justify-content-between mb-5 align-items-center">
|
||||
<div class="text-900 text-xl font-medium">Yearly</div>
|
||||
<span class="bg-orange-100 500 text-orange-500 font-semibold px-2 py-1 border-round">🎉 Save 20%</span>
|
||||
</div>
|
||||
<div class="flex align-items-center mb-5">
|
||||
<span class="text-900 font-bold text-5xl">$275</span>
|
||||
<span class="font-medium text-500 ml-2">per year</span>
|
||||
</div>
|
||||
<button (click)="register()" pButton pRipple label="Proceed Yearly" icon="pi pi-arrow-right" iconPos="right" class="lg:w-full font-medium p-2" style="border-radius: 6px"></button>
|
||||
<p class="text-sm line-height-3 mb-0 mt-5">Placerat in egestas erat imperdiet sed euismod nisi porta.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="mb-4">
|
||||
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
|
||||
<input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email" />
|
||||
<p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at emailchange@bizmatch.net</p>
|
||||
<p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at support@bizmatch.net</p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
|
|
|
|||
|
|
@ -54,3 +54,13 @@ export function routeListingWithState(router: Router, value: string, data: any)
|
|||
router.navigate(['createCommercialPropertyListing'], { state: { data } });
|
||||
}
|
||||
}
|
||||
export function resetCriteria(criteria: ListingCriteria) {
|
||||
criteria.type = null;
|
||||
criteria.state = null;
|
||||
criteria.minPrice = null;
|
||||
criteria.maxPrice = null;
|
||||
criteria.start = null;
|
||||
criteria.length = null;
|
||||
criteria.realEstateChecked = null;
|
||||
criteria.title = null;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Loading…
Reference in New Issue