Components
Loading preview...
high-quality, reusable components, I'll create a sophisticated "Pricing Plan" component. This is a common and essential element for many websites, especially for SaaS products or services.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/pricing-for-teamsimport PricingCard from "@/components/ui/pricing-for-teams";
export default function DemoOne() {
const pricingPlans = [
{
planName: "Starter",
price: "29",
priceFrequency: "/month",
description: "For individuals and small teams getting started.",
features: [
"10 Projects",
"5 GB Storage",
"Basic Analytics",
"Community Support",
],
ctaText: "Choose Starter",
href: "#starter",
},
{
planName: "Pro",
price: "99",
priceFrequency: "/month",
description: "For growing businesses that need more power.",
features: [
"Unlimited Projects",
"100 GB Storage",
"Advanced Analytics",
"Priority Email Support",
"API Access",
],
ctaText: "Choose Pro",
href: "#pro",
isFeatured: true,
},
{
planName: "Enterprise",
price: "Custom",
priceFrequency: "",
description: "For large organizations with custom needs.",
features: [
"Everything in Pro",
"Dedicated Account Manager",
"Custom Integrations",
"24/7 Phone Support",
"SLA Guarantee",
],
ctaText: "Contact Sales",
href: "#enterprise",
},
];
return (
<div className="min-h-screen w-full bg-gray-50 font-sans text-gray-900 antialiased dark:bg-gray-900">
<div className="container mx-auto px-4 py-16 sm:py-24">
<header className="mb-16 text-center">
<h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl dark:text-white">
Flexible Pricing for Teams of Any Size
</h1>
<p className="mx-auto mt-4 max-w-2xl text-lg text-gray-500 dark:text-gray-400">
Choose the plan that's right for you. All plans come with a 14-day free trial, no credit card required.
</p>
</header>
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 lg:grid-cols-3">
{pricingPlans.map((plan, index) => (
<PricingCard key={index} {...plan} />
))}
</div>
</div>
</div>
);
}