fix: pricing
This commit is contained in:
Val
parent
27fc04c0f4
commit
2eb9808162
@ -54,7 +54,6 @@ export async function POST(request) {
|
|||||||
|
|
||||||
let page;
|
let page;
|
||||||
let finalUrl;
|
let finalUrl;
|
||||||
let html;
|
|
||||||
let securityHeaders = {};
|
let securityHeaders = {};
|
||||||
let response;
|
let response;
|
||||||
|
|
||||||
|
|||||||
@ -1,157 +1,326 @@
|
|||||||
import Layout from "@/components/layout/Layout";
|
import Layout from "@/components/layout/Layout";
|
||||||
import { Check, Star, Zap, Crown } from "lucide-react";
|
import { Check, Star, Zap, Crown } from "lucide-react";
|
||||||
import Link from "next/link";
|
import Image from "next/image";
|
||||||
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function PricingPage() {
|
export default function PricingPage() {
|
||||||
return (
|
return (
|
||||||
<Layout headerStyle={4} footerStyle={3} breadcrumbTitle="Pricing">
|
<Layout headerStyle={4} footerStyle={3} breadcrumbTitle="Pricing">
|
||||||
<section id="pricing" className="py-20">
|
<div className="row justify-content-center mt-5">
|
||||||
<div className="container mx-auto px-4">
|
<div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
|
||||||
<div className="text-center mb-16">
|
<span className="sub-title">
|
||||||
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
PLANS <span className="title-color"> AND PRICING</span>
|
||||||
Simple, Transparent Pricing
|
</span>
|
||||||
</h1>
|
<h2 className="title tg-element-title">Full-service web management built to outrun the competition.</h2>
|
||||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
</div>
|
||||||
Choose the perfect plan for your business. All plans include our
|
</div>
|
||||||
core CRM features with no hidden fees.
|
<div className="container mx-auto px-4 pb-12">
|
||||||
</p>
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||||
</div>
|
{/* Essential Plan */}
|
||||||
|
<div className="relative bg-white border border-gray-200 rounded-lg shadow-sm">
|
||||||
<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
<div className="text-center p-6 pb-4">
|
||||||
{plans.map((plan) => {
|
<h3 className="text-2xl font-bold mb-2">Starter Care</h3>
|
||||||
const Icon = plan.icon;
|
<div className="flex justify-center mb-4">
|
||||||
return (
|
<Image
|
||||||
<div
|
src="/assets/img/icon/icon-rank.webp"
|
||||||
key={plan.name}
|
width={60}
|
||||||
className={`relative bg-white rounded-lg shadow-lg border-2 p-8 ${
|
height={60}
|
||||||
plan.popular
|
/>
|
||||||
? "border-blue-500 scale-105"
|
<Image
|
||||||
: "border-gray-200"
|
src="/assets/img/icon/icon-rank-gradient.webp"
|
||||||
}`}
|
width={60}
|
||||||
>
|
height={60}
|
||||||
{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">
|
<Image
|
||||||
Most Popular
|
src="/assets/img/icon/icon-rank-gradient.webp"
|
||||||
</div>
|
width={60}
|
||||||
)}
|
height={60}
|
||||||
<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">
|
</div>
|
||||||
<Icon className="w-6 h-6 text-blue-600" />
|
<p className="text-sm text-gray-600 mb-4">
|
||||||
</div>
|
Great for getting started or low-maintenance needs.
|
||||||
<h3 className="text-2xl font-bold text-gray-900">
|
</p>
|
||||||
{plan.name}
|
<div className="mb-4">
|
||||||
</h3>
|
<div className="text-4xl font-bold">$175</div>
|
||||||
<p className="text-gray-600 mt-2">{plan.description}</p>
|
<div className="text-sm text-gray-600">USD /mo</div>
|
||||||
<div className="mt-4">
|
</div>
|
||||||
<span className="text-4xl font-bold text-gray-900">
|
<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
|
||||||
{typeof plan.price === "number"
|
Buy Now
|
||||||
? `$${plan.price}`
|
</button>
|
||||||
: plan.price}
|
</div>
|
||||||
</span>
|
<div className="p-6 pt-0 space-y-4">
|
||||||
{typeof plan.price === "number" && (
|
<div className="space-y-2">
|
||||||
<span className="text-gray-600 ml-2">/month</span>
|
<div className="flex items-center gap-2">
|
||||||
)}
|
<Check className="w-4 h-4 text-green-500" />
|
||||||
</div>
|
<span className="text-sm">Custom onboarding</span>
|
||||||
</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>
|
</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>
|
||||||
|
|
||||||
<div className="text-center mt-12">
|
{/* Core Plan */}
|
||||||
<p className="text-gray-600 mb-4">
|
<div className="relative bg-white border-2 border-blue-200 rounded-lg shadow-sm">
|
||||||
All plans include 14-day free trial • No setup fees • Cancel
|
<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">
|
||||||
anytime
|
Best Value
|
||||||
</p>
|
</div>
|
||||||
{/* <Link
|
<div className="text-center p-6 pb-4">
|
||||||
href="/portfolio"
|
<h3 className="text-2xl font-bold mb-2">Steady Support</h3>
|
||||||
className="text-blue-600 hover:text-blue-700 transition-colors"
|
<div className="flex justify-center mb-4">
|
||||||
>
|
<Image
|
||||||
View Client Area Demo →
|
src="/assets/img/icon/icon-rank.webp"
|
||||||
</Link> */}
|
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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</Layout>
|
</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