diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 32aadfd..5afa7c5 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -1,10 +1,12 @@ import { useState, useEffect } from 'react'; import { Link } from 'react-router-dom'; +import { BookOpen, CheckSquare, Trophy, Sparkles, X } from 'lucide-react'; import { useApp } from '../store/AppContext'; import Card from '../components/ui/Card'; import Button from '../components/ui/Button'; import Tag from '../components/ui/Tag'; import * as db from '../lib/db'; +import { storage } from '../lib/storage'; import { getAssignedTopic } from '../lib/learningService'; import { getYearProgress, getCurriculumCycle, getCurriculumWeek, getActiveVersion } from '../lib/curriculumService'; @@ -88,6 +90,25 @@ const Dashboard = () => { const currentCycle = getCurriculumCycle(weekNumber); const currWeek = getCurriculumWeek(weekNumber); + const explainerKey = currentUser ? `dashboard:explainer-dismissed:${currentUser.id}` : null; + const [explainerOpen, setExplainerOpen] = useState(false); + useEffect(() => { + if (!explainerKey) return; + setExplainerOpen(storage.get(explainerKey, false) !== true); + }, [explainerKey]); + + const dismissExplainer = () => { + setExplainerOpen(false); + if (explainerKey) storage.set(explainerKey, true); + }; + + const explainerSteps = [ + { icon: BookOpen, title: 'Learn', text: 'Each week you get one topic from the knowledge base. Work through the learning session at your own pace.' }, + { icon: CheckSquare, title: 'Test', text: 'Once your learning session is done, take the 5-question test to lock in what you learned and earn points.' }, + { icon: Trophy, title: 'Climb', text: 'Points add up on the leaderboard. The curriculum runs in perpetual 26-week cycles, so there is always a next step.' }, + { icon: Sparkles, title: 'Ask R42', text: 'R42, your AI study buddy, is on every screen (bottom-right). Ask it anything about your topic or the platform.' }, + ]; + return (
@@ -99,6 +120,43 @@ const Dashboard = () => {

+ {/* Platform explainer — dismissible, per user */} + {explainerOpen && ( + + +
+
+
+

How Respellion works

+ New here? +
+

+ A perpetual learning loop that keeps you current with the company knowledge base. + Use the navigation at the top (Home, Learn, Test, Leaderboard) to move around. +

+
+
+
+ {explainerSteps.map(({ icon: Icon, title, text }) => ( +
+
+ +
+

{title}

+

{text}

+
+ ))} +
+
+ )} + {/* Cycle Progress Bar (only when curriculum exists) */} {curriculumActive && yearProgress && (