Here’s how we can add a Monthly / Yearly toggle:

✅ Flow

Place a toggle switch (or button group) above the pricing cards.

Default to Monthly (like now).

When the user clicks Yearly, swap the numbers:

Pro → $190/year (instead of $19/month — gives 2 months free).

Free and Enterprise stay the same.

Add a smooth animation so the price transitions instead of snapping.

⚡ React + Tailwind Example (Replit-friendly)
import React, { useState } from "react";

export default function PricingPage() {
  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly");

  const prices = {
    pro: billingCycle === "monthly" ? "$19" : "$190",
    free: "$0",
    enterprise: "Custom",
  };

  return (
    <div className="w-full max-w-5xl mx-auto p-6">
      {/* Toggle */}
      <div className="flex justify-center mb-6">
        <div className="bg-gray-100 rounded-full flex p-1">
          <button
            onClick={() => setBillingCycle("monthly")}
            className={`px-4 py-2 rounded-full transition ${
              billingCycle === "monthly" ? "bg-green-500 text-white" : "text-gray-700"
            }`}
          >
            Monthly
          </button>
          <button
            onClick={() => setBillingCycle("yearly")}
            className={`px-4 py-2 rounded-full transition ${
              billingCycle === "yearly" ? "bg-green-500 text-white" : "text-gray-700"
            }`}
          >
            Yearly
          </button>
        </div>
      </div>

      {/* Pricing cards */}
      <div className="grid md:grid-cols-3 gap-6 text-center">
        {/* Free */}
        <div className="border rounded-lg p-6 shadow-sm">
          <h3 className="text-xl font-bold">Free</h3>
          <p className="text-3xl font-extrabold text-green-500">{prices.free}</p>
          <p className="text-gray-500">/forever</p>
        </div>

        {/* Pro */}
        <div className="border-2 border-green-500 rounded-lg p-6 shadow-lg">
          <h3 className="text-xl font-bold">Pro</h3>
          <p className="text-3xl font-extrabold text-green-500">{prices.pro}</p>
          <p className="text-gray-500">
            {billingCycle === "monthly" ? "/month" : "/year"}
          </p>
          <button className="mt-4 bg-green-500 text-white px-4 py-2 rounded-lg">
            Start Pro Trial
          </button>
        </div>

        {/* Enterprise */}
        <div className="border rounded-lg p-6 shadow-sm">
          <h3 className="text-xl font-bold">Enterprise</h3>
          <p className="text-3xl font-extrabold text-green-500">{prices.enterprise}</p>
          <p className="text-gray-500">/contact us</p>
          <button className="mt-4 border px-4 py-2 rounded-lg">Contact Sales</button>
        </div>
      </div>
    </div>
  );
}


🔥 With this, you’ll have a clean switch above the cards. Users can flip between Monthly and Yearly, and only the Pro price updates.