Marketing

This commit is contained in:
Andreas Knuth 2024-04-24 17:10:44 +02:00
parent 4230867608
commit 9121ca1a69
9 changed files with 113 additions and 94 deletions

View File

@ -17,11 +17,11 @@
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-12 lg:w-6 p-4"> <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> <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"> <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-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">Orci a scelerisque purus semper eget.</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">Aenean sed adipiscing diam donec adipiscing tristique.</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> </ul>
</div> </div>
<div class="w-12 lg:w-6 text-center lg:text-right flex"> <div class="w-12 lg:w-6 text-center lg:text-right flex">
@ -59,7 +59,7 @@
pRipple pRipple
label="Create Your Listing" label="Create Your Listing"
class="block mt-7 mb-7 lg:mb-0 p-button-rounded p-button-success p-button-lg font-medium" 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> ></button>
</div> </div>
</div> </div>

View File

@ -1,10 +1,11 @@
:host { :host {
height: 100% height: 100%;
} }
.container { .container {
background-image: url(../../../assets/images/index-bg.webp); //background-image: url(../../../assets/images/index-bg.webp);
//background-image: url(../../../assets/images/corpusChristiSkyline.jpg); // background-image: url(../../../assets/images/1_Version.jpg);
background-image: url(../../../assets/images/2_1_Version.jpg);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
height: 100vh; height: 100vh;
@ -13,5 +14,5 @@
width: 200px; width: 200px;
} }
.p-button-white { .p-button-white {
color:aliceblue color: aliceblue;
} }

View File

@ -13,7 +13,7 @@ import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model'; import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { SelectOptionsService } from '../../services/select-options.service'; import { SelectOptionsService } from '../../services/select-options.service';
import { UserService } from '../../services/user.service'; import { UserService } from '../../services/user.service';
import { getCriteriaStateObject, getSessionStorageHandler } from '../../utils/utils'; import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from '../../utils/utils';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
standalone: true, standalone: true,
@ -30,6 +30,7 @@ export class HomeComponent {
user$: Observable<User>; user$: Observable<User>;
public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public userService: UserService) { public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public userService: UserService) {
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler); this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
resetCriteria(this.criteria);
} }
ngOnInit() { ngOnInit() {
this.user$ = this.userService.getUserObservable(); this.user$ = this.userService.getUserObservable();

View File

@ -1,26 +1,24 @@
<div class="container"> <div class="container">
<div class="wrapper"> <div class="wrapper">
<div class="py-3 px-6 flex flex-column align-items-center justify-content-between relative"> <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> <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="px-4 py-8 md:px-6 lg:px-8 bg-no-repeat bg-cover">
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-full lg:w-6 lg:pr-8"> <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-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 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>
<div class="w-full md:w-6 lg:w-3"> <div class="w-full md:w-6 lg:w-3">
<ul class="list-none p-0 m-0"> <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"> <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> <i class="pi pi-check text-green-500 mr-3"></i>
<span>Arcu vitae elementum</span> <span>Flexible pricing</span>
</li> </li>
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max"> <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> <i class="pi pi-check text-green-500 mr-3"></i>
<span>Dui faucibus in ornare</span> <span>Upgradeable plans</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> </li>
</ul> </ul>
</div> </div>
@ -28,16 +26,20 @@
<ul class="list-none p-0 m-0"> <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"> <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> <i class="pi pi-check text-green-500 mr-3"></i>
<span>Duis ultricies lacus sed</span> <span>Customizable options</span>
</li> </li>
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max"> <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> <i class="pi pi-check text-green-500 mr-3"></i>
<span>Imperdiet proin</span> <span>Imperdiet proin</span>
</li> </li>
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max"> <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> <i class="pi pi-check text-green-500 mr-3"></i>
<span>Nisi scelerisque</span> <span>Nisi scelerisque</span>
</li> </li> -->
</ul> </ul>
</div> </div>
</div> </div>
@ -46,7 +48,13 @@
<div class="shadow-2 p-3 h-full bg-primary" style="border-radius: 6px"> <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-medium text-xl mb-5">Free Forever</div>
<div class="font-bold text-5xl mb-5">Free</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"> <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> <span>Create Account</span>
</button> </button>
<p class="text-sm line-height-3 mb-0 mt-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p> <p class="text-sm line-height-3 mb-0 mt-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
@ -79,7 +87,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -11,7 +11,7 @@
<div class="mb-4"> <div class="mb-4">
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label> <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" /> <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&#64;bizmatch.net</p> <p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at support&#64;bizmatch.net</p>
</div> </div>
<div class="grid"> <div class="grid">
<div class="mb-4 col-12 md:col-6"> <div class="mb-4 col-12 md:col-6">

View File

@ -54,3 +54,13 @@ export function routeListingWithState(router: Router, value: string, data: any)
router.navigate(['createCommercialPropertyListing'], { state: { data } }); 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