UI Screenshot to React Component (sample)

// PricingPage.tsx
// Generated from screenshot. Drop into app/pricing/page.tsx or similar.

import { CheckIcon } from "lucide-react";

interface Plan {
  name: string;
  price: string;
  tagline: string;
  features: string[];
  cta: string;
  highlighted?: boolean;
}

const plans: Plan[] = [
  {
    name: "Starter",
    price: "$19",
    tagline: "For solo operators getting off the ground.",
    features: [
      "Up to 3 projects",
      "10,000 monthly operations",
      "Community support",
      "Export to CSV",
    ],
    cta: "Start free",
  },
  {
    name: "Growth",
    price: "$49",
    tagline: "For small teams shipping real products.",
    features: [
      "Unlimited projects",
      "100,000 monthly operations",
      "Priority email support",
      "Export to CSV + JSON + API",
      "Team collaboration (up to 5)",
    ],
    cta: "Start 14-day trial",
    highlighted: true,
  },
  {
    name: "Scale",
    price: "$199",
    tagline: "For teams with compliance needs.",
    features: [
      "Unlimited projects + workspaces",
      "Unlimited operations",
      "Dedicated success manager",
      "SSO + SCIM",
      "SOC 2 + HIPAA attestation",
      "Custom data retention",
    ],
    cta: "Contact sales",
  },
];

export default function PricingPage() {
  return (
    <main className="min-h-screen bg-slate-950 py-20 px-4 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-6xl">
        {/* Hero */}
        <div className="text-center mb-16">
          <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-tight">
            Simple pricing. No surprises.
          </h1>
          <p className="mt-4 text-lg text-slate-400 max-w-2xl mx-auto">
            Pick a plan that fits where you are today. Upgrade when you grow.
            Cancel any time.
          </p>
        </div>

        {/* Plan cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={`rounded-2xl p-8 border ${
                plan.highlighted
                  ? "border-cyan-400 bg-slate-900/80 ring-2 ring-cyan-400/20"
                  : "border-slate-800 bg-slate-900/60"
              }`}
            >
              {plan.highlighted && (
                <div className="mb-4 text-xs font-medium uppercase tracking-wider text-cyan-400">
                  Most popular
                </div>
              )}
              <h2 className="text-lg font-semibold text-white">{plan.name}</h2>
              <div className="mt-4 flex items-baseline">
                <span className="text-4xl font-bold text-white">{plan.price}</span>
                <span className="ml-2 text-sm text-slate-400">per month</span>
              </div>
              <p className="mt-2 text-sm text-slate-400">{plan.tagline}</p>
              <button
                className={`mt-6 w-full rounded-lg py-2.5 text-sm font-medium transition-colors ${
                  plan.highlighted
                    ? "bg-cyan-400 text-slate-950 hover:bg-cyan-300"
                    : "bg-slate-800 text-white hover:bg-slate-700"
                }`}
              >
                {plan.cta}
              </button>
              <ul className="mt-8 space-y-3">
                {plan.features.map((feature) => (
                  <li
                    key={feature}
                    className="flex items-start gap-2 text-sm text-slate-300"
                  >
                    <CheckIcon className="h-4 w-4 text-cyan-400 mt-0.5 shrink-0" />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* FAQ */}
        <section className="mt-24 max-w-3xl mx-auto">
          <h2 className="text-2xl font-semibold text-white text-center mb-10">
            Frequently asked questions
          </h2>
          <div className="space-y-6">
            {faq.map((item) => (
              <div key={item.q}>
                <h3 className="font-medium text-white">{item.q}</h3>
                <p className="mt-1 text-sm text-slate-400 leading-relaxed">{item.a}</p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </main>
  );
}

const faq = [
  {
    q: "Can I change plans later?",
    a: "Yes. Upgrade or downgrade any time from your account settings. Prorated billing applies.",
  },
  {
    q: "Do you offer annual billing?",
    a: "Yes. Annual plans save 20%. Contact sales for details.",
  },
  {
    q: "What counts as an operation?",
    a: "One operation = one primary action against our API. Read operations are free and unmetered.",
  },
];

// -----
// Notes for the buyer:
// - Uses lucide-react for icons. Install with: npm i lucide-react
// - Assumes Tailwind configured with slate + cyan palettes (default Tailwind).
// - FAQ is bottom-of-file for easy editing; move to its own module if it grows.
// - All plan data is inline. Wire to CMS or Stripe price API if dynamic pricing is needed.