) First-time Pro Welcome Card (Profile)
DB (add 2 columns)
-- run once (SQLite)
ALTER TABLE users ADD COLUMN pro_activated_at TEXT;     -- set when Stripe webhook flips Pro
ALTER TABLE users ADD COLUMN pro_welcome_dismissed INT DEFAULT 0;


Update your Stripe webhook to stamp pro_activated_at:

// server/pay/stripe.ts (inside checkout.session.completed)
Users.setPaid(userId, true);
Subs.upsert(userId, String(session.customer), subId, true);
// NEW:
db.prepare("UPDATE users SET pro_activated_at = ? WHERE id = ?")
  .run(new Date().toISOString(), userId);


Expose these on /api/auth/me:

// server/auth/routes.ts (me endpoint)
const row = Users.findById(req.user!.id)!;
res.json({
  authenticated: true,
  email: row.email,
  isPaid: !!row.is_paid,
  proActivatedAt: row.pro_activated_at || null,
  proWelcomeDismissed: !!row.pro_welcome_dismissed
});


Dismiss endpoint:

// server/auth/routes.ts
import { db } from "../db";
router.post("/api/profile/dismiss-pro-welcome", requireAuth, (req, res) => {
  db.prepare("UPDATE users SET pro_welcome_dismissed = 1 WHERE id = ?").run(req.user!.id);
  res.json({ ok: true });
});


Profile UI card:

// src/pages/Profile/ProfilePage.tsx
function ProWelcomeCard({ onDismiss }: { onDismiss: () => void }) {
  return (
    <div className="rounded-2xl border p-5 bg-gradient-to-br from-teal-50 to-white mb-6">
      <h3 className="text-lg font-semibold mb-1">Welcome to Pro 🎉</h3>
      <p className="text-sm text-gray-600 mb-4">
        You’re unlocked. Start here to build your Business Development Kit:
      </p>
      <div className="flex flex-wrap gap-2">
        <a className="rounded-xl px-3 py-2 bg-black text-white" href="/brand">Open Brand Kit</a>
        <a className="rounded-xl px-3 py-2 border" href="/brand/slogan">Slogan Generator</a>
        <a className="rounded-xl px-3 py-2 border" href="/plan">Business Plan</a>
      </div>
      <button className="mt-4 text-sm underline" onClick={onDismiss}>Dismiss</button>
    </div>
  );
}

// within ProfilePage component after fetching `me`
const showProWelcome =
  !!me.isPaid && !me.proWelcomeDismissed && !!me.proActivatedAt;

const dismissWelcome = async () => {
  await fetch("/api/profile/dismiss-pro-welcome", { method: "POST", credentials: "include" });
  setMe({ ...me, proWelcomeDismissed: true });
};

// in JSX:
{showProWelcome && <ProWelcomeCard onDismiss={dismissWelcome} />}