mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
9acc7a6043
- Created @hanzo/ui/billing package export in pkg/ui - Built SubscriptionPortal, PaymentMethodManager, InvoiceManager components - Added billing types (Subscription, PaymentMethod, Invoice) - Created 3 billing blocks in registry - Added billing documentation (subscription, payment, invoices) - All components use @hanzo/ui primitives - Full TypeScript support with proper exports - Mobile responsive and accessible - Build verified successful (132/132 pages generated)
127 lines
3.5 KiB
TypeScript
127 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { Check } from "lucide-react"
|
|
|
|
import { Badge } from "@/registry/default/ui/badge"
|
|
import { Button } from "@/registry/default/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/default/ui/card"
|
|
|
|
export const description =
|
|
"A pricing table with three tiers: Free, Pro, and Enterprise. Each tier displays features and a call-to-action button."
|
|
|
|
export const iframeHeight = "800px"
|
|
|
|
export const containerClassName = "w-full"
|
|
|
|
const tiers = [
|
|
{
|
|
name: "Free",
|
|
price: "$0",
|
|
description: "Perfect for getting started",
|
|
features: [
|
|
"Up to 10 components",
|
|
"Basic support",
|
|
"Community access",
|
|
"1 project",
|
|
],
|
|
cta: "Get Started",
|
|
highlighted: false,
|
|
},
|
|
{
|
|
name: "Pro",
|
|
price: "$29",
|
|
description: "For professional developers",
|
|
features: [
|
|
"Unlimited components",
|
|
"Priority support",
|
|
"Private repository access",
|
|
"Unlimited projects",
|
|
"Advanced analytics",
|
|
"Custom themes",
|
|
],
|
|
cta: "Start Free Trial",
|
|
highlighted: true,
|
|
badge: "Popular",
|
|
},
|
|
{
|
|
name: "Enterprise",
|
|
price: "Custom",
|
|
description: "For large teams and organizations",
|
|
features: [
|
|
"Everything in Pro",
|
|
"Dedicated support",
|
|
"SLA guarantee",
|
|
"Custom integrations",
|
|
"On-premise deployment",
|
|
"Training & onboarding",
|
|
],
|
|
cta: "Contact Sales",
|
|
highlighted: false,
|
|
},
|
|
]
|
|
|
|
export default function Component() {
|
|
return (
|
|
<div className="w-full py-12">
|
|
<div className="container px-4 md:px-6">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
|
Simple, transparent pricing
|
|
</h2>
|
|
<p className="mt-4 text-lg text-muted-foreground">
|
|
Choose the plan that's right for you
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-3">
|
|
{tiers.map((tier) => (
|
|
<Card
|
|
key={tier.name}
|
|
className={tier.highlighted ? "border-primary shadow-lg" : ""}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle>{tier.name}</CardTitle>
|
|
{tier.badge && <Badge variant="default">{tier.badge}</Badge>}
|
|
</div>
|
|
<CardDescription>{tier.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="mb-6">
|
|
<span className="text-4xl font-bold">{tier.price}</span>
|
|
{tier.price !== "Custom" && (
|
|
<span className="text-muted-foreground">/month</span>
|
|
)}
|
|
</div>
|
|
<ul className="space-y-3">
|
|
{tier.features.map((feature) => (
|
|
<li key={feature} className="flex items-start">
|
|
<Check className="mr-2 h-5 w-5 text-primary flex-shrink-0" />
|
|
<span className="text-sm">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button
|
|
className="w-full"
|
|
variant={tier.highlighted ? "default" : "outline"}
|
|
>
|
|
{tier.cta}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|