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:
2026-09-20 12:19:23 +05:30
parent 0fab60b710
commit c17785e38a
57 changed files with 491 additions and 473 deletions

View File

@@ -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>
))}