Tilt Card: Pricing Cards

import { TiltCard } from "@/components/ui/tilt-card";

const plans = [
  {
    name: "Hobby",
    price: "$0",
    blurb: "For side projects and experiments.",
    features: ["3 projects", "Community support", "Basic analytics"],
    featured: false,
  },
  {
    name: "Pro",
    price: "$24",
    blurb: "For teams shipping every week.",
    features: ["Unlimited projects", "Priority support", "Advanced analytics"],
    featured: true,
  },
  {
    name: "Team",
    price: "$79",
    blurb: "For organizations that need control.",
    features: ["SSO and audit logs", "Dedicated support", "Custom roles"],
    featured: false,
  },
];

export function TiltCardPricingDemo() {
  return (
    <div className="grid w-full max-w-4xl gap-5 md:grid-cols-3">
      {plans.map((plan) => (
        <TiltCard
          key={plan.name}
          maxTilt={plan.featured ? 14 : 8}
          scale={plan.featured ? 1.05 : 1.02}
          className={
            plan.featured
              ? "border border-zinc-900 bg-zinc-900 p-6 text-zinc-50 shadow-2xl dark:border-zinc-100 dark:bg-zinc-50 dark:text-zinc-900"
              : "border border-zinc-200 bg-white p-6 text-zinc-900 shadow-lg shadow-zinc-900/5 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-50 dark:shadow-black/30"
          }
        >
          <p className="font-mono text-xs uppercase tracking-widest opacity-60">
            {plan.name}
          </p>
          <p className="mt-4 text-4xl font-semibold tracking-tight">
            {plan.price}
            <span className="text-sm font-normal opacity-60"> / month</span>
          </p>
          <p className="mt-2 text-sm opacity-70">{plan.blurb}</p>
          <ul className="mt-6 space-y-2 text-sm">
            {plan.features.map((feature) => (
              <li key={feature} className="flex items-center gap-2">
                <span aria-hidden className="size-1.5 rounded-full bg-current opacity-50" />
                {feature}
              </li>
            ))}
          </ul>
        </TiltCard>
      ))}
    </div>
  );
}