import { CheckCircle2, Minus } from "lucide-react";

const plans = [
  {
    name: "Starter",
    price: "$29",
    description: "For small teams launching a new product.",
    highlight: false,
  },
  {
    name: "Growth",
    price: "$79",
    description: "For teams scaling content and collaboration.",
    highlight: true,
  },
  {
    name: "Enterprise",
    price: "Custom",
    description: "For organizations with advanced requirements.",
    highlight: false,
  },
];

const rows = [
  {
    feature: "Unlimited blocks",
    values: [true, true, true],
  },
  {
    feature: "Shared workspace",
    values: [true, true, true],
  },
  {
    feature: "Custom themes",
    values: [false, true, true],
  },
  {
    feature: "Advanced analytics",
    values: [false, true, true],
  },
  {
    feature: "Dedicated onboarding",
    values: [false, false, true],
  },
  {
    feature: "Security review",
    values: [false, false, true],
  },
];

export function FeaturesComparisonTable() {
  return (
    <section className="card relative overflow-hidden rounded-3xl bg-card px-6 py-14">
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-20 top-0 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute -bottom-24 right-0 h-72 w-72 rounded-full bg-muted/60 blur-3xl" />
      </div>

      <div className="relative space-y-10">
        <div className="space-y-4">
          <p className="text-xs uppercase tracking-[0.3em] text-primary">
            Comparison table
          </p>
          <h2 className="text-3xl font-semibold text-foreground md:text-4xl">
            Compare plans and pick the right fit
          </h2>
          <p className="max-w-2xl text-sm text-muted-foreground md:text-base">
            Highlight what matters most with a clean comparison table. The
            layout stays legible with clear labels and spacing.
          </p>
        </div>

        <div className="overflow-x-auto">
          <div className="min-w-[720px] rounded-3xl border border-border/60 bg-card/60 p-6">
            <div className="grid grid-cols-[1.2fr_repeat(3,1fr)] gap-4 pb-6 text-sm">
              <div />
              {plans.map((plan) => (
                <div
                  key={plan.name}
                  className={
                    plan.highlight
                      ? "rounded-2xl border border-primary/30 bg-primary/5 p-4"
                      : "rounded-2xl border border-border/60 bg-card/60 p-4"
                  }
                >
                  {plan.highlight && (
                    <span className="rounded-full bg-primary/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-primary">
                      Most popular
                    </span>
                  )}
                  <div className="mt-3 text-lg font-semibold text-foreground">
                    {plan.name}
                  </div>
                  <div className="text-2xl font-semibold text-foreground">
                    {plan.price}
                  </div>
                  <p className="mt-2 text-xs text-muted-foreground">
                    {plan.description}
                  </p>
                </div>
              ))}
            </div>

            <div className="grid gap-3 text-sm">
              {rows.map((row) => (
                <div
                  key={row.feature}
                  className="grid grid-cols-[1.2fr_repeat(3,1fr)] items-center gap-4 rounded-2xl border border-border/60 bg-card/70 px-4 py-3"
                >
                  <span className="font-medium text-foreground">
                    {row.feature}
                  </span>
                  {row.values.map((value, index) => (
                    <div
                      key={`${row.feature}-${index}`}
                      className="flex items-center justify-center"
                    >
                      {value ? (
                        <CheckCircle2 className="h-4 w-4 text-primary" />
                      ) : (
                        <Minus className="h-4 w-4 text-muted-foreground" />
                      )}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Features Comparison Table

Preview

Compare plans and pick the right fit

Installation
