88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Check } from "lucide-react";
|
|
|
|
const tiers = [
|
|
{
|
|
name: "Starter",
|
|
price: "$499",
|
|
description: "Perfect for small local businesses and personal brands.",
|
|
features: ["5 Pages", "Mobile Responsive", "Basic SEO", "Contact Form", "1 Month Support"],
|
|
cta: "Get Started",
|
|
highlighted: false,
|
|
},
|
|
{
|
|
name: "Business",
|
|
price: "$999",
|
|
description: "The best value for growing companies and restaurants.",
|
|
features: ["10 Pages", "Advanced SEO", "Custom Animations", "CMS Integration", "3 Months Support", "Free Domain (1yr)"],
|
|
cta: "Most Popular",
|
|
highlighted: true,
|
|
},
|
|
{
|
|
name: "Enterprise",
|
|
price: "Custom",
|
|
description: "Tailored solutions for complex needs and large scale apps.",
|
|
features: ["Unlimited Pages", "E-commerce Ready", "Priority Support", "Custom Integrations", "Performance Audit", "Monthly Maintenance"],
|
|
cta: "Contact Us",
|
|
highlighted: false,
|
|
},
|
|
];
|
|
|
|
export function Pricing() {
|
|
return (
|
|
<section className="py-20">
|
|
<Container>
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<Heading>Simple, Transparent Pricing</Heading>
|
|
<Subheading>
|
|
Choose the plan that fits your business needs. No hidden fees, ever.
|
|
</Subheading>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{tiers.map((tier, index) => (
|
|
<div
|
|
key={index}
|
|
className={`relative p-8 rounded-2xl border ${
|
|
tier.highlighted
|
|
? "border-primary shadow-xl scale-105 z-10 bg-background"
|
|
: "border-border bg-background/50"
|
|
}`}
|
|
>
|
|
{tier.highlighted && (
|
|
<span className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-primary text-primary-foreground text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">
|
|
Best Value
|
|
</span>
|
|
)}
|
|
<div className="mb-8">
|
|
<h3 className="text-xl font-bold mb-2">{tier.name}</h3>
|
|
<div className="flex items-baseline gap-1 mb-4">
|
|
<span className="text-4xl font-bold">{tier.price}</span>
|
|
{tier.price !== "Custom" && <span className="text-muted-foreground">/project</span>}
|
|
</div>
|
|
<p className="text-muted-foreground text-sm">{tier.description}</p>
|
|
</div>
|
|
<ul className="space-y-4 mb-8">
|
|
{tier.features.map((feature, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-sm">
|
|
<Check className="w-4 h-4 text-primary shrink-0" />
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button
|
|
className="w-full"
|
|
variant={tier.highlighted ? "default" : "outline"}
|
|
>
|
|
{tier.cta}
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|