Bob AI: Populate the newly-created page at src/pages/PricingPage.tsx
This commit is contained in:
kudinDmitriyUp
@@ -1,112 +1,144 @@
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import PricingCenteredCards from "@/components/sections/pricing/PricingCenteredCards";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Check } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: "Basic",
|
||||
price: "$10",
|
||||
frequency: "month",
|
||||
tag: "Basic",
|
||||
price: "€499/mo",
|
||||
description: "Ideal for startups and small businesses looking to establish an online presence.",
|
||||
features: [
|
||||
"1 User",
|
||||
"10GB Storage",
|
||||
"Email Support",
|
||||
"Basic Analytics",
|
||||
"Community Access",
|
||||
"Basic SEO Optimization",
|
||||
"Social Media Setup",
|
||||
"Content Calendar (2 posts/week)",
|
||||
"Monthly Performance Report",
|
||||
],
|
||||
buttonText: "Start Basic",
|
||||
buttonHref: "#",
|
||||
highlighted: false,
|
||||
primaryButton: { text: "Get Started", href: "/#contact" },
|
||||
},
|
||||
{
|
||||
name: "Pro",
|
||||
price: "$50",
|
||||
frequency: "month",
|
||||
tag: "Pro",
|
||||
price: "€999/mo",
|
||||
description: "Perfect for growing businesses aiming for significant digital growth and engagement.",
|
||||
features: [
|
||||
"5 Users",
|
||||
"100GB Storage",
|
||||
"Chat Support",
|
||||
"Advanced Analytics",
|
||||
"Priority Community Access",
|
||||
"Advanced SEO Strategy",
|
||||
"Full Social Media Management",
|
||||
"Content Creation (4 posts/week)",
|
||||
"Bi-Weekly Performance Reports",
|
||||
"Email Marketing Campaigns",
|
||||
],
|
||||
buttonText: "Go Pro",
|
||||
buttonHref: "#",
|
||||
highlighted: true,
|
||||
primaryButton: { text: "Choose Pro", href: "/#contact" },
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
tag: "Enterprise",
|
||||
price: "Custom",
|
||||
frequency: "",
|
||||
description: "Tailored solutions for large enterprises with complex marketing needs and ambitious goals.",
|
||||
features: [
|
||||
"Unlimited Users",
|
||||
"Unlimited Storage",
|
||||
"24/7 Phone Support",
|
||||
"Custom Integrations",
|
||||
"Dedicated Account Manager",
|
||||
"Comprehensive Digital Strategy",
|
||||
"Unlimited Content Creation",
|
||||
"Weekly Performance Reviews",
|
||||
"Advanced Analytics & Insights",
|
||||
"PR & Influencer Outreach",
|
||||
],
|
||||
buttonText: "Contact Us",
|
||||
buttonHref: "/contact",
|
||||
highlighted: false,
|
||||
primaryButton: { text: "Contact Us", href: "/#contact" },
|
||||
},
|
||||
];
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<NavbarCentered
|
||||
logo="Brand"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Get Started", href: "/contact" }}
|
||||
/>
|
||||
<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>
|
||||
|
||||
<main>
|
||||
<PricingCenteredCards
|
||||
heading="Simple, Transparent Pricing"
|
||||
description="Choose the plan that's right for your team. No hidden fees, no surprises."
|
||||
plans={plans}
|
||||
/>
|
||||
|
||||
<section className="py-16 bg-background text-foreground">
|
||||
<div className="container mx-auto px-4 max-w-4xl">
|
||||
<h2 className="text-3xl font-bold text-center mb-12">Compare Plans</h2>
|
||||
<div className="grid grid-cols-4 gap-4 text-center border border-border rounded-lg p-4 bg-card shadow-sm">
|
||||
<div className="font-medium text-muted-foreground text-left py-2">Feature</div>
|
||||
<div className="font-medium text-muted-foreground py-2">Basic</div>
|
||||
<div className="font-medium text-muted-foreground py-2">Pro</div>
|
||||
<div className="font-medium text-muted-foreground py-2">Enterprise</div>
|
||||
|
||||
<div className="text-left py-2 border-t border-border">Users</div>
|
||||
<div className="py-2 border-t border-border">1</div>
|
||||
<div className="py-2 border-t border-border">5</div>
|
||||
<div className="py-2 border-t border-border">Unlimited</div>
|
||||
|
||||
<div className="text-left py-2 border-t border-border">Storage</div>
|
||||
<div className="py-2 border-t border-border">10GB</div>
|
||||
<div className="py-2 border-t border-border">100GB</div>
|
||||
<div className="py-2 border-t border-border">Unlimited</div>
|
||||
|
||||
<div className="text-left py-2 border-t border-border">Support</div>
|
||||
<div className="py-2 border-t border-border">Email</div>
|
||||
<div className="py-2 border-t border-border">Chat</div>
|
||||
<div className="py-2 border-t border-border">24/7 Phone</div>
|
||||
|
||||
<div className="text-left py-2 border-t border-border">Analytics</div>
|
||||
<div className="py-2 border-t border-border">Basic</div>
|
||||
<div className="py-2 border-t border-border">Advanced</div>
|
||||
<div className="py-2 border-t border-border">Custom</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>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<FooterSimple
|
||||
logo="Brand"
|
||||
description="Your business, powered by us."
|
||||
socialLinks={[{ name: "Twitter", href: "#" }, { name: "LinkedIn", href: "#" }]}
|
||||
links={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
copyright="© 2024 Brand. All rights reserved."
|
||||
/>
|
||||
</section>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user