/* ============================================================
LEARNING CENTER — fully browsable article system
============================================================ */
const { useState: useS2 } = React;
const LEARN_CATS = [
{
id: 'articles',
name: 'Articles',
count: 22,
color: '#F59E0B',
bg: 'rgba(245,158,11,.15)',
icon: (
),
},
{
id: 'tutorials',
name: 'Guided Tutorials',
count: 8,
color: '#8BA4EE',
bg: 'rgba(107,138,228,.15)',
icon: (
),
},
{
id: 'drawing',
name: 'Chart Drawing',
count: 33,
color: '#10B981',
bg: 'rgba(16,185,129,.12)',
icon: (
),
},
{
id: 'quizzes',
name: 'Pattern Quizzes',
count: 12,
color: '#A78BFA',
bg: 'rgba(167,139,250,.15)',
icon: (
),
},
{
id: 'glossary',
name: 'Glossary',
count: '80+',
color: '#8BA4EE',
bg: 'rgba(107,138,228,.15)',
icon: (
),
},
];
/* ============================================================
Stub body used for not-yet-written articles — the full content
ships in the mobile app. The web surface lists the entire library
so readers can see what's covered, but only the flagship articles
are authored on the web.
============================================================ */
const stubBody = (sub) => (
<>
{sub}
Full article in the app. Every entry in the Learning Center ships in the mobile app with chart diagrams, interactive examples, and a short knowledge check. The web preview lists the library so you can see what's inside before you download.
Open this article in the app to read the full piece, see live chart examples, and save your progress.
);
const ARTICLES = {
articles: [
{
id: 'a1',
title: 'Candlestick Anatomy',
time: '5 min',
level: 'Beginner',
sub: 'Every chart tells a story. Learn to read it one candle at a time.',
done: true,
body: (
<>
A single candlestick compresses four numbers into one visual: the open, close, high, and low of a given time period. The colored body shows where price opened and closed — green (or hollow) if the close was higher than the open, red (or filled) if the close was lower. The thin lines above and below are wicks or shadows, showing how far price reached before pulling back.
Bullish
Close above open. Buyers pushed price up during the period. Long lower wick means sellers were rejected.
Bearish
Close below open. Sellers dominated. Long upper wick means buyers failed to hold highs.
Why the body matters more than the wick
The body represents where price actually settled at the open and close — the consensus moments. Wicks represent failed attempts: price tried to go there, but couldn't stay. A long body with short wicks signals conviction; a small body with long wicks signals indecision.
Try it: In Vero's Free Play mode, turn off all indicators and focus on just candle bodies and wicks. You'll develop an instinct for momentum without any technical crutches.
Common single-candle signals
Doji — open and close are nearly identical. A pause, indecision, a possible reversal if it appears at an extreme. Hammer — small body at the top with a long lower wick. Buyers took control after early selling. Bullish at support. Shooting star — small body at the bottom with a long upper wick. Sellers reclaimed after a rally. Bearish at resistance.
),
},
{
id: 'a2',
title: 'Support & Resistance — The Two Lines That Matter',
time: '7 min',
level: 'Beginner',
sub: 'Before any pattern, any indicator, any strategy — there are levels.',
done: true,
body: (
<>
Support is a price level where buyers have stepped in repeatedly. Resistance is where sellers have. These aren't magic lines — they're simply the receipts of past decisions, left on the chart as visible proof that something happened here before.
The more times a level is tested without breaking, the more weight it carries. The cleaner the rejections (long wicks, sharp reversals), the more respected the level. When a strong level breaks, traders expect price to accelerate — the old guardrail is gone.
Drawing them well
Connect wicks for the most conservative levels, bodies for the most respected. Don't chase exact prices — draw zones, not hairlines. A 0.3% band around a round number often matters more than a single tick.
Practice: Vero's Chart Drawing exercises include 33 scenarios where you place support/resistance lines and get graded against historical outcomes.
The role-reversal rule
When resistance breaks, it often becomes the new support. When support breaks, it becomes the new resistance. This is one of the most reliable phenomena in technical analysis, because the psychology is simple: traders who sold at $100 are relieved when price returns to $100 after a breakout, and buy again to "get back in."
),
},
{
id: 'a3',
title: 'Reading Volume',
time: '6 min',
level: 'Beginner',
sub: "Price is what happened. Volume is how much people cared.",
body: (
<>
Volume confirms or contradicts price. A breakout on rising volume is real participation — traders are putting money behind the move. A breakout on falling volume often fails, because the price movement isn't supported by conviction.
In Vero's chart interface, the Volume pane sits directly below price. Toggle it on from Game Setup → Indicators to train on volume-aware reads.
),
},
{ id: 'a4', title: 'Doji: The Candle of Indecision', time: '4 min', level: 'Beginner', sub: 'When buyers and sellers finish in a tie, the market is telling you something.', get body() { return stubBody(this.sub); } },
{ id: 'a5', title: 'Hammer & Shooting Star', time: '5 min', level: 'Beginner', sub: 'Two single-candle reversals with opposite meanings — and why location matters more than shape.', get body() { return stubBody(this.sub); } },
{ id: 'a6', title: 'Engulfing Patterns: The Takeover Candle', time: '6 min', level: 'Beginner', sub: 'One candle that swallows the last is one of the most reliable two-candle reversal signals.', get body() { return stubBody(this.sub); } },
{ id: 'a7', title: 'Morning Star & Evening Star', time: '6 min', level: 'Intermediate', sub: 'The three-candle reversal that shows up at the end of every major trend change.', get body() { return stubBody(this.sub); } },
{ id: 'a8', title: 'Trend Lines: How to Draw Them Right', time: '8 min', level: 'Beginner', sub: 'Two touches make a line; three touches make a trend. The rest is discipline.', get body() { return stubBody(this.sub); } },
{ id: 'a9', title: 'Moving Averages: SMA vs EMA', time: '7 min', level: 'Beginner', sub: 'Both smooth price. One reacts faster. Knowing which to use, and when, changes everything.', get body() { return stubBody(this.sub); } },
{ id: 'a10', title: 'RSI: Reading Momentum', time: '8 min', level: 'Intermediate', sub: 'Overbought and oversold are starting points, not signals. Here is how RSI actually earns its keep.', get body() { return stubBody(this.sub); } },
{ id: 'a11', title: 'MACD: When Averages Disagree', time: '9 min', level: 'Intermediate', sub: 'The crossover is the headline. The histogram is where the real information lives.', get body() { return stubBody(this.sub); } },
{ id: 'a12', title: 'Bollinger Bands: Volatility as Context', time: '7 min', level: 'Intermediate', sub: 'Bands are not signals. They are a frame that makes every other signal easier to read.', get body() { return stubBody(this.sub); } },
{ id: 'a13', title: 'VWAP: The Institution Price', time: '6 min', level: 'Intermediate', sub: 'Why the volume-weighted average is the single level most professional desks care about intraday.', get body() { return stubBody(this.sub); } },
{ id: 'a14', title: 'Head & Shoulders: The Classic Reversal', time: '8 min', level: 'Intermediate', sub: 'The most recognized chart pattern in technical analysis — and the most frequently misidentified.', get body() { return stubBody(this.sub); } },
{ id: 'a15', title: 'Double Top & Double Bottom', time: '6 min', level: 'Beginner', sub: 'Two equal peaks (or troughs) tell you a trend has run out of steam. Here is what to do about it.', get body() { return stubBody(this.sub); } },
{ id: 'a16', title: 'Flags & Pennants: Continuation Patterns', time: '5 min', level: 'Intermediate', sub: 'The market rarely moves in a straight line. Flags are the pauses that give you the next entry.', get body() { return stubBody(this.sub); } },
{ id: 'a17', title: 'Ascending & Descending Triangles', time: '7 min', level: 'Intermediate', sub: 'Flat ceiling, rising floor. Or vice versa. Why the asymmetric pressure always resolves.', get body() { return stubBody(this.sub); } },
{ id: 'a18', title: 'The Cup & Handle', time: '6 min', level: 'Intermediate', sub: 'William O’Neil’s signature bullish setup — how to spot it, and why most traders get the handle wrong.', get body() { return stubBody(this.sub); } },
{ id: 'a19', title: 'Fibonacci Retracement: Why Markets Respect Math', time: '9 min', level: 'Advanced', sub: 'The 38.2%, 50%, and 61.8% retracements show up over and over. Superstition, or self-fulfilling?', get body() { return stubBody(this.sub); } },
{ id: 'a20', title: 'Market Structure: Highs, Lows & Context', time: '8 min', level: 'Intermediate', sub: 'Before any pattern or indicator, identify where price is within the structural trend.', get body() { return stubBody(this.sub); } },
{ id: 'a21', title: 'Risk-to-Reward: The Math of Trading', time: '7 min', level: 'Advanced', sub: 'Why a 40% win-rate strategy can still be extremely profitable — and a 70% one can lose.', get body() { return stubBody(this.sub); } },
{ id: 'a22', title: 'Why Technical Analysis Works (and When It Doesn’t)', time: '10 min', level: 'Advanced', sub: 'A candid look at what TA is really modeling, and the situations where it stops working.', get body() { return stubBody(this.sub); } },
],
tutorials: [
{
id: 't1',
title: 'Your First Chart Read — Step by Step',
time: '15 min',
level: 'Interactive',
sub: 'A guided walkthrough of a single chart, from zoomed-out context to the trade decision.',
body: (
<>
This tutorial walks you through reading a single equity chart the way a disciplined trader would — in a specific order, without skipping steps. You'll answer questions along the way and Vero will grade your reads.
Step 1 — Zoom out
Before looking at anything small, pull back to a multi-year view. What's the major trend? Is this stock in a sustained uptrend, a downtrend, or ranging? This decides your default bias for everything that follows.
Step 2 — Find the key levels
Mark support and resistance on the weekly chart. Only the obvious ones — the two or three that jump out. You don't need ten lines; you need the ones price has respected repeatedly.
Step 3 — Drop to daily
Now zoom in. Where is price relative to the weekly levels you drew? At support? At resistance? In the middle? This is your setup quality.
You'll practice this on 5 real charts. Each one ends with a multiple-choice read: what's the highest-probability next move, and why?
Step 4 — Check the indicators
Only after you've formed a view from price action, do you look at indicators — and only to confirm or contradict. If RSI is overbought at resistance, that's confirmation. If it's oversold at resistance, that's a contradiction worth understanding.
),
},
{
id: 't2',
title: 'Building a Watchlist That Works',
time: '12 min',
level: 'Interactive',
sub: 'Most traders watch too many names badly. Here\'s how to watch a few exceptionally.',
body: (
<>
The best traders often follow 20 tickers or fewer — and they follow them deeply. You'll learn to set up a watchlist by liquidity, volatility, and sector coverage, and to rotate names in and out based on setup quality rather than news.
The three-tier system
Tier 1 — Core watch (5 names): The tickers you know intimately. You know their typical range, their personality, their reaction to earnings. Tier 2 — Active scan (15 names): Broader coverage for setup hunting. Tier 3 — Bench: Anything else, reviewed weekly.
Vero's chart library is built around a curated set of liquid names — SPY, QQQ, IWM, AAPL, NVDA, TSLA, EEM, and EFA — so every round you play is on a ticker that trades like the ones serious traders watch.
),
},
{ id: 't3', title: 'Reading Indicators Without Overloading', time: '14 min', level: 'Interactive', sub: 'A disciplined order for adding indicators — and knowing when to turn them off.', get body() { return stubBody(this.sub); } },
{ id: 't4', title: 'The Three-Step Pattern Recognition Process', time: '16 min', level: 'Interactive', sub: 'Frame, identify, confirm. The workflow that prevents every false-positive pattern call.', get body() { return stubBody(this.sub); } },
{ id: 't5', title: 'Drawing Support & Resistance Zones', time: '13 min', level: 'Interactive', sub: 'Stop drawing lines. Start drawing zones — and grading each one by weight of evidence.', get body() { return stubBody(this.sub); } },
{ id: 't6', title: 'Understanding Trend Structure', time: '18 min', level: 'Interactive', sub: 'Higher highs, higher lows, and the moment the sequence breaks. Structure before signal.', get body() { return stubBody(this.sub); } },
{ id: 't7', title: 'Entry Timing: The Setup + Trigger Framework', time: '17 min', level: 'Interactive', sub: 'A setup is a reason to care. A trigger is a reason to act. Never confuse the two.', get body() { return stubBody(this.sub); } },
{ id: 't8', title: 'Learning From Every Round: Post-Trade Review', time: '11 min', level: 'Interactive', sub: 'The habit that separates deliberate practice from mindless reps. A scoring rubric for every round you play.', get body() { return stubBody(this.sub); } },
],
drawing: [
{
id: 'd1',
title: 'Trend Lines Done Right',
time: 'Exercise',
level: 'Intermediate',
sub: 'The line itself is trivial. Choosing where to draw it is everything.',
body: (
<>
A trend line needs at least two touches to exist and a third touch to become meaningful. Anything less is wishful thinking. In this exercise you'll be given a series of charts and asked to draw the dominant trend line — then see how price actually behaved next.
Rules for a clean trend line
Connect the most obvious extremes. If you find yourself stretching to make two points line up, the line isn't there. Use wicks for strict lines, bodies for looser ones — and commit to one approach per chart. Don't mix.
The app grades your line by computing the R² of actual touches against the line you drew, then shows you where a well-trained eye would have placed it.
),
},
{ id: 'd2', title: 'Uptrend Channels', time: 'Exercise', level: 'Intermediate', sub: 'Draw both the trend line and its parallel. Price spends most of its life between the two.', get body() { return stubBody(this.sub); } },
{ id: 'd3', title: 'Downtrend Channels', time: 'Exercise', level: 'Intermediate', sub: 'The same skill on the short side — and why most traders are worse at it.', get body() { return stubBody(this.sub); } },
{ id: 'd4', title: 'Horizontal Support Zones', time: 'Exercise', level: 'Beginner', sub: 'Place the zone, not the line. Ten exercises on tickers where support was decisive.', get body() { return stubBody(this.sub); } },
{ id: 'd5', title: 'Horizontal Resistance Zones', time: 'Exercise', level: 'Beginner', sub: 'Ceilings the market respected — some once, some a dozen times. Can you tell the difference?', get body() { return stubBody(this.sub); } },
{ id: 'd6', title: 'Breakout Entry Lines', time: 'Exercise', level: 'Intermediate', sub: 'Where exactly do you commit to a breakout? Five charts, five commitment lines, graded.', get body() { return stubBody(this.sub); } },
{ id: 'd7', title: 'Fibonacci Retracement', time: 'Exercise', level: 'Advanced', sub: 'Anchor the swing right and the 38.2% / 50% / 61.8% levels fall where they should.', get body() { return stubBody(this.sub); } },
{ id: 'd8', title: 'Head & Shoulders Neckline', time: 'Exercise', level: 'Advanced', sub: 'The pattern lives or dies by where you draw the neckline. Ten classic setups.', get body() { return stubBody(this.sub); } },
],
quizzes: [
{
id: 'q1',
title: 'Name That Pattern — 20 Classic Formations',
time: '10 min',
level: 'Test',
sub: 'Head & shoulders. Double top. Cup & handle. Can you spot them cold?',
body: (
<>
A timed quiz with 20 real historical charts. You see the setup, you name the pattern, you commit to a direction. Afterwards Vero shows you what happened and where your eye matched or missed.
Scoring: Correct pattern name = 1 pt. Correct direction = 1 pt. Correct on both without the hint = 3 pts. High score unlocks the advanced pattern set.
What you'll be tested on
Head & shoulders (regular and inverse). Double top / double bottom. Triple top / triple bottom. Cup & handle. Bullish and bearish flags. Ascending and descending triangles. Symmetrical triangles. Falling and rising wedges. Rounding bottoms.
),
},
{ id: 'q2', title: 'Candlestick Reversals', time: '8 min', level: 'Test', sub: 'Hammer, shooting star, engulfing, morning star, evening star — in context.', get body() { return stubBody(this.sub); } },
{ id: 'q3', title: 'Continuation Patterns', time: '9 min', level: 'Test', sub: 'Flags, pennants, rectangles. When the pause is the signal.', get body() { return stubBody(this.sub); } },
{ id: 'q4', title: 'Support vs Resistance Break', time: '10 min', level: 'Test', sub: 'Is this a clean break, a fakeout, or a retest? Fifteen charts to decide on.', get body() { return stubBody(this.sub); } },
{ id: 'q5', title: 'Trend vs Range', time: '7 min', level: 'Test', sub: 'Half the battle is knowing which regime you are in. Train the classification.', get body() { return stubBody(this.sub); } },
{ id: 'q6', title: 'Volume Confirmation', time: '9 min', level: 'Test', sub: 'Spot the breakouts that had conviction behind them — and the ones that did not.', get body() { return stubBody(this.sub); } },
{ id: 'q7', title: 'Indicator Divergence', time: '11 min', level: 'Test', sub: 'Price makes a new high, RSI does not. A gift, or a fake-out? You call it.', get body() { return stubBody(this.sub); } },
{ id: 'q8', title: 'Moving Average Crossovers', time: '9 min', level: 'Test', sub: 'Golden cross, death cross — and the majority of crossovers that are neither.', get body() { return stubBody(this.sub); } },
{ id: 'q9', title: 'Multi-Timeframe Reads', time: '13 min', level: 'Test', sub: 'Weekly says one thing. Daily says another. Which wins?', get body() { return stubBody(this.sub); } },
{ id: 'q10', title: 'Reversal vs Continuation', time: '10 min', level: 'Test', sub: 'The skill that matters most — and the one most traders never practice.', get body() { return stubBody(this.sub); } },
{ id: 'q11', title: 'Pattern Failure Recognition', time: '12 min', level: 'Test', sub: 'Every pattern fails sometimes. The tell is usually obvious in hindsight. Train for foresight.', get body() { return stubBody(this.sub); } },
{ id: 'q12', title: 'Advanced Pattern Mix — Timed', time: '15 min', level: 'Test', sub: 'Twenty charts, twenty seconds each, every pattern from the library. The final boss.', get body() { return stubBody(this.sub); } },
],
glossary: [
{
id: 'g1',
title: 'Trading Glossary — Every Term That Matters',
time: 'Reference',
level: 'Searchable',
sub: 'Every term that shows up in the app, defined plainly and paired with a chart example.',
body: (
<>
A searchable reference for the vocabulary of technical analysis — from accumulation to volume, explained plainly, without the academic hedging.
A selection
Accumulation — The quiet phase after a downtrend where smart money is buying while retail is still selling. Price moves sideways, volume is dull, but the trajectory is quietly stabilizing.
Breakout — Price moves decisively through a defined level of support or resistance, ideally on above-average volume. Not every cross of a line is a breakout; most are fakeouts.
Consolidation — A period of sideways price action after a directional move, as the market "digests" the move. Often precedes continuation.
Divergence — When price makes a new high (or low) but the indicator doesn't. A warning that momentum is fading.
Fakeout — A breakout that fails within a few bars. Frequently engineered by larger players hunting stop losses.
The full glossary is searchable in-app, with tappable terms cross-linked to their articles and chart examples.