Pricing Card

import { PricingCard } from "@/components/ui/pricing-card";

// Data for the Personal Plan
const personalPlanFeatures = [
  "Allow multiple users to access and manage the finances",
  "Analyze your cash flow in detail to make informed decisions",
  "Automatically track and categorize expenses to save time",
  "Get personalized support with a dedicated account manager",
];

// Data for the Business Plan
const businessPlanFeatures = [
    "Allow multiple users to access and manage the finances",
    "Analyze your cash flow in detail to make informed decisions",
    "Automatically track and categorize expenses to save time",
    "Get personalized support with a dedicated account manager",
];

export default function PricingPageDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4 md:p-8">
      <div className="flex flex-col items-center gap-8 md:flex-row md:items-start">
        <PricingCard
          variant="default"
          isPopular={true}
          planName="Personal Plan"
          price="$25"
          billingCycle="/month"
          description="All-In-One Solution for Business Finances"
          features={personalPlanFeatures}
          buttonText="Subscribe this plan"
          footnote="*Ideal for: Individuals looking to manage their personal finances with essential tools."
        />
        <PricingCard
          variant="primary"
          planName="Business Plan"
          price="$50"
          billingCycle="/month"
          description="All-In-One Solution for Business Finances"
          features={businessPlanFeatures}
          buttonText="Subscribe this plan"
          footnote="*Ideal for: Enterprises looking to manage their personal finances with essential tools."
        />
      </div>
    </div>
  );
}