Prompt for Replit

Implement a Monthly/Yearly billing toggle on the Pricing page and show explicit prices (no “contact for price” on Pro).

Changes

Create/replace src/pages/PricingPage.tsx with the code I provide below.

Ensure the page uses Tailwind and matches our current 3-card layout.

Toggle defaults to Monthly. When set to Yearly, only the Pro price changes to $190 /year. Free remains $0 /forever. Enterprise remains Custom — contact us.

Keep the “Most Popular” badge on Pro. Animate price text change with a small fade.

Add route /pricing and link it in:

Top menu: label Pricing

Footer: under “Company” (or similar), label Pricing

Do not add “save X%” copy, and don’t hide prices. Accessibility: the toggle is a 2-button group with aria-pressed and proper labels.

Keep “Start Pro Trial” and “Contact Sales” buttons wired to existing handlers if present; otherwise leave as anchors (href="/signup" and href="/contact").

Acceptance

Visiting /pricing shows the three cards.

Switching the toggle updates the Pro price and the “/month” vs “/year” unit.

No console errors or layout shifts.

src/pages/PricingPage.tsx
import React, { useMemo, useState } from "react";

/**
 * PricingPage
 * - 3 cards: Free, Pro (Most Popular), Enterprise
 * - Billing toggle: Monthly / Yearly
 * - Pro: $19/mo OR $190/yr (no discount badge/copy)
 * - Accessible button-group toggle
 */
export default function PricingPage() {
  const [billing, setBilling] = useState<"monthly" | "yearly">("monthly");

  const prices = useMemo(
    () => ({
      free: { amount: "$0", unit: "/forever" },
      pro:
        billing === "monthly"
          ? { amount: "$19", unit: "/month" }
          : { amount: "$190", unit: "/year" },
      enterprise: { amount: "Custom", unit: "/contact us" },
    }),
    [billing]
  );

  const Check = (props: React.SVGProps<SVGSVGElement>) => (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      {...props}
      className={"w-5 h-5 " + (props.className ?? "")}
    >
      <path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );

  return (
    <div className="w-full">
      {/* Header */}
      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 text-center">
        <h1 className="text-3xl md:text-4xl font-extrabold">Simple, Transparent Pricing</h1>
        <p className="mt-2 text-gray-600">
          Choose the perfect plan for your business needs. Start free and upgrade as you grow.
        </p>

        {/* Billing Toggle */}
        <div className="mt-6 flex justify-center" role="group" aria-label="Billing cycle">
          <div className="inline-flex items-center rounded-full bg-gray-100 p-1">
            <button
              type="button"
              onClick={() => setBilling("monthly")}
              aria-pressed={billing === "monthly"}
              data-billing="monthly"
              className={
                "px-4 py-2 rounded-full text-sm font-medium transition " +
                (billing === "monthly" ? "bg-green-500 text-white shadow" : "text-gray-700")
              }
            >
              Monthly
            </button>
            <button
              type="button"
              onClick={() => setBilling("yearly")}
              aria-pressed={billing === "yearly"}
              data-billing="yearly"
              className={
                "px-4 py-2 rounded-full text-sm font-medium transition " +
                (billing === "yearly" ? "bg-green-500 text-white shadow" : "text-gray-700")
              }
            >
              Yearly
            </button>
          </div>
        </div>
      </div>

      {/* Cards */}
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 grid gap-6 md:grid-cols-3">
        {/* Free */}
        <div className="rounded-xl border bg-white shadow-sm p-6 flex flex-col">
          <h3 className="text-xl font-bold text-center">Free</h3>
          <div className="mt-3 text-center">
            <Price amount={prices.free.amount} unit={prices.free.unit} />
          </div>

          <p className="mt-4 text-center text-gray-600">
            Perfect for getting started with basic brand tools
          </p>

          <ul className="mt-6 space-y-3">
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>3 Business Name generations</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Basic logo templates</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Standard support</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Community access</span>
            </li>
          </ul>

          <a
            href="/signup"
            className="mt-6 w-full inline-flex justify-center items-center rounded-lg border px-4 py-2 font-medium"
          >
            Get Started Free
          </a>
        </div>

        {/* Pro (Most Popular) */}
        <div className="relative rounded-xl border-2 border-green-500 bg-white shadow-lg p-6 flex flex-col">
          {/* Badge */}
          <div className="absolute -top-3 inset-x-0 flex justify-center">
            <div className="px-3 py-1 rounded-full bg-green-500 text-white text-sm font-semibold shadow">
              ★ Most Popular
            </div>
          </div>

          <h3 className="text-xl font-bold text-center mt-2">Pro</h3>

          <div className="mt-3 text-center">
            <Price amount={prices.pro.amount} unit={prices.pro.unit} fadeKey={billing} />
          </div>

          <p className="mt-4 text-center text-gray-600">
            Everything you need to build a complete professional brand
          </p>

          <ul className="mt-6 space-y-3">
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Unlimited Business Name generations</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Complete Brand Kit creation</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Slogan Generator with AI suggestions</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Business Plan Generator</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Domain search integration</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Export to PDF, DOCX, Google Docs</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Premium logo templates</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Priority support</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Commercial usage rights</span>
            </li>
          </ul>

          <a
            href="/signup"
            className="mt-6 w-full inline-flex justify-center items-center rounded-lg bg-green-500 text-white px-4 py-2 font-semibold hover:opacity-95"
          >
            Start Pro Trial
          </a>
        </div>

        {/* Enterprise */}
        <div className="rounded-xl border bg-white shadow-sm p-6 flex flex-col">
          <h3 className="text-xl font-bold text-center">Enterprise</h3>
          <div className="mt-3 text-center">
            <Price amount={prices.enterprise.amount} unit={prices.enterprise.unit} />
          </div>

          <p className="mt-4 text-center text-gray-600">
            Tailored solutions for teams and large organizations
          </p>

          <ul className="mt-6 space-y-3">
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Everything in Pro</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Custom brand guidelines</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Team collaboration tools</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>White-label solutions</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>API access</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Dedicated account manager</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>Custom integrations</span>
            </li>
            <li className="flex items-start gap-2">
              <Check className="text-green-500 mt-0.5" />
              <span>SLA guarantees</span>
            </li>
          </ul>

          <a
            href="/contact"
            className="mt-6 w-full inline-flex justify-center items-center rounded-lg border px-4 py-2 font-medium"
          >
            Contact Sales
          </a>
        </div>
      </div>
    </div>
  );
}

/** Price component with a tiny fade on change (CSS-only, no lib). */
function Price({
  amount,
  unit,
  fadeKey,
}: {
  amount: string;
  unit: string;
  fadeKey?: string | number;
}) {
  return (
    <div className="inline-flex items-baseline gap-2">
      <span
        key={String(fadeKey) + amount}
        className="text-4xl md:text-5xl font-extrabold text-green-500 animate-[fade_200ms_ease]"
      >
        {amount}
      </span>
      <span className="text-gray-600">{unit}</span>
      {/* local keyframes */}
      <style>{`@keyframes fade{0%{opacity:.2;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}`}</style>
    </div>
  );
}


If your router/header/footer need updates, tell me what files those live in and I’ll give you the exact diffs. Otherwise—flip the toggle, watch the price swap, and boom: no “call me maybe.”