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

pricing page

This commit is contained in:
Andreas Knuth 2024-08-15 20:12:41 +02:00
parent 8c6c6e3dbd
commit 056db7b199
3 changed files with 145 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bizmatch/src/app/app.component.html
View File

@ -1,6 +1,6 @@
<!-- <div class="container"> --> <!-- <div class="container"> -->
<div [ngClass]="{ 'bg-slate-100': actualRoute !== 'home' }"> <div [ngClass]="{ 'bg-slate-100': actualRoute !== 'home' }">
@if (actualRoute !=='home' && actualRoute !=='pricing'){ @if (actualRoute !=='home'){
<header></header> <header></header>
} }
<router-outlet></router-outlet> <router-outlet></router-outlet>

186
bizmatch/src/app/pages/pricing/pricing.component.html
View File

@ -1,84 +1,138 @@
<div class="container"> <div class="container mx-auto px-4 py-16">
<div class="wrapper"> <h1 class="text-4xl font-bold text-center mb-12">Choose the Right Plan for Your Business</h1>
<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="grid md:grid-cols-3 gap-8">
<div class="px-4 py-8 md:px-6 lg:px-8 bg-no-repeat bg-cover"> <!-- Free Plan -->
<div class="flex flex-wrap"> <div class="bg-white rounded-lg shadow-lg overflow-hidden flex flex-col h-full">
<div class="w-full lg:w-6 lg:pr-8"> <div class="px-6 py-8 bg-gray-50 text-center border-b">
<div class="text-900 font-bold text-6xl text-blue-900 mb-4">Pricing</div> <h3 class="text-2xl font-semibold text-gray-700">Buyer & Seller</h3>
<div class="text-700 text-xl text-blue-600 line-height-3 mb-4 lg:mb-0"> <p class="mt-4 text-gray-600">Commercial Properties</p>
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. <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> <div class="px-6 py-8 flex-grow">
<div class="w-full md:w-6 lg:w-3"> <ul class="text-sm text-gray-600">
<ul class="list-none p-0 m-0"> <li class="mb-4 flex items-center">
<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="fas fa-check text-green-500 mr-2"></i>
<i class="pi pi-check text-green-500 mr-3"></i> Create property listings
<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="mb-4 flex items-center">
<i class="pi pi-check text-green-500 mr-3"></i> <i class="fas fa-check text-green-500 mr-2"></i>
<span>Upgradeable plans</span> 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> </li>
</ul> </ul>
</div> </div>
<div class="w-full md:w-6 lg:w-3 md:pl-5"> <div class="px-6 py-4 mt-auto">
<ul class="list-none p-0 m-0"> <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>
<li class="flex align-items-center my-4 bg-white-alpha-40 shadow-2 py-1 px-2 border-round-lg w-max"> </div>
<i class="pi pi-check text-green-500 mr-3"></i> </div>
<span>Customizable options</span>
<!-- 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>
<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="mb-4 flex items-center">
<i class="pi pi-check text-green-500 mr-3"></i> <i class="fas fa-check text-green-500 mr-2"></i>
<span>Monthly/Yearly package</span> 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> </li>
</ul> </ul>
</div> </div>
</div> <div class="px-6 py-4 mt-auto">
<div class="flex flex-wrap mt-5 -mx-3"> <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 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> </div>
<div class="w-full lg:w-4 p-3">
<div class="shadow-2 p-3 h-full surface-card" style="border-radius: 6px"> <!-- Business Broker Plan -->
<div class="font-medium text-xl mb-5 text-900">Monthly</div> <div class="bg-white rounded-lg shadow-lg overflow-hidden border-2 border-blue-500 flex flex-col h-full">
<div class="flex align-items-center mb-5"> <div class="px-6 py-8 bg-blue-500 text-center border-b">
<span class="text-900 font-bold text-5xl">$29</span> <h3 class="text-2xl font-semibold text-white">Business Broker</h3>
<span class="font-medium text-500 ml-2">per month</span> <p class="mt-4 text-blue-100">Create & Manage Listings</p>
</div> <p class="mt-4 text-4xl font-bold text-white">$49</p>
<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="mt-2 text-blue-100">per month</p>
<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 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>
<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>
</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>
</div> </div>

16
bizmatch/src/app/pages/pricing/pricing.component.scss
View File

@ -1,11 +1,11 @@
:host { :host {
height: 100% height: 100%;
} }
.container { // .container {
background-image: url(../../../assets/images/index-bg.jpg), url(../../../assets/images/pricing-4.svg); // background-image: url(../../../assets/images/index-bg.jpg), url(../../../assets/images/pricing-4.svg);
//background-image: url(../../../assets/images/corpusChristiSkyline.jpg); // //background-image: url(../../../assets/images/corpusChristiSkyline.jpg);
background-size: cover; // background-size: cover;
background-position: center; // background-position: center;
height: 100vh; // height: 100vh;
} // }