let’s drop in a clean, on-brand Pricing page that reuses your Template layout, and wire it to both the top menu and the footer.

Below is copy-paste code you can hand to Replit. I’ve assumed a React + Tailwind setup and a reusable “Template” (page shell) you mentioned. If your Template export/path is different, just tweak the import line noted with a comment.

1) Pricing page (using your Template)

src/pages/Pricing/PricingPage.tsx

import { useState, useMemo } from "react";
// ⬇️ Adjust this import to match your Template component path/name
// Example options (pick one that matches your project):
// import Template from "@/pages/_Template";
// import Template from "@/components/layout/Template";
import Template from "@/components/layout/Template";

declare global {
  interface Window { openPaywallModal?: (opts?: any) => void }
}

export default function PricingPage() {
  const [annual, setAnnual] = useState(true);

  const priceLabel = useMemo(() => {
    return annual ? "$180/year" : "$19/month";
  }, [annual]);

  const subNote = useMemo(() => {
    return annual ? "≈ $15/mo (2 months free)" : "Billed monthly, cancel anytime";
  }, [annual]);

  const onUpgrade = () => {
    // If you have a PaywallModal helper, use it; otherwise call /api/pay/checkout
    if (typeof window.openPaywallModal === "function") {
      window.openPaywallModal({ source: "pricing_page" });
      return;
    }
    // Fallback: direct checkout
    fetch("/api/pay/checkout", { method: "POST", credentials: "include" })
      .then(r => r.json())
      .then(d => { if (d.url) window.location.href = d.url; });
  };

  return (
    <Template
      title="Pricing"
      description="Choose the plan that launches your brand fast."
      // Optional SEO
      meta={{ title: "Pricing — IBrandBiz", description: "Free vs Pro pricing for IBrandBiz" }}
    >
      <section className="max-w-5xl mx-auto py-8">
        {/* Toggle */}
        <div className="flex items-center justify-center gap-3 mb-8">
          <span className={`text-sm ${!annual ? "font-semibold" : "text-gray-500"}`}>Monthly</span>
          <button
            aria-label="Toggle annual billing"
            className={`relative w-14 h-8 rounded-full transition-colors ${annual ? "bg-black" : "bg-gray-300"}`}
            onClick={() => setAnnual(v => !v)}
          >
            <span
              className={`absolute top-1 h-6 w-6 rounded-full bg-white transition-transform ${annual ? "translate-x-7" : "translate-x-1"}`}
            />
          </button>
          <span className={`text-sm ${annual ? "font-semibold" : "text-gray-500"}`}>Annual</span>
          <span className="ml-2 text-xs px-2 py-1 rounded-full bg-green-100 text-green-800">2 months free</span>
        </div>

        {/* Plans */}
        <div className="grid md:grid-cols-2 gap-6">
          {/* Free */}
          <div className="rounded-2xl border p-6 bg-white">
            <h2 className="text-xl font-semibold mb-1">Free</h2>
            <p className="text-gray-600 text-sm mb-4">Try the toolkit — perfect for a quick taste.</p>
            <div className="text-3xl font-bold mb-1">$0</div>
            <div className="text-xs text-gray-500 mb-4">No credit card required</div>
            <ul className="text-sm space-y-2 mb-6">
              <li>• Name + basic slogan</li>
              <li>• Logo preview (low-res)</li>
              <li>• Color palette (3 colors)</li>
              <li>• Profile (Lite)</li>
            </ul>
            <a href="/profile" className="inline-flex items-center rounded-xl border px-4 py-2 text-sm">
              Continue free → Profile
            </a>
          </div>

          {/* Pro */}
          <div className="rounded-2xl border p-6 bg-white relative">
            <div className="absolute -top-3 right-4 text-xs bg-black text-white rounded-full px-3 py-1">Recommended</div>
            <h2 className="text-xl font-semibold mb-1">Pro</h2>
            <p className="text-gray-600 text-sm mb-4">Full Business Development Kit unlocked.</p>
            <div className="text-3xl font-bold mb-1">{priceLabel}</div>
            <div className="text-xs text-gray-500 mb-4">{subNote}</div>
            <ul className="text-sm space-y-2 mb-6">
              <li>• Full logo pack (SVG/PNG, transparent)</li>
              <li>• Expanded palettes + font pairings</li>
              <li>• Slogan & Business Plan — Pro modes</li>
              <li>• Export PDF / DOCX / Google Docs</li>
              <li>• Profile sync across devices</li>
              <li>• Phase 2 features auto-unlock</li>
            </ul>

            {/* Billing cadence helper text (static; Stripe plan stays monthly unless you add a yearly Price ID later) */}
            <div className="text-xs text-gray-500 mb-4">
              Choose annual in the billing portal after checkout to lock in yearly savings.
            </div>

            <button
              onClick={onUpgrade}
              className="w-full rounded-xl bg-black text-white py-3 font-semibold"
            >
              Upgrade to Pro
            </button>

            <div className="text-xs text-gray-500 mt-3">
              7-day refund policy. Cancel anytime.
            </div>
          </div>
        </div>

        {/* FAQ (lean) */}
        <div className="mt-12 grid md:grid-cols-3 gap-6 text-sm">
          <div>
            <div className="font-semibold mb-1">Can I cancel anytime?</div>
            <div className="text-gray-600">Yes. Your plan stays active until the end of the billing period.</div>
          </div>
          <div>
            <div className="font-semibold mb-1">Do you offer a yearly plan?</div>
            <div className="text-gray-600">Yes — save 2 months when billed annually.</div>
          </div>
          <div>
            <div className="font-semibold mb-1">What’s included in Pro?</div>
            <div className="text-gray-600">All Phase-1 tools unlocked + exports, with Phase-2 access when launched.</div>
          </div>
        </div>
      </section>
    </Template>
  );
}

2) Add the route

Where you define routes (e.g., src/App.tsx or your router file):

import PricingPage from "@/pages/Pricing/PricingPage";

// ...
<Route path="/pricing" element={<PricingPage />} />

3) Hook it to the top menu

src/components/Header.tsx (or your nav component)

// inside your nav links
<a href="/pricing" className="hover:opacity-80">Pricing</a>


If you’re using a mobile menu, add the same link there too.

4) Hook it to the footer

src/components/Footer.tsx

// e.g., under “Company” or “Product” column
<ul className="space-y-2 text-sm">
  <li><a href="/pricing" className="hover:underline">Pricing</a></li>
  <!-- other footer links -->
</ul>

5) (Optional) connect the toggle to a true yearly plan

Right now the UI shows Annual vs Monthly and nudges them to switch in the billing portal. If/when you add a yearly Stripe Price ID, you can wire the toggle to hit a different endpoint:

// server/pay/stripe.ts
// Accept cadence param "monthly" | "annual"
router.post("/api/pay/checkout", requireAuth, async (req, res) => {
  const cadence = req.body?.cadence === "annual" ? "annual" : "monthly";
  const priceId = cadence === "annual" ? process.env.STRIPE_PRICE_ID_ANNUAL! : process.env.STRIPE_PRICE_ID!;
  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${APP_BASE_URL}/profile?upgraded=1`,
    cancel_url: `${APP_BASE_URL}/pricing?canceled=1`,
    customer_email: req.user!.email,
    metadata: { userId: String(req.user!.id), cadence },
  });
  res.json({ url: session.url });
});


And pass the cadence from the page:

fetch("/api/pay/checkout", {
  method: "POST",
  credentials: "include",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ cadence: annual ? "annual" : "monthly" })
})

6) Copy & style are aligned with your Phase-1 offer

Free = teaser

Pro = $19/month or $180/year (2 months free)

One simple gate (no per-feature nickel-and-diming), exactly as we aligned.