From 056db7b199793c11fd16848f4fca736a1a276eb2 Mon Sep 17 00:00:00 2001
From: Andreas Knuth <andreas.knuth@gmail.com>
Date: Thu, 15 Aug 2024 20:12:41 +0200
Subject: [PATCH] pricing page

---
 bizmatch/src/app/app.component.html           |   2 +-
 .../app/pages/pricing/pricing.component.html  | 214 +++++++++++-------
 .../app/pages/pricing/pricing.component.scss  |  20 +-
 3 files changed, 145 insertions(+), 91 deletions(-)

diff --git a/bizmatch/src/app/app.component.html b/bizmatch/src/app/app.component.html
index 4852b83..87218c1 100644
--- a/bizmatch/src/app/app.component.html
+++ b/bizmatch/src/app/app.component.html
@@ -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>
diff --git a/bizmatch/src/app/pages/pricing/pricing.component.html b/bizmatch/src/app/pages/pricing/pricing.component.html
index 34bfbf8..5a10c32 100644
--- a/bizmatch/src/app/pages/pricing/pricing.component.html
+++ b/bizmatch/src/app/pages/pricing/pricing.component.html
@@ -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>
-          </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>
-            </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="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 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="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="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="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">Get Started</button>
+      </div>
+    </div>
+
+    <!-- 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>
diff --git a/bizmatch/src/app/pages/pricing/pricing.component.scss b/bizmatch/src/app/pages/pricing/pricing.component.scss
index eeae235..a525fa3 100644
--- a/bizmatch/src/app/pages/pricing/pricing.component.scss
+++ b/bizmatch/src/app/pages/pricing/pricing.component.scss
@@ -1,11 +1,11 @@
 :host {
-    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;
-  }
\ No newline at end of file
+  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;
+// }