UI: Added section-aware light-mode styling to main dashboard header icons (Gold for Pro Tier, Cyan for AI Coach)

This commit is contained in:
2026-08-07 11:22:41 +05:30
parent 117e0c4e2e
commit 29f33aded0
20 changed files with 130 additions and 47 deletions

83
fix_icons.py Normal file
View File

@@ -0,0 +1,83 @@
import os
import glob
import re
PRO_TIER_DIRS = [
"src/app/dashboard",
"src/app/dashboard/leaderboard",
"src/app/dashboard/progress",
"src/app/dashboard/cbt",
"src/app/dashboard/materials",
"src/app/dashboard/analytics",
"src/app/dashboard/community",
"src/app/dashboard/streaks",
"src/app/dashboard/settings",
"src/app/dashboard/rank-predictor"
]
AI_COACH_DIRS = [
"src/app/dashboard/ai-coach/tutor",
"src/app/dashboard/ai-coach/cbt-dpp",
"src/app/dashboard/ai-coach/readiness",
"src/app/dashboard/ai-coach/college-predictor",
"src/app/dashboard/ai-coach/strategy",
"src/app/dashboard/ai-coach/study-plan",
"src/app/dashboard/ai-coach/time-optimization",
"src/app/dashboard/ai-coach/heatmap",
"src/app/dashboard/ai-coach/weekly-progress",
"src/app/dashboard/ai-coach/mistakes"
]
def process_file(filepath, is_pro):
if not os.path.exists(filepath):
return
with open(filepath, 'r', encoding='utf-8') as f:
content = f.read()
# Original patterns
bg_pattern = r'bg-\[\#00F0FF\]/10 border border-\[\#00F0FF\]/20'
bg_amber_pattern = r'bg-amber-500/10 border border-amber-500/20' # Specifically for heatmap
if is_pro:
new_bg = 'bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20'
# To replace the icon color, we'll find the line after the span and replace text-[#00F0FF]
# But text-[#00F0FF] might be used elsewhere, so let's only replace if it's an icon tag near the span.
# The safest way is a regex that matches the span and the inner icon.
# e.g., <span className="... bg-[#00F0FF]/10 ...">\n <IconName className="text-[#00F0FF]"
# 1. Replace the background span
content = re.sub(bg_pattern, new_bg, content)
# 2. Replace the icon color (we can just replace all text-[#00F0FF] inside that specific h1 block, but regex is tricky.
# Let's just do a manual string replace for known blocks.)
# Actually, let's use a regex to capture the span and the following line.
pattern = r'(<span[^>]*bg-yellow-50[^>]*>\s*<[A-Za-z0-9]+[^>]*)text-\[\#00F0FF\]'
content = re.sub(pattern, r'\1text-yellow-600 dark:text-[#00F0FF]', content)
else: # AI Coach
new_bg = 'bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20'
# Replace both cyan and amber variants for consistency
content = re.sub(bg_pattern, new_bg, content)
content = re.sub(bg_amber_pattern, new_bg, content)
pattern = r'(<span[^>]*bg-cyan-50[^>]*>\s*<[A-Za-z0-9]+[^>]*)text-\[\#00F0FF\]'
content = re.sub(pattern, r'\1text-cyan-700 dark:text-[#00F0FF]', content)
# Specifically for heatmap which had amber text
pattern_amber = r'(<span[^>]*bg-cyan-50[^>]*>\s*<[A-Za-z0-9]+[^>]*)text-amber-500'
content = re.sub(pattern_amber, r'\1text-cyan-700 dark:text-[#00F0FF]', content)
with open(filepath, 'w', encoding='utf-8') as f:
f.write(content)
for d in PRO_TIER_DIRS:
page_path = os.path.join(d, "page.tsx")
process_file(page_path, is_pro=True)
for d in AI_COACH_DIRS:
page_path = os.path.join(d, "page.tsx")
process_file(page_path, is_pro=False)
print("Done replacing header icons.")

View File

@@ -98,8 +98,8 @@ export default function AIDailyPracticePage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Sparkles className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Sparkles className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
AI Daily Practice (DPP)
</h1>
@@ -108,7 +108,7 @@ export default function AIDailyPracticePage() {
</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5">
<BrainCircuit size={12} /> AI Powered
</span>
</div>

View File

@@ -23,8 +23,8 @@ export default function CollegePredictorPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<GraduationCap className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<GraduationCap className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
AI College &amp; Cutoff Predictor
</h1>
@@ -32,7 +32,7 @@ export default function CollegePredictorPage() {
Discover your probable target medical &amp; engineering colleges based on current mock exam scores and historical cutoffs.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<GraduationCap size={12} /> AI Powered
</span>
</div>

View File

@@ -28,8 +28,8 @@ export default function HeatmapPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-amber-500/10 border border-amber-500/20">
<Flame className="text-amber-500" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Flame className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
Mistake Heatmap Vault
</h1>
@@ -37,7 +37,7 @@ export default function HeatmapPage() {
Visual density map of your errors across subjects and topics — pinpoint your weakest areas instantly.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-amber-500 bg-amber-500/10 border border-amber-500/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-amber-500 bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<AlertTriangle size={12} /> Error Density Analysis
</span>
</div>

View File

@@ -62,8 +62,8 @@ export default function MistakeTrackingPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<BrainCircuit className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<BrainCircuit className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
Mistake Review &amp; Spaced Repetition
</h1>

View File

@@ -25,8 +25,8 @@ export default function ReadinessPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Gauge className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Gauge className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
Exam Readiness Analytics
</h1>
@@ -34,7 +34,7 @@ export default function ReadinessPage() {
Real-time algorithmic prediction of your exam readiness — based on speed, accuracy, syllabus coverage, and test history.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Gauge size={12} /> AI Powered
</span>
</div>
@@ -70,7 +70,7 @@ export default function ReadinessPage() {
<div className="flex items-center gap-2 mb-5">
<Award className="text-amber-400" size={22} />
<h2 className="text-xl font-extrabold tracking-tight">Composite Readiness Index</h2>
<span className="ml-auto text-xs font-bold text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-2.5 py-1 rounded-full">Updated Daily</span>
<span className="ml-auto text-xs font-bold text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-2.5 py-1 rounded-full">Updated Daily</span>
</div>
<ReadinessGauge />
</Card>

View File

@@ -19,8 +19,8 @@ export default function StrategyPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Zap className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Zap className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
Exam Strategy &amp; Time Optimization
</h1>
@@ -28,7 +28,7 @@ export default function StrategyPage() {
Master time allocation per question, eliminate negative marking traps, and fine-tune your subject sequence for maximum score yield.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Zap size={12} /> AI Powered
</span>
</div>

View File

@@ -13,8 +13,8 @@ export default function StudyPlanPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Calendar className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Calendar className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
Personalized Daily &amp; Weekly Study Plan
</h1>
@@ -22,7 +22,7 @@ export default function StudyPlanPage() {
AI-generated task schedule dynamically tailored to fix your weak areas and maintain optimal syllabus coverage.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Calendar size={12} /> AI Powered
</span>
</div>

View File

@@ -45,8 +45,8 @@ export default function TimeOptimizationPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Clock className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Clock className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
Study Time Optimization
</h1>
@@ -54,7 +54,7 @@ export default function TimeOptimizationPage() {
Understand your peak productive hours and schedule your hardest topics in your highest-efficiency windows.
</p>
</div>
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5 shrink-0 self-start">
<Zap size={12} /> Chronobiology Analytics
</span>
</div>

View File

@@ -18,8 +18,8 @@ export default function TutorChatPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<BrainCircuit className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<BrainCircuit className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
AI Tutor — 24/7 Doubt Solver
</h1>

View File

@@ -27,8 +27,8 @@ export default function WeeklyProgressPage() {
<div className="flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Target className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20">
<Target className="text-cyan-700 dark:text-[#00F0FF]" size={28} />
</span>
Weekly Progress Overview
</h1>
@@ -37,7 +37,7 @@ export default function WeeklyProgressPage() {
</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-[#00F0FF]/10 border border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5">
<span className="text-xs font-bold uppercase tracking-wider text-[#00F0FF] bg-cyan-50 dark:bg-[#00F0FF]/10 border border-cyan-300/60 dark:border-[#00F0FF]/20 px-3 py-1.5 rounded-full flex items-center gap-1.5">
<Zap size={12} /> Live Analytics
</span>
</div>

View File

@@ -35,8 +35,8 @@ export default function AnalyticsPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<LineChartIcon className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<LineChartIcon className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Performance Analytics
</h1>

View File

@@ -129,8 +129,8 @@ export default function CBTPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<MonitorPlay className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<MonitorPlay className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Computer Based Tests (CBT)
</h1>

View File

@@ -114,8 +114,8 @@ export default function CommunityPage() {
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<MessageSquare className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<MessageSquare className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Doubt Forum
</h1>

View File

@@ -29,8 +29,8 @@ export default function LeaderboardPage() {
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Trophy className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<Trophy className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Leaderboard
</h1>

View File

@@ -36,8 +36,8 @@ export default function MaterialsPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<FileText className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<FileText className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Study Materials & Notes
</h1>

View File

@@ -45,8 +45,8 @@ export default function DashboardPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<LayoutDashboard className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<LayoutDashboard className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Performance Overview
</h1>

View File

@@ -108,8 +108,8 @@ export default function ProgressTrackerPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Target className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<Target className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Syllabus Tracker
</h1>

View File

@@ -103,8 +103,8 @@ export default function SettingsPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Settings className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<Settings className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Account Settings
</h1>

View File

@@ -20,8 +20,8 @@ export default function StreaksPage() {
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
<div>
<h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
<span className="p-2.5 rounded-xl bg-[#00F0FF]/10 border border-[#00F0FF]/20">
<Flame className="text-[#00F0FF]" size={28} />
<span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[#00F0FF]/10 border border-yellow-300/60 dark:border-[#00F0FF]/20">
<Flame className="text-yellow-600 dark:text-[#00F0FF]" size={28} />
</span>
Your Learning Streak
</h1>