naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: cyan -> rgb(12,96,96) in light theme, #00F0FF stays in dark theme

Browse Source 
- 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:
ectasy663
2026-09-20 12:19:23 +05:30
parent 0fab60b710
commit c17785e38a
57 changed files with 491 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/app/page.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
@@ -48,7 +48,7 @@ export default function MarketingPage() {
{/* Animated Deep Background */}
<div className="fixed inset-0 z-0 pointer-events-none bg-grid opacity-30"></div>
<div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 50% 0%, rgba(209, 255, 77, 0.05) 0%, transparent 50%)' }}></div>
<div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 100% 50%, rgba(0, 240, 255, 0.03) 0%, transparent 40%)' }}></div>
<div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 100% 50%, rgba(12, 96, 96, 0.03) 0%, transparent 40%)' }}></div>
{/* Floating Orbs (Using Framer Motion) */}
<motion.div
@@ -57,7 +57,7 @@ export default function MarketingPage() {
transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
/>
<motion.div
className="fixed bottom-1/4 right-1/4 size-[500px] rounded-full bg-[#00F0FF]/10 blur-[150px] pointer-events-none mix-blend-screen -z-10"
className="fixed bottom-1/4 right-1/4 size-[500px] rounded-full bg-[var(--cyan-ai-10)] blur-[150px] pointer-events-none mix-blend-screen -z-10"
animate={{ x: [0, -60, 30, 0], y: [0, 40, -50, 0] }}
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
/>
@@ -110,7 +110,7 @@ export default function MarketingPage() {
className="text-6xl md:text-8xl font-bold tracking-tighter max-w-5xl mx-auto leading-[1.1]"
>
NEET/JEE Prep, <br className="hidden md:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-[#00F0FF] to-primary animate-gradient pb-2 drop-shadow-[0_0_20px_rgba(209,255,77,0.3)]">Re-engineered by AI.</span>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-[var(--cyan-ai)] to-primary animate-gradient pb-2 drop-shadow-[0_0_20px_rgba(209,255,77,0.3)]">Re-engineered by AI.</span>
</motion.h1>
<motion.p
@@ -141,7 +141,7 @@ export default function MarketingPage() {
initial={{ opacity: 0, y: 40, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 1, delay: 0.6, type: "spring" }}
className="relative max-w-5xl mx-auto mt-20 rounded-[2rem] border border-border/60 bg-secondary/5 backdrop-blur-xl shadow-[0_0_50px_-15px_rgba(0,240,255,0.15)] overflow-hidden"
className="relative max-w-5xl mx-auto mt-20 rounded-[2rem] border border-border/60 bg-secondary/5 backdrop-blur-xl shadow-[0_0_50px_-15px_rgba(12,96,96,0.15)] overflow-hidden"
>
{/* Top Window Chrome Bar */}
<div className="flex items-center justify-between px-6 py-4 border-b border-border/50 bg-background/50">
@@ -151,11 +151,11 @@ export default function MarketingPage() {
<div className="size-3 rounded-full bg-green-500/80"></div>
</div>
<div className="hidden sm:flex items-center bg-background/80 border border-border/50 px-6 py-1.5 rounded-full text-xs font-mono text-muted-foreground w-80 justify-center gap-2">
<div className="size-2 rounded-full bg-[#00F0FF] animate-pulse"></div>
<div className="size-2 rounded-full bg-[var(--cyan-ai)] animate-pulse"></div>
pragativeer.com/dashboard/student
</div>
<div className="flex items-center gap-2">
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 px-2 py-0.5 rounded-md text-[10px] uppercase tracking-wider font-bold">
<Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2 py-0.5 rounded-md text-[10px] uppercase tracking-wider font-bold">
AI Active
</Badge>
</div>
@@ -191,7 +191,7 @@ export default function MarketingPage() {
Prep Pilot AI
</div>
<div className="flex items-center gap-3 px-3 py-2 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
<Target size={17} className="text-[#00F0FF] shrink-0" />
<Target size={17} className="text-[var(--cyan-ai)] shrink-0" />
Exam Strategy
</div>
<div className="flex items-center gap-3 px-3 py-2 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
@@ -227,7 +227,7 @@ export default function MarketingPage() {
{/* Dashboard Grid Cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
{/* Card 1: Weakness Analysis */}
<div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[#00F0FF]/30 transition-all duration-300 relative group">
<div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[var(--cyan-ai-30)] transition-all duration-300 relative group">
<div className="flex items-center justify-between">
<h4 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Focus Topic</h4>
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/5 rounded-md text-[10px] font-bold">Physics</Badge>
@@ -247,15 +247,15 @@ export default function MarketingPage() {
</div>
{/* Card 2: Live Score & AIR Rank Predictor */}
<div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[#00F0FF]/30 transition-all duration-300 relative group">
<div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[var(--cyan-ai-30)] transition-all duration-300 relative group">
<div className="flex items-center justify-between">
<h4 className="text-xs font-bold uppercase tracking-widest text-[#00F0FF]">Rank Simulator</h4>
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 rounded-md text-[10px] font-bold">NEET Target</Badge>
<h4 className="text-xs font-bold uppercase tracking-widest text-[var(--cyan-ai)]">Rank Simulator</h4>
<Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] rounded-md text-[10px] font-bold">NEET Target</Badge>
</div>
<div className="flex items-end justify-between">
<div>
<p className="text-[10px] font-bold text-muted-foreground uppercase">Estimated AIR</p>
<p className="text-3xl font-bold tracking-tight text-[#00F0FF] drop-shadow-[0_0_8px_rgba(0,240,255,0.3)]">1,240</p>
<p className="text-3xl font-bold tracking-tight text-[var(--cyan-ai)] drop-shadow-[0_0_8px_rgba(12,96,96,0.3)]">1,240</p>
</div>
<div className="text-right">
<p className="text-[10px] font-bold text-muted-foreground uppercase">Expected Score</p>
@@ -267,7 +267,7 @@ export default function MarketingPage() {
{[30, 45, 35, 55, 70, 60, 85].map((val, i) => (
<div
key={i}
className="flex-1 bg-[#00F0FF]/20 hover:bg-[#00F0FF]/60 transition-colors rounded-t"
className="flex-1 bg-[var(--cyan-ai-20)] hover:bg-[var(--cyan-ai-50)] transition-colors rounded-t"
style={{ height: `${val}%` }}
></div>
))}
@@ -295,7 +295,7 @@ export default function MarketingPage() {
</Button>
</Link>
<Button size="sm" variant="outline" className="h-8 rounded-lg px-4 text-xs border-border bg-background/50">
<MessageSquare size={12} className="mr-1.5 text-[#00F0FF]" /> Ask AI to explain
<MessageSquare size={12} className="mr-1.5 text-[var(--cyan-ai)]" /> Ask AI to explain
</Button>
</div>
</div>
@@ -312,15 +312,15 @@ export default function MarketingPage() {
<div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-background to-transparent z-10"></div>
<div className="flex w-[200%] animate-marquee opacity-70 hover:opacity-100 transition-opacity">
<div className="flex-1 flex justify-around items-center px-4">
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Shield size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> NTA Compliant</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Shield size={28} className="text-[var(--cyan-ai)] drop-shadow-[0_0_10px_rgba(12,96,96,0.5)]" /> NTA Compliant</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Activity size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 99.9% Uptime</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><BrainCircuit size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> 10M+ AI Models</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><BrainCircuit size={28} className="text-[var(--cyan-ai)] drop-shadow-[0_0_10px_rgba(12,96,96,0.5)]" /> 10M+ AI Models</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
</div>
<div className="flex-1 flex justify-around items-center px-4">
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Shield size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> NTA Compliant</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Shield size={28} className="text-[var(--cyan-ai)] drop-shadow-[0_0_10px_rgba(12,96,96,0.5)]" /> NTA Compliant</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><Activity size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 99.9% Uptime</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><BrainCircuit size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> 10M+ AI Models</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><BrainCircuit size={28} className="text-[var(--cyan-ai)] drop-shadow-[0_0_10px_rgba(12,96,96,0.5)]" /> 10M+ AI Models</div>
<div className="flex items-center gap-3 font-bold text-xl tracking-tight text-foreground"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
</div>
</div>
@@ -370,12 +370,12 @@ export default function MarketingPage() {
</motion.div>
<motion.div variants={itemVariants}>
<Card className="bg-[#00F0FF]/5 backdrop-blur-xl border-[#00F0FF]/20 hover:border-[#00F0FF]/60 transition-all duration-300 rounded-[2rem] h-full shadow-[0_0_30px_-15px_#00F0FF] group">
<Card className="bg-[var(--cyan-ai-10)] backdrop-blur-xl border-[var(--cyan-ai-20)] hover:border-[var(--cyan-ai-50)] transition-all duration-300 rounded-[2rem] h-full shadow-[0_0_30px_-15px_var(--cyan-ai)] group">
<CardContent className="p-8 relative overflow-hidden">
<div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity transform group-hover:scale-110 group-hover:rotate-12 duration-500">
<BrainCircuit size={120} />
</div>
<div className="size-14 rounded-2xl bg-[#00F0FF]/20 text-[#00F0FF] flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_#00F0FF]">
<div className="size-14 rounded-2xl bg-[var(--cyan-ai-20)] text-[var(--cyan-ai)] flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_var(--cyan-ai)]">
<BrainCircuit size={28} />
</div>
<h3 className="text-2xl font-bold mb-4 tracking-tight">Dynamic Generation</h3>
@@ -476,17 +476,17 @@ export default function MarketingPage() {
className="relative mt-8 lg:mt-0"
>
<Card className="bg-background/80 backdrop-blur-md border-border p-6 rounded-[2rem] flex flex-col hover:border-border/80 transition-colors h-full z-10 relative shadow-xl">
<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>
<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 flex-1 font-medium text-lg">
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Everything in Pro</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> AI Spaced Repetition (Mistakes)</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> 24/7 Streaming AI Tutor Chat</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Predictive Rank & College Predictor</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[var(--cyan-ai)]" /> Everything in Pro</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[var(--cyan-ai)]" /> AI Spaced Repetition (Mistakes)</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[var(--cyan-ai)]" /> 24/7 Streaming AI Tutor Chat</li>
<li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[var(--cyan-ai)]" /> Predictive Rank & College Predictor</li>
</ul>
<Link href="/signup">
<Button size="lg" className="w-full rounded-2xl h-12 font-bold text-lg bg-[#00F0FF] text-black hover:bg-[#00F0FF]/90 transition-all">Get AI Coach</Button>
<Button size="lg" className="w-full rounded-2xl h-12 font-bold text-lg bg-[var(--cyan-ai)] text-black hover:bg-[var(--cyan-ai-80)] transition-all">Get AI Coach</Button>
</Link>
</Card>
</motion.div>
@@ -510,7 +510,7 @@ export default function MarketingPage() {
<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">
@@ -546,8 +546,8 @@ export default function MarketingPage() {
<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>
))}