Pricing Card This component is designed to display subscription or product tiers. It's built to be highly reusable—all content, including fees, offers, and the decorative image, is passed via props. This ensures you can use the same component for various pricing plans.
import { PricingCard } from "@/components/ui/pricing-card-2"; // Adjust the import path
/**
* A demo component to showcase the PricingCard.
* It displays two cards with different data, demonstrating the reusability
* and responsiveness of the component.
*/
export default function PricingCardDemo() {
const pricingData = [
{
cardTitle: "NeuCard Infinity",
joiningFeeOriginal: "₹1,499",
joiningFeeDiscounted: "₹0",
joiningFeeOffer: "Zero joining fee offer for limited time only",
renewalFee: "₹1499 + GST",
renewalFeeWaiver:
"*Renewal Fee of Rs. 1,499 waived off on spends of Rs 3 lakh or more in the preceding year",
decorativeImageUrl: "https://www.tataneu.com/creditcard/Right%20gradient%20strokes%201.png", // Placeholder image URL
},
{
cardTitle: "NeuCard Plus",
joiningFeeOriginal: "₹499",
joiningFeeDiscounted: "₹0",
joiningFeeOffer: "Zero joining fee offer for limited time only",
renewalFee: "₹499 + GST",
renewalFeeWaiver:
"*Renewal Fee of Rs. 499 waived off on spends of Rs 1 lakh or more in the preceding year",
decorativeImageUrl: "https://www.tataneu.com/creditcard/Right%20gradient%20strokes%201.png", // Placeholder image URL
},
];
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-4 sm:p-8">
<div className="flex flex-col items-center gap-8 md:flex-row md:items-stretch">
{pricingData.map((data, index) => (
<PricingCard key={index} {...data} />
))}
</div>
</div>
);
}