pricing page
This commit is contained in:
parent
8c6c6e3dbd
commit
056db7b199
|
|
@ -1,6 +1,6 @@
|
|||
<!-- <div class="container"> -->
|
||||
<div [ngClass]="{ 'bg-slate-100': actualRoute !== 'home' }">
|
||||
@if (actualRoute !=='home' && actualRoute !=='pricing'){
|
||||
@if (actualRoute !=='home'){
|
||||
<header></header>
|
||||
}
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
|||
|
|
@ -1,84 +1,138 @@
|
|||
<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">
|
||||
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 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 class="grid md:grid-cols-3 gap-8">
|
||||
<!-- 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>
|
||||
<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>
|
||||
<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="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 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>
|
||||
Professional/Broker trial period (3 month)
|
||||
</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>
|
||||
<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>
|
||||
<div class="px-6 py-4 mt-auto">
|
||||
<button 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="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 class="mb-4 flex items-center">
|
||||
<i class="fas fa-check text-green-500 mr-2"></i>
|
||||
Extended public listings (3+ months)
|
||||
</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>
|
||||
</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 class="px-6 py-4 mt-auto">
|
||||
<button 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
Extended public listings (3+ months)
|
||||
</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>
|
||||
<div class="px-6 py-4 mt-auto">
|
||||
<button 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 href="#" 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>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
:host {
|
||||
height: 100%
|
||||
}
|
||||
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;
|
||||
}
|
||||
// .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;
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in New Issue