Fix UI sizing on pricing, update text to Get Pro and /year, resolve 500 error

This commit is contained in:
2026-07-09 17:20:44 +05:30
parent 22b167b985
commit 3cc72cb327
4 changed files with 29 additions and 28 deletions

View File

@@ -105,11 +105,11 @@ export default function UpgradePage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-start">
{/* Free Tier */}
<Card className="bg-background/80 backdrop-blur-md border-white p-8 rounded-[2.5rem] flex flex-col h-full z-10 relative">
<Card className="bg-background/80 backdrop-blur-md border-white p-6 rounded-[2rem] flex flex-col h-full z-10 relative">
<CardHeader>
<CardTitle className="text-2xl">Free</CardTitle>
<CardDescription>Basic access for everyone.</CardDescription>
<div className="mt-4 font-black text-4xl">₹10<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
<div className="mt-4 font-black text-4xl">₹10<span className="text-xl text-muted-foreground font-normal">/month</span></div>
</CardHeader>
<CardContent className="space-y-4 text-sm font-medium">
<div className="flex items-center gap-3"><Check className="text-white" size={18}/> Subject-wise diagnostics</div>
@@ -119,16 +119,16 @@ export default function UpgradePage() {
<div className="flex items-center gap-3 text-muted-foreground opacity-50"><Minus size={18}/> Parent Analytics</div>
</CardContent>
<CardFooter>
<Button variant="outline" className="w-full rounded-2xl h-16 border-white text-white font-bold text-lg hover:bg-secondary hover:text-white" disabled>Current Plan</Button>
<Button variant="outline" className="w-full rounded-2xl h-12 border-white text-white font-bold text-lg hover:bg-secondary hover:text-white" disabled>Current Plan</Button>
</CardFooter>
</Card>
{/* Pro Tier */}
<Card className="bg-background/80 backdrop-blur-md border-yellow-500 p-8 rounded-[2.5rem] flex flex-col h-full z-10 relative">
<Card className="bg-background/80 backdrop-blur-md border-yellow-500 p-6 rounded-[2rem] flex flex-col h-full z-10 relative">
<CardHeader>
<CardTitle className="text-2xl text-yellow-500">Pro</CardTitle>
<CardDescription>For serious aspirants.</CardDescription>
<div className="mt-4 font-black text-4xl">₹1299<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
<div className="mt-4 font-black text-4xl">₹1299<span className="text-xl text-muted-foreground font-normal">/month</span></div>
</CardHeader>
<CardContent className="space-y-4 text-sm font-medium">
<div className="flex items-center gap-3"><Check className="text-yellow-500" size={18}/> Everything in Free</div>
@@ -140,21 +140,21 @@ export default function UpgradePage() {
</CardContent>
<CardFooter>
<Button
className="w-full bg-yellow-500 text-black hover:bg-yellow-400 font-bold text-lg rounded-2xl h-16"
className="w-full bg-yellow-500 text-black hover:bg-yellow-400 font-bold text-lg rounded-2xl h-12"
onClick={() => handleUpgrade("Pro")}
disabled={!!loadingTier}
>
{loadingTier === "Pro" ? <Loader2 className="animate-spin" /> : "Upgrade to Pro"}
{loadingTier === "Pro" ? <Loader2 className="animate-spin" /> : "Get Pro"}
</Button>
</CardFooter>
</Card>
{/* AI Coach Tier */}
<Card className="bg-secondary/30 backdrop-blur-xl border-[#00F0FF] p-8 rounded-[2.5rem] flex flex-col transition-all h-full relative">
<Card className="bg-secondary/30 backdrop-blur-xl border-[#00F0FF] p-6 rounded-[2rem] flex flex-col transition-all h-full relative">
<CardHeader>
<CardTitle className="text-2xl flex items-center gap-2 text-[#00F0FF]">AI Coach <ShieldCheck size={24} className="text-[#00F0FF]"/></CardTitle>
<CardDescription>Personalized mastery loop.</CardDescription>
<div className="mt-4 font-black text-4xl">₹1599<span className="text-xl text-muted-foreground font-normal">/mo</span></div>
<div className="mt-4 font-black text-4xl">₹1599<span className="text-xl text-muted-foreground font-normal">/month</span></div>
</CardHeader>
<CardContent className="space-y-4 text-sm font-medium">
<div className="flex items-center gap-3"><Check className="text-[#00F0FF]" size={18}/> Everything in Pro</div>
@@ -165,7 +165,7 @@ export default function UpgradePage() {
</CardContent>
<CardFooter>
<Button
className="w-full font-bold text-lg rounded-2xl h-16 bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all"
className="w-full font-bold text-lg rounded-2xl h-12 bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all"
onClick={() => handleUpgrade("Al_Coach")}
disabled={!!loadingTier}
>
@@ -180,7 +180,7 @@ export default function UpgradePage() {
<div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
<Card className="max-w-md w-full shadow-2xl border-primary">
<CardHeader className="text-center pb-2">
<div className="mx-auto w-16 h-16 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
<div className="mx-auto w-16 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
<span className="text-white font-black text-2xl">RZP</span>
</div>
<CardTitle>Mock Checkout Window</CardTitle>