Components
A clean, modern pricing section designed for SaaS and digital products, featuring a clear comparison between plans, a highlighted popular option, and a custom quote callout. The layout emphasizes readability, trust, and conversion with well-structured cards, concise feature lists, and strong call-to-action buttons.
Loading preview...
import { Pricing } from "@/components/ui/pricing-section";
export default function PricingDemo() {
return (
<Pricing
sectionTag="Pricing"
mainHeading="Affordable Pricing"
sectionDescription="Our pricing plans are designed to provide you with the tools, insights, and support needed to drive your sales success."
plans={[
{
name: "Basic",
subtitle: "Starting from",
monthlyPrice: 1499,
yearlyPrice: 1199,
billingPeriod: "month",
description: "Working closely with you to develop.",
features: [
{ text: "Customized Sales Strategy", iconType: "strategy" },
{ text: "Lead Generation Framework", iconType: "leads" },
{ text: "Sales Process Audit", iconType: "audit" },
{ text: "Monthly Performance Review", iconType: "performance" },
{ text: "CRM Integration & Automation", iconType: "automation" },
{ text: "Intensive Sales Training Program", iconType: "training" },
],
ctaText: "Get Started Now",
isPopular: false,
},
{
name: "Professional",
subtitle: "Starting from",
monthlyPrice: 2999,
yearlyPrice: 2399,
billingPeriod: "month",
description: "Working closely with you to develop.",
features: [
{ text: "Customized Sales Strategy", iconType: "strategy" },
{ text: "Lead Generation Framework", iconType: "leads" },
{ text: "Sales Process Audit", iconType: "audit" },
{ text: "Monthly Performance Review", iconType: "performance" },
{ text: "CRM Integration & Automation", iconType: "automation" },
{ text: "Intensive Sales Training Program", iconType: "training" },
],
ctaText: "Get Started Now",
isPopular: true,
badgeText: "Popular",
},
]}
customQuote={{
title: "Reach out for a custom quote.",
description:
"Tailored for large organizations needing a fully customized, end-to-end sales solution.",
ctaText: "Contact Sales",
}}
onPlanSelect={(planName) => console.log(`Selected plan: ${planName}`)}
onCustomQuote={() => console.log("Custom quote requested")}
/>
);
}