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 { useRouter } from "next/navigation";
|
||||
@@ -51,7 +51,7 @@ export default function OnboardingPage() {
|
||||
{/* Background glows */}
|
||||
<div className="pointer-events-none fixed inset-0 -z-10">
|
||||
<div className="absolute top-0 left-1/4 size-[600px] bg-primary/5 blur-[140px] rounded-full" />
|
||||
<div className="absolute bottom-0 right-1/4 size-[500px] bg-[#00F0FF]/5 blur-[120px] rounded-full" />
|
||||
<div className="absolute bottom-0 right-1/4 size-[500px] bg-[var(--cyan-ai-10)] blur-[120px] rounded-full" />
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-5xl space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-700">
|
||||
@@ -163,23 +163,23 @@ export default function OnboardingPage() {
|
||||
className="relative rounded-[2rem] p-[1px] h-full group cursor-pointer"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(0,240,255,0.5) 0%, rgba(0,240,255,0.08) 100%)",
|
||||
"linear-gradient(135deg, rgba(12,96,96,0.5) 0%, rgba(12,96,96,0.08) 100%)",
|
||||
}}
|
||||
onClick={() => !selecting && handleSelect("Al_Coach")}
|
||||
>
|
||||
{/* Most Popular Badge */}
|
||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 z-10 inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-[#00F0FF] text-black text-xs font-black uppercase tracking-wider shadow-[0_0_20px_-3px_#00F0FF]">
|
||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 z-10 inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-[var(--cyan-ai)] text-black text-xs font-black uppercase tracking-wider shadow-[0_0_20px_-3px_var(--cyan-ai)]">
|
||||
<Sparkles size={12} /> Most Popular
|
||||
</div>
|
||||
|
||||
<div className="bg-background rounded-[calc(2rem-1px)] p-7 flex flex-col h-full transition-all duration-300 group-hover:bg-secondary/20">
|
||||
{/* Header */}
|
||||
<div className="mb-6 pt-2">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#00F0FF]/10 border border-[#00F0FF]/20 text-[#00F0FF] text-xs font-bold mb-3 uppercase tracking-wider">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] text-[var(--cyan-ai)] text-xs font-bold mb-3 uppercase tracking-wider">
|
||||
<Brain size={12} /> AI Coach Plan
|
||||
</div>
|
||||
<div className="flex items-end gap-2 mb-2">
|
||||
<span className="text-5xl font-black tracking-tight text-[#00F0FF]">₹11,999</span>
|
||||
<span className="text-5xl font-black tracking-tight text-[var(--cyan-ai)]">₹11,999</span>
|
||||
<span className="text-muted-foreground text-base font-medium mb-2">/year</span>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm font-medium">
|
||||
@@ -191,7 +191,7 @@ export default function OnboardingPage() {
|
||||
<ul className="space-y-3 mb-8 flex-1">
|
||||
{AI_COACH_FEATURES.map(({ icon: Icon, text }) => (
|
||||
<li key={text} className="flex items-center gap-3 text-sm font-medium">
|
||||
<CheckCircle2 size={18} className="text-[#00F0FF] shrink-0" />
|
||||
<CheckCircle2 size={18} className="text-[var(--cyan-ai)] shrink-0" />
|
||||
<span>{text}</span>
|
||||
</li>
|
||||
))}
|
||||
@@ -204,7 +204,7 @@ export default function OnboardingPage() {
|
||||
if (!selecting) handleSelect("Al_Coach");
|
||||
}}
|
||||
disabled={!!selecting}
|
||||
className="w-full h-12 rounded-xl bg-[#00F0FF] text-black font-bold text-base hover:bg-[#00F0FF]/90 transition-all duration-300 shadow-[0_0_20px_-5px_rgba(0,240,255,0.5)] hover:shadow-[0_0_30px_-3px_rgba(0,240,255,0.8)] hover:-translate-y-0.5 disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
className="w-full h-12 rounded-xl bg-[var(--cyan-ai)] text-black font-bold text-base hover:bg-[var(--cyan-ai-80)] transition-all duration-300 shadow-[0_0_20px_-5px_rgba(12,96,96,0.5)] hover:shadow-[0_0_30px_-3px_rgba(12,96,96,0.8)] hover:-translate-y-0.5 disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
||||
>
|
||||
{selecting === "Al_Coach" ? (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user