design: cyan -> rgb(12,96,96) in light theme, #00F0FF stays in dark theme
- globals.css: add --cyan-ai CSS variable (rgb(12,96,96) light / #00F0FF dark) + opacity variants --cyan-ai-10/20/30/40/50/80 - Bulk replace all #00F0FF hardcoded Tailwind arbitrary values with var(--cyan-ai) / var(--cyan-ai-10) / etc across 55+ TSX/TS files - Shadow glow colours also updated (suppressed by box-shadow:none in light mode) - TypeScript: 0 errors
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
"use client"
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
|
||||
@@ -73,20 +73,20 @@ export default function UpgradePage() {
|
||||
{/* AI Coach Tier */}
|
||||
<Card className="bg-background/80 backdrop-blur-md border border-border p-6 rounded-[2rem] flex flex-col justify-between h-full z-10 relative shadow-xl hover:border-border/80 transition-colors">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold mb-2 text-[#00F0FF]">AI Coach</h3>
|
||||
<h3 className="text-3xl font-bold mb-2 text-[var(--cyan-ai)]">AI Coach</h3>
|
||||
<p className="text-muted-foreground mb-6 text-base">The complete AI-driven system.</p>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-6 text-[#00F0FF]">
|
||||
₹11,999<span className="text-xl text-[#00F0FF]/60 font-medium tracking-normal ml-1">/year</span>
|
||||
<div className="text-6xl font-bold tracking-tighter mb-6 text-[var(--cyan-ai)]">
|
||||
₹11,999<span className="text-xl text-[var(--cyan-ai-50)] font-medium tracking-normal ml-1">/year</span>
|
||||
</div>
|
||||
<ul className="space-y-3 mb-6 font-medium text-lg">
|
||||
<li className="flex items-center gap-4"><CheckCircle2 className="text-[#00F0FF] shrink-0" size={24}/> Everything in Pro</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 className="text-[#00F0FF] shrink-0" size={24}/> AI Spaced Repetition (Mistakes)</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 className="text-[#00F0FF] shrink-0" size={24}/> 24/7 Streaming AI Tutor Chat</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 className="text-[#00F0FF] shrink-0" size={24}/> Predictive Rank & College Predictor</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 className="text-[var(--cyan-ai)] shrink-0" size={24}/> Everything in Pro</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 className="text-[var(--cyan-ai)] shrink-0" size={24}/> AI Spaced Repetition (Mistakes)</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 className="text-[var(--cyan-ai)] shrink-0" size={24}/> 24/7 Streaming AI Tutor Chat</li>
|
||||
<li className="flex items-center gap-4"><CheckCircle2 className="text-[var(--cyan-ai)] shrink-0" size={24}/> Predictive Rank & College Predictor</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Button
|
||||
className="w-full font-bold text-lg rounded-2xl h-12 bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all"
|
||||
className="w-full font-bold text-lg rounded-2xl h-12 bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] transition-all"
|
||||
onClick={() => handleUpgrade("Al_Coach")}
|
||||
disabled={userLoading}
|
||||
>
|
||||
@@ -115,7 +115,7 @@ export default function UpgradePage() {
|
||||
<th className="p-4 md:p-6 font-bold text-lg w-1/2 border-l border-t border-border/50">Feature</th>
|
||||
{/* <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 border-x border-t border-white">Free</th> */}
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-yellow-500 border-x border-t border-yellow-500">Pro</th>
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-[#00F0FF] bg-[#00F0FF]/5 border-x border-t border-[#00F0FF]">AI Coach</th>
|
||||
<th className="p-4 md:p-6 font-bold text-lg text-center w-1/4 text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] border-x border-t border-[var(--cyan-ai)]">AI Coach</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border/30 text-sm md:text-base">
|
||||
@@ -151,8 +151,8 @@ export default function UpgradePage() {
|
||||
<td className="p-4 md:p-6 text-center border border-yellow-500">
|
||||
{typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-yellow-500" size={20} /> : <Minus className="mx-auto text-yellow-500/30" size={20} />) : <span className="font-semibold text-yellow-500">{feature.pro}</span>}
|
||||
</td>
|
||||
<td className="p-4 md:p-6 text-center bg-[#00F0FF]/5 border border-[#00F0FF]">
|
||||
{typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[#00F0FF]" size={20} /> : <Minus className="mx-auto text-[#00F0FF]/30" size={20} />) : <span className="font-semibold text-[#00F0FF]">{feature.ai}</span>}
|
||||
<td className="p-4 md:p-6 text-center bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai)]">
|
||||
{typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[var(--cyan-ai)]" size={20} /> : <Minus className="mx-auto text-[var(--cyan-ai-30)]" size={20} />) : <span className="font-semibold text-[var(--cyan-ai)]">{feature.ai}</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user