asdasd

frontend/src/pages/Payment.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate, Link } from "react-router-dom";
+
+const PLAN_COPY: Record<string, { name: string; price: string; credits: string }> = {
+  starter: { name: "Starter", price: "$89/mo", credits: "1,000 credits/month" },
+  growth: { name: "Growth", price: "$139/mo", credits: "2,000 credits/month" },
+  scale: { name: "Scale", price: "$229/mo", credits: "4,000 credits/month" },
+};
+
+export default function Payment() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [contactEmail, setContactEmail] = useState("");
+  const [note, setNote] = useState("");
+
+  const planSlug = useMemo(() => new URLSearchParams(location.search).get("plan") || "", [location.search]);
+  const plan = planSlug ? PLAN_COPY[planSlug] : null;
+
+  useEffect(() => {
+    if (!plan) {
+      navigate("/pricing", { replace: true });
+    }
+  }, [plan, navigate]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4 py-16">
+      <div className="w-full max-w-3xl bg-white rounded-2xl shadow-lg p-8 space-y-6 border border-slate-100">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-slate-500">Confirm your plan</p>
+            <h1 className="text-2xl font-semibold text-slate-900">Complete your subscription</h1>
+          </div>
+          <Link to="/pricing" className="text-sm text-blue-600 hover:text-blue-700">
+            Change plan
+          </Link>
+        </div>
+
+        {plan && (
+          <div className="rounded-xl border border-slate-200 bg-slate-50 p-4">
+            <h2 className="text-lg font-semibold text-slate-900">{plan.name}</h2>
+            <p className="text-slate-700">{plan.price}</p>
+            <p className="text-sm text-slate-600">{plan.credits}</p>
+            <p className="text-xs text-amber-700 mt-2">
+              Payment is completed offline (bank transfer). Submit your email below and we will send payment instructions.
+            </p>
+          </div>
+        )}
+
+        <div className="space-y-4">
+          <label className="block text-sm font-medium text-slate-800">
+            Contact email
+            <input
+              type="email"
+              value={contactEmail}
+              onChange={(e) => setContactEmail(e.target.value)}
+              placeholder="you@example.com"
+              className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 focus:border-blue-500 focus:outline-none"
+            />
+          </label>
+          <label className="block text-sm font-medium text-slate-800">
+            Notes (optional)
+            <textarea
+              value={note}
+              onChange={(e) => setNote(e.target.value)}
+              placeholder="Company name, billing contact, or questions"
+              className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-slate-900 focus:border-blue-500 focus:outline-none"
+              rows={3}
+            />
+          </label>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Link to="/signup" className="text-sm text-slate-600 hover:text-slate-800">
+            Prefer the free plan? Start your trial
+          </Link>
+          <a
+            href={`mailto:sales@igny8.com?subject=Subscribe to ${plan?.name || ""}&body=Plan: ${
+              plan?.name || ""
+            }%0AEmail: ${encodeURIComponent(contactEmail)}%0ANotes: ${encodeURIComponent(note)}`}
+            className="inline-flex items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700"
+          >
+            Request payment instructions
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+