Pricing Section

import { Component as PricingSection } from "@/components/ui/pricing-section";

const tiers = [
  {
    name: "Starter",
    description: "For individuals and side projects.",
    monthlyPrice: 0,
    yearlyPrice: 0,
    cta: "Get Started Free",
    features: [
      { text: "3 active projects", included: true },
      { text: "1 GB storage", included: true },
      { text: "Community support", included: true },
      { text: "Basic analytics", included: true },
      { text: "Custom domains", included: false },
      { text: "Priority support", included: false },
    ],
  },
  {
    name: "Pro",
    description: "For growing teams shipping fast.",
    monthlyPrice: 29,
    yearlyPrice: 24,
    cta: "Start Free Trial",
    popular: true,
    badge: "Most Popular",
    features: [
      { text: "Unlimited projects", included: true },
      { text: "50 GB storage", included: true },
      { text: "Priority support", included: true },
      { text: "Advanced analytics", included: true },
      { text: "Custom domains", included: true },
      { text: "Team collaboration", included: true },
      { text: "API access", included: true },
    ],
  },
  {
    name: "Enterprise",
    description: "For organizations at scale.",
    monthlyPrice: 79,
    yearlyPrice: 66,
    cta: "Contact Sales",
    features: [
      { text: "Unlimited everything", included: true },
      { text: "1 TB storage", included: true },
      { text: "Dedicated support", included: true },
      { text: "Custom analytics", included: true },
      { text: "White-label option", included: true },
      { text: "SSO & SAML", included: true },
      { text: "SLA guarantee", included: true },
      { text: "Custom integrations", included: true },
    ],
  },
];

export default function Demo() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background">
      <PricingSection tiers={tiers} />
    </div>
  );
}