fix: pricing page
This commit is contained in:
Val
parent
e50292eb06
commit
da29df5d8f
@ -3,6 +3,93 @@ import { Check, Star, Zap, Crown } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function PricingPage() {
|
||||
const pricingPlans = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Starter Care",
|
||||
price: "$175",
|
||||
description: "Great for getting started or low-maintenance needs.",
|
||||
buttonText: "Buy Now",
|
||||
isPopular: false,
|
||||
features: [
|
||||
"Custom onboarding",
|
||||
"Business grade website hosting",
|
||||
"24/7 website protection",
|
||||
"Code & speed optimization",
|
||||
"Google product integrations",
|
||||
"On-Demand monthly revisions",
|
||||
"Free SSL certificate",
|
||||
"50GB of storage",
|
||||
"Weekly Backups",
|
||||
],
|
||||
stars: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Steady Support",
|
||||
price: "$250",
|
||||
description: "Ideal for businesses needing regular updates.",
|
||||
buttonText: "Get In Touch",
|
||||
isPopular: true,
|
||||
features: [
|
||||
"Custom onboarding",
|
||||
"Business grade website hosting",
|
||||
"24/7 website protection",
|
||||
"Code & speed optimization",
|
||||
"Google product integrations",
|
||||
"On-Demand bi-weekly revisions",
|
||||
"Free SSL certificate",
|
||||
"100GB of additional storage",
|
||||
"Daily Backups",
|
||||
"Site performance investigations",
|
||||
"Form submission monitoring",
|
||||
"Proprietary CMS Integration",
|
||||
],
|
||||
stars: 2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Total Coverage",
|
||||
price: "$400",
|
||||
description: "Perfect for hands-off clients who want it all handled.",
|
||||
buttonText: "Get In Touch",
|
||||
isPopular: false,
|
||||
features: [
|
||||
"Custom onboarding",
|
||||
"Business grade website hosting",
|
||||
"24/7 website protection",
|
||||
"Code & speed optimization",
|
||||
"Google product integrations",
|
||||
"Unlimited revisions",
|
||||
"Free SSL certificate",
|
||||
"100GB of additional storage",
|
||||
"Daily Backups + Off-site Backups",
|
||||
"Automated backup protection",
|
||||
"Site performance investigations",
|
||||
"Form submission monitoring",
|
||||
"Proprietary CMS Integration",
|
||||
"Dedicated senior account manager",
|
||||
],
|
||||
stars: 3,
|
||||
},
|
||||
];
|
||||
|
||||
const renderStars = (count) => {
|
||||
const stars = [];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
stars.push(
|
||||
<Image
|
||||
key={i}
|
||||
src={`/assets/img/icon/icon-rank${i < count ? "" : "-gradient"}.webp`}
|
||||
width={60}
|
||||
height={60}
|
||||
alt="Star"
|
||||
/>
|
||||
);
|
||||
}
|
||||
return stars;
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout headerStyle={4} footerStyle={3} breadcrumbTitle="Pricing">
|
||||
<div className="row justify-content-center mt-5">
|
||||
@ -10,315 +97,51 @@ export default function PricingPage() {
|
||||
<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>
|
||||
<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}
|
||||
/>
|
||||
{pricingPlans.map((plan) => (
|
||||
<div
|
||||
key={plan.id}
|
||||
className={`relative bg-white border ${
|
||||
plan.isPopular ? "border-2 border-blue-200" : "border-gray-200"
|
||||
} rounded-lg shadow-sm`}
|
||||
>
|
||||
{plan.isPopular && (
|
||||
<div className="absolute -top-5 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-md 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">{plan.name}</h3>
|
||||
<div className="flex justify-center my-4">
|
||||
{renderStars(plan.stars)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mb-4">{plan.description}</p>
|
||||
<div className="mb-4">
|
||||
<div className="text-4xl font-bold">{plan.price}</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">
|
||||
{plan.buttonText}
|
||||
</button>
|
||||
</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 className="p-6 pt-0 space-y-4">
|
||||
<div className="space-y-5">
|
||||
{plan.features.map((feature, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<Check className="w-4 h-4 text-green-500" />
|
||||
<span className="text-md">{feature}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user