fix app direction: no more app loops

2026-05-19 21:50:36 +08:00
parent bad60cbf91
commit 76f1b8298a
11 changed files with 0 additions and 0 deletions
@@ -0,0 +1,151 @@
+"use client";
+
+import { Check } from "lucide-react";
+
+export default function BillingPage() {
+  const plans = [
+    {
+      name: "Free",
+      price: "$0",
+      description: "Perfect for getting started",
+      features: [
+        "10 messages/month",
+        "Access to featured characters",
+        "Basic support",
+      ],
+      current: true,
+    },
+    {
+      name: "Pro",
+      price: "$9.99",
+      period: "/month",
+      description: "For serious enthusiasts",
+      features: [
+        "Unlimited messages",
+        "Priority character creation",
+        "Custom characters",
+        "Ad-free experience",
+        "Priority support",
+      ],
+      current: false,
+    },
+    {
+      name: "Premium",
+      price: "$29.99",
+      period: "/month",
+      description: "Maximum experience",
+      features: [
+        "Everything in Pro",
+        "Advanced AI models",
+        "Character voice customization",
+        "Private character storage",
+        "White-label options",
+        "24/7 VIP support",
+      ],
+      current: false,
+    },
+  ];
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+      {/* Header */}
+      <div className="mb-12">
+        <h1 className="text-3xl font-bold mb-2">Billing & Plans</h1>
+        <p className="text-gray-600">Manage your subscription</p>
+      </div>
+
+      {/* Current Plan */}
+      <div className="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-12">
+        <p className="text-sm text-blue-600 font-semibold">CURRENT PLAN</p>
+        <h3 className="text-2xl font-bold mt-2">Free Plan</h3>
+        <p className="text-gray-600 mt-1">You're currently on the free plan</p>
+      </div>
+
+      {/* Plans Grid */}
+      <div className="grid md:grid-cols-3 gap-8">
+        {plans.map((plan, index) => (
+          <div
+            key={index}
+            className={`rounded-xl border-2 p-8 transition ${
+              plan.current
+                ? "border-black bg-white"
+                : "border-gray-200 hover:border-black"
+            }`}
+          >
+            {/* Badge */}
+            {plan.current && (
+              <div className="inline-block bg-black text-white px-3 py-1 rounded-full text-xs font-semibold mb-4">
+                Current Plan
+              </div>
+            )}
+
+            {/* Plan Name */}
+            <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
+            <p className="text-gray-600 text-sm mb-6">{plan.description}</p>
+
+            {/* Price */}
+            <div className="mb-6">
+              <span className="text-4xl font-bold">{plan.price}</span>
+              {plan.period && <span className="text-gray-600">{plan.period}</span>}
+            </div>
+
+            {/* CTA */}
+            <button
+              className={`w-full py-3 rounded-lg font-medium mb-6 transition ${
+                plan.current
+                  ? "bg-gray-100 text-gray-600 cursor-default"
+                  : "bg-black text-white hover:bg-gray-800"
+              }`}
+              disabled={plan.current}
+            >
+              {plan.current ? "Current Plan" : "Upgrade"}
+            </button>
+
+            {/* Features */}
+            <ul className="space-y-3">
+              {plan.features.map((feature, idx) => (
+                <li key={idx} className="flex items-start gap-3 text-sm">
+                  <Check className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+                  <span>{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      {/* Billing History */}
+      <div className="mt-12">
+        <h2 className="text-2xl font-bold mb-6">Billing History</h2>
+        <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Date</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Description</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Amount</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                { date: "Dec 1, 2024", desc: "Free Plan", amount: "$0.00", status: "Active" },
+              ].map((row, idx) => (
+                <tr key={idx} className="border-b border-gray-200 hover:bg-gray-50">
+                  <td className="px-6 py-4 text-sm">{row.date}</td>
+                  <td className="px-6 py-4 text-sm">{row.desc}</td>
+                  <td className="px-6 py-4 text-sm font-medium">{row.amount}</td>
+                  <td className="px-6 py-4 text-sm">
+                    <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold">
+                      {row.status}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}