fix: pricing
This commit is contained in:
Val
parent
27fc04c0f4
commit
2eb9808162
@ -54,7 +54,6 @@ export async function POST(request) {
|
||||
|
||||
let page;
|
||||
let finalUrl;
|
||||
let html;
|
||||
let securityHeaders = {};
|
||||
let response;
|
||||
|
||||
|
||||
@ -1,157 +1,326 @@
|
||||
import Layout from "@/components/layout/Layout";
|
||||
import { Check, Star, Zap, Crown } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: "Starter",
|
||||
price: 150,
|
||||
description: "Perfect for small businesses getting started",
|
||||
icon: Zap,
|
||||
features: [
|
||||
"Basic invoicing & billing",
|
||||
"Payment processing",
|
||||
"Client portal access",
|
||||
"Email support",
|
||||
"Basic reporting",
|
||||
"Up to 50 clients",
|
||||
"Standard templates",
|
||||
],
|
||||
popular: false,
|
||||
},
|
||||
{
|
||||
name: "Professional",
|
||||
price: 250,
|
||||
description: "Advanced features for growing businesses",
|
||||
icon: Star,
|
||||
features: [
|
||||
"Advanced invoicing & billing",
|
||||
"Live chat support",
|
||||
"Payment history & receipts",
|
||||
"Support ticket system",
|
||||
"Knowledge base access",
|
||||
"Video tutorials",
|
||||
"Product upgrade system",
|
||||
"Unlimited clients",
|
||||
"Custom branding",
|
||||
"Advanced reporting",
|
||||
"API access",
|
||||
],
|
||||
popular: true,
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
price: "Custom",
|
||||
description: "Tailored solutions for large organizations",
|
||||
icon: Crown,
|
||||
features: [
|
||||
"Everything in Professional",
|
||||
"Custom integrations",
|
||||
"Dedicated account manager",
|
||||
"Priority support",
|
||||
"Custom workflows",
|
||||
"Advanced AI features",
|
||||
"ClickUp integration",
|
||||
"White-label solution",
|
||||
"Custom training",
|
||||
"SLA guarantee",
|
||||
],
|
||||
popular: false,
|
||||
},
|
||||
];
|
||||
import Image from "next/image";
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<Layout headerStyle={4} footerStyle={3} breadcrumbTitle="Pricing">
|
||||
<section id="pricing" className="py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||
Simple, Transparent Pricing
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
Choose the perfect plan for your business. All plans include our
|
||||
core CRM features with no hidden fees.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
{plans.map((plan) => {
|
||||
const Icon = plan.icon;
|
||||
return (
|
||||
<div
|
||||
key={plan.name}
|
||||
className={`relative bg-white rounded-lg shadow-lg border-2 p-8 ${
|
||||
plan.popular
|
||||
? "border-blue-500 scale-105"
|
||||
: "border-gray-200"
|
||||
}`}
|
||||
>
|
||||
{plan.popular && (
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-medium">
|
||||
Most Popular
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center pb-8">
|
||||
<div className="mx-auto w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<Icon className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900">
|
||||
{plan.name}
|
||||
</h3>
|
||||
<p className="text-gray-600 mt-2">{plan.description}</p>
|
||||
<div className="mt-4">
|
||||
<span className="text-4xl font-bold text-gray-900">
|
||||
{typeof plan.price === "number"
|
||||
? `$${plan.price}`
|
||||
: plan.price}
|
||||
</span>
|
||||
{typeof plan.price === "number" && (
|
||||
<span className="text-gray-600 ml-2">/month</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-8">
|
||||
<ul className="space-y-3">
|
||||
{plan.features.map((feature, index) => (
|
||||
<li key={index} className="flex items-start">
|
||||
<Check className="w-5 h-5 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-700">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Link
|
||||
href="/client-area"
|
||||
className={`block w-full text-center py-3 px-4 rounded-lg font-medium transition-colors ${
|
||||
plan.popular
|
||||
? "bg-blue-600 text-white hover:bg-blue-700"
|
||||
: "bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-300"
|
||||
}`}
|
||||
>
|
||||
{plan.name === "Enterprise"
|
||||
? "Contact Sales"
|
||||
: "Get Started"}
|
||||
</Link>
|
||||
<div className="row justify-content-center mt-5">
|
||||
<div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
|
||||
<span className="sub-title">
|
||||
PLANS <span className="title-color"> AND PRICING</span>
|
||||
</span>
|
||||
<h2 className="title tg-element-title">Full-service web management built to outrun the competition.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container mx-auto px-4 pb-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
{/* Essential Plan */}
|
||||
<div className="relative bg-white border border-gray-200 rounded-lg shadow-sm">
|
||||
<div className="text-center p-6 pb-4">
|
||||
<h3 className="text-2xl font-bold mb-2">Starter Care</h3>
|
||||
<div className="flex justify-center mb-4">
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank-gradient.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank-gradient.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Great for getting started or low-maintenance needs.
|
||||
</p>
|
||||
<div className="mb-4">
|
||||
<div className="text-4xl font-bold">$175</div>
|
||||
<div className="text-sm text-gray-600">USD /mo</div>
|
||||
</div>
|
||||
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||||
Buy Now
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 pt-0 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Custom onboarding</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Business grade website hosting
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">24/7 website protection</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Code & speed optimization</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Google product integrations</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">On-Demand monthly revisions</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Free SSL certificate</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">50GB of storage</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Weekly Backups</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<p className="text-gray-600 mb-4">
|
||||
All plans include 14-day free trial • No setup fees • Cancel
|
||||
anytime
|
||||
</p>
|
||||
{/* <Link
|
||||
href="/portfolio"
|
||||
className="text-blue-600 hover:text-blue-700 transition-colors"
|
||||
>
|
||||
View Client Area Demo →
|
||||
</Link> */}
|
||||
{/* Core Plan */}
|
||||
<div className="relative bg-white border-2 border-blue-200 rounded-lg shadow-sm">
|
||||
<div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-xs px-3 py-1 rounded-full">
|
||||
Best Value
|
||||
</div>
|
||||
<div className="text-center p-6 pb-4">
|
||||
<h3 className="text-2xl font-bold mb-2">Steady Support</h3>
|
||||
<div className="flex justify-center mb-4">
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank-gradient.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Ideal for businesses needing regular updates.
|
||||
</p>
|
||||
<div className="mb-4">
|
||||
<div className="text-4xl font-bold">$250</div>
|
||||
<div className="text-sm text-gray-600">USD /mo</div>
|
||||
</div>
|
||||
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||||
Get In Touch
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 pt-0 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Custom onboarding</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Business grade website hosting
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">24/7 website protection</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Code & speed optimization</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Google product integrations</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">On-Demand bi-weekly revisions</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Free SSL certificate</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">100GB of additional storage</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Daily Backups</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Site performance investigations
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Form submission monitoring</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Proprietary CMS Integration</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<div className="font-bold text-sm mb-2">Advisory Services</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Prioritized senior technical support
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Increased Scope for On-Demand revisions
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<div className="font-bold text-sm mb-2">
|
||||
Performance & Insights
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Monthly Site Health Reports</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">99.99% uptime SLA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enterprise Plan */}
|
||||
<div className="relative bg-white border border-gray-200 rounded-lg shadow-sm">
|
||||
<div className="text-center p-6 pb-4">
|
||||
<h3 className="text-2xl font-bold mb-2">Total Coverage</h3>
|
||||
<div className="flex justify-center mb-4">
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<Image
|
||||
src="/assets/img/icon/icon-rank.webp"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
Perfect for hands-off clients who want it all handled.
|
||||
</p>
|
||||
<div className="mb-4">
|
||||
<div className="text-4xl font-bold">$400</div>
|
||||
<div className="text-sm text-gray-600">USD /mo</div>
|
||||
</div>
|
||||
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||||
Get In Touch
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6 pt-0 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Custom onboarding</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Business grade website hosting
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">24/7 website protection</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Code & speed optimization</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Google product integrations</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Unlimited revisions</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Automated backup protection</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Free SSL certificate</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">100GB of additional storage</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Daily Backups + Off-site Backups
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Site performance investigations
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Form submission monitoring</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">Proprietary CMS Integration</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-sm">
|
||||
Dedicated senior account manager
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
BIN
public/assets/img/icon/icon-rank-gradient.webp
Normal file
BIN
public/assets/img/icon/icon-rank-gradient.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
public/assets/img/icon/icon-rank-removebg-preview.png
Normal file
BIN
public/assets/img/icon/icon-rank-removebg-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
public/assets/img/icon/icon-rank.webp
Normal file
BIN
public/assets/img/icon/icon-rank.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Loading…
x
Reference in New Issue
Block a user