144 lines
6.8 KiB
TypeScript
144 lines
6.8 KiB
TypeScript
import PricingCenteredCards from "@/components/sections/pricing/PricingCenteredCards";
|
|
import { Check } from "lucide-react";
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
|
|
const plans = [
|
|
{
|
|
tag: "Basic",
|
|
price: "€499/mo",
|
|
description: "Ideal for startups and small businesses looking to establish an online presence.",
|
|
features: [
|
|
"Basic SEO Optimization",
|
|
"Social Media Setup",
|
|
"Content Calendar (2 posts/week)",
|
|
"Monthly Performance Report",
|
|
],
|
|
primaryButton: { text: "Get Started", href: "/#contact" },
|
|
},
|
|
{
|
|
tag: "Pro",
|
|
price: "€999/mo",
|
|
description: "Perfect for growing businesses aiming for significant digital growth and engagement.",
|
|
features: [
|
|
"Advanced SEO Strategy",
|
|
"Full Social Media Management",
|
|
"Content Creation (4 posts/week)",
|
|
"Bi-Weekly Performance Reports",
|
|
"Email Marketing Campaigns",
|
|
],
|
|
primaryButton: { text: "Choose Pro", href: "/#contact" },
|
|
},
|
|
{
|
|
tag: "Enterprise",
|
|
price: "Custom",
|
|
description: "Tailored solutions for large enterprises with complex marketing needs and ambitious goals.",
|
|
features: [
|
|
"Dedicated Account Manager",
|
|
"Comprehensive Digital Strategy",
|
|
"Unlimited Content Creation",
|
|
"Weekly Performance Reviews",
|
|
"Advanced Analytics & Insights",
|
|
"PR & Influencer Outreach",
|
|
],
|
|
primaryButton: { text: "Contact Us", href: "/#contact" },
|
|
},
|
|
];
|
|
|
|
export default function PricingPage() {
|
|
return (
|
|
<div className="min-h-svh bg-background text-foreground flex flex-col">
|
|
<div data-webild-section="PricingCenteredCards">
|
|
<SectionErrorBoundary name="pricing">
|
|
<PricingCenteredCards
|
|
tag="Our Packages"
|
|
title="Flexible Plans for Every Business"
|
|
description="Choose the perfect marketing package designed to elevate your brand and achieve your business goals. All plans are customizable."
|
|
plans={plans}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div data-webild-section="PricingComparisonTable">
|
|
<SectionErrorBoundary name="pricing-comparison">
|
|
<section className="bg-background text-foreground">
|
|
<div className="w-content-width mx-auto px-4 md:px-6">
|
|
<div className="text-center">
|
|
<h2 className="text-4xl md:text-5xl font-medium mb-4">Detailed Feature Comparison</h2>
|
|
<p className="text-lg text-muted-foreground max-w-content-width mx-auto">
|
|
Compare our plans side-by-side to find the perfect fit for your business needs.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left border-collapse min-w-[800px]">
|
|
<thead>
|
|
<tr>
|
|
<th className="p-5 border-b border-border font-medium text-lg w-1/4">Features</th>
|
|
<th className="p-5 border-b border-border font-medium text-lg text-center w-1/4">Basic</th>
|
|
<th className="p-5 border-b border-border font-medium text-lg text-center w-1/4">Pro</th>
|
|
<th className="p-5 border-b border-border font-medium text-lg text-center w-1/4">Enterprise</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="bg-card/30">
|
|
<td className="p-5 border-b border-border font-medium">SEO Strategy</td>
|
|
<td className="p-5 border-b border-border text-center">Basic</td>
|
|
<td className="p-5 border-b border-border text-center">Advanced</td>
|
|
<td className="p-5 border-b border-border text-center">Comprehensive</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-5 border-b border-border font-medium">Social Media Posts</td>
|
|
<td className="p-5 border-b border-border text-center">2 per week</td>
|
|
<td className="p-5 border-b border-border text-center">4 per week</td>
|
|
<td className="p-5 border-b border-border text-center">Unlimited</td>
|
|
</tr>
|
|
<tr className="bg-card/30">
|
|
<td className="p-5 border-b border-border font-medium">Reporting</td>
|
|
<td className="p-5 border-b border-border text-center">Monthly</td>
|
|
<td className="p-5 border-b border-border text-center">Bi-Weekly</td>
|
|
<td className="p-5 border-b border-border text-center">Weekly</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-5 border-b border-border font-medium">Email Marketing</td>
|
|
<td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
|
|
<td className="p-5 border-b border-border text-center">
|
|
<div className="flex justify-center">
|
|
<Check className="size-5 text-primary-cta" />
|
|
</div>
|
|
</td>
|
|
<td className="p-5 border-b border-border text-center">
|
|
<div className="flex justify-center">
|
|
<Check className="size-5 text-primary-cta" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr className="bg-card/30">
|
|
<td className="p-5 border-b border-border font-medium">PR & Influencer Outreach</td>
|
|
<td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
|
|
<td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
|
|
<td className="p-5 border-b border-border text-center">
|
|
<div className="flex justify-center">
|
|
<Check className="size-5 text-primary-cta" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="p-5 border-b border-border font-medium">Dedicated Manager</td>
|
|
<td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
|
|
<td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
|
|
<td className="p-5 border-b border-border text-center">
|
|
<div className="flex justify-center">
|
|
<Check className="size-5 text-primary-cta" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |