// tour.jsx — Vantage Tour v2: sidebar-pinned card, spotlight dimming, precise nav alignment
const TOUR_STEPS = [
{
route: 'dashboard',
nav: 'dashboard',
title: 'Dashboard',
icon: 'dashboard',
desc: 'Your mission control. Your streak, XP tier, upcoming session, and a focus timer that follows you to the Tasks page — all in one view.',
},
{
route: 'tasks',
nav: 'tasks',
title: 'Tasks & Goals',
icon: 'assignment_turned_in',
desc: 'Capture every task and goal here. Open a task to log focus time, add subtasks, or let AI break it down into smaller steps for you.',
},
{
route: 'sessions',
nav: 'sessions',
title: 'Sessions',
icon: 'event',
desc: 'All your 1:1s and town halls in one calendar. Each session carries the agenda your mentor wrote, and you can add it to Google or Outlook in one click.',
},
{
route: 'roadmap',
nav: 'roadmap',
title: 'Your Roadmap',
icon: 'timeline',
desc: 'A personalized growth roadmap built with your mentor — split into phases with tasks, reflection prompts, and a personal note for each stage.',
},
{
route: 'wins',
nav: 'wins',
title: 'Wins Board',
icon: 'military_tech',
desc: 'The community feed. Share achievements big or small, react to your cohort\'s wins, and build a record of everything you\'ve accomplished.',
},
{
route: 'resources',
nav: 'resources',
title: 'Resources',
icon: 'menu_book',
desc: 'Your mentor\'s library — videos, worksheets, templates — organised by subject area and plan tier. Anything shared just for you lands in "Shared with you," and everything is searchable.',
},
{
route: 'chat',
nav: 'chat',
title: 'Chat',
icon: 'chat',
desc: 'Talk to your cohort in shared channels, or start a private direct message with your mentor whenever you need a 1:1.',
},
{
route: 'profile',
nav: 'profile',
title: 'Profile & Badges',
icon: 'person',
desc: 'Your XP tier, streak history, and the full badge wall. Every action you take in Vantage unlocks something new — climb 8 tiers from Rookie to Icon.',
},
{
route: 'corporate-radar',
nav: 'corporate-radar',
title: 'Corporate Radar',
icon: 'radar',
desc: 'A live database of UAE companies, matched to your interests. Set your industries and roles, save the ones you like, and get notified when a match starts hiring.',
},
{
route: 'tasks',
nav: 'tasks',
title: 'Your first task',
icon: 'target',
desc: 'You\'re ready. Create your first task now — it\'s the first step toward building the momentum Vantage is designed to sustain.',
isFinal: true,
},
];
// ─── Nav item order in sidebar (member view, 0-indexed) ───────────────────────
// Matches the memberItems array order in SidebarWithWins:
// 0: dashboard, 1: tasks, 2: sessions, 3: roadmap, 4: wins, 5: resources, 6: chat, 7: profile
// Then a divider + "Career" section label, then corporate-radar.
const NAV_ORDER = ['dashboard','tasks','sessions','roadmap','wins','resources','chat','profile','corporate-radar'];
// Items rendered below the "Career" divider + section label (extra vertical offset).
const CAREER_KEYS = ['corporate-radar'];
// Height of the divider block + "Career" section label between Workspace and Career.
const CAREER_SECTION_OFFSET = 46;
// ─── Tour bubble ──────────────────────────────────────────────────────────────
function TourBubble({ onStart, onDismiss }) {
const [exiting, setExiting] = useState(false);
const [gone, setGone] = useState(false);
const dismiss = () => {
setExiting(true);
setTimeout(() => { setGone(true); onDismiss(); }, 280);
};
if (gone) return null;
return (
star
Vantage Tour
New here? Start here.
A 2-minute guided walkthrough of every section — so you hit the ground running from day one.
);
}
// ─── Spotlight overlay ────────────────────────────────────────────────────────
// Very light dim over the main content only; sidebar stays fully lit.
function TourSpotlight() {
return (
);
}
// ─── Sidebar nav highlight ────────────────────────────────────────────────────
// Renders a highlight rect precisely over the active nav item.
// The sidebar has: brand (≈76px) + section label (≈32px) + items (38px each, 8px gap) = start at ~116px
const SB_ITEM_H = 38; // height of each sb-item
const SB_ITEM_GAP = 2; // gap between items (from CSS gap:8px, but padding accounts for most)
const SB_ITEMS_TOP = 130; // px from top of viewport to first nav item
function SidebarNavHighlight({ navKey }) {
const idx = NAV_ORDER.indexOf(navKey);
if (idx < 0) return null;
const careerOffset = CAREER_KEYS.includes(navKey) ? CAREER_SECTION_OFFSET : 0;
const top = SB_ITEMS_TOP + idx * (SB_ITEM_H + SB_ITEM_GAP) + careerOffset;
return (
);
}
// ─── Congratulations pop-up ───────────────────────────────────────────────────
function CongratsOverlay({ onClose }) {
return (
<>
🎯
First step taken.
You've created your first task on Vantage. That's how it starts — one clear next action. Keep going.
);
}
// ─── Sidebar-pinned tour card ─────────────────────────────────────────────────
function SidebarTourCard({ step, stepIdx, total, onNext, onBack, onClose, onComplete }) {
const [showCongrats, setShowCongrats] = useState(false);
const isFinal = !!step.isFinal;
if (showCongrats) {
return { setShowCongrats(false); onComplete(); }} />;
}
return (
<>
{/* Light spotlight on main content */}
{/* Precise sidebar highlight */}
{/* Pinned card at bottom of sidebar */}