// ============================================================ // TRADING BASICS PAGE // ============================================================ const BASICS_MODULES = [ { icon: 'book', color: 'acid', title: 'Ce este trading-ul?', desc: 'Definiția corectă, diferența dintre investing și trading, ce pot și ce nu pot face un trader retail.', time: '8 min', level: 'Începător' }, { icon: 'globe', color: 'cyan', title: 'Ce este NASDAQ?', desc: 'Index, futures (NQ, MNQ), sesiuni, lichiditate, ce mișcă prețul și cine cumpără la ce ore.', time: '10 min', level: 'Începător' }, { icon: 'candle', color: 'blue', title: 'Ce sunt futures?', desc: 'Contracte futures, leverage, margin, expirare, settlement. Diferența vs CFD-uri și de ce contează.', time: '12 min', level: 'Începător' }, { icon: 'shield', color: 'cyan', title: 'Ce este un prop firm?', desc: 'Modelul de business, ce e funding-ul, ce reguli sunt comune, ce capcane să eviți.', time: '14 min', level: 'Intermediar' }, { icon: 'target', color: 'blue', title: 'Ce este risk management?', desc: 'Sizing, stop loss, daily loss limit, drawdown — fără asta, restul nu contează.', time: '15 min', level: 'Esențial' }, { icon: 'layout', color: 'gold', title: 'Ce este un trading plan?', desc: 'Cum scrii unul real, ce trebuie să conțină, cum îl testezi și cum îl ajustezi în timp.', time: '11 min', level: 'Intermediar' }, { icon: 'brain', color: 'gold', title: 'Psihologia în trading', desc: 'FOMO, revenge trading, tilt, overconfidence — sursele și antidoturile.', time: '13 min', level: 'Esențial' }, ]; const CONCEPTS = [ { id: 'po3', title: 'Power of Three (PO3)', color: 'gold', summary: 'Accumulation → Manipulation → Distribution. Trei faze pe care marketul le repetă constant.', body: 'PO3 descrie ciclul instituțional: faza 1 — accumulation (range strâns, lichiditate strânsă), faza 2 — manipulation (sweep peste/sub range pentru a colecta stop-uri), faza 3 — distribution (mișcarea reală în direcția opusă manipulării). Recunoști PO3 = anticipezi sweep-ul și prinzi mișcarea reală.', formula: 'AMD = Accumulation → Manipulation → Distribution' }, { id: 'reversal', title: 'Reversal', color: 'rose', summary: 'Schimbare clară de direcție validată de BOS + structură nouă.', body: 'Un reversal real necesită Break of Structure (BOS) în direcția opusă, urmat de un retest valid al order block-ului sau FVG-ului care a produs displacement-ul. Fără BOS și fără urmărire de structură nouă, nu e reversal — e doar pullback temporar.', formula: 'BOS opposite + new structure low/high = Reversal' }, { id: 'retracement', title: 'Retracement', color: 'cyan', summary: 'O corecție temporară împotriva trendului, fără a-l invalida.', body: 'Retracement-ul este o mișcare în direcția opusă trendului dominant, dar care NU sparge structura. Zonele uzuale de retracement: Fibonacci 38.2–61.8%, OB-ul anterior, FVG-ul care a produs displacement. Diferența vs reversal: retracement = pullback, reversal = schimbare reală de direcție.', formula: 'Pullback fără BOS = Retracement · Pullback + BOS = Reversal' }, { id: 'liquidity', title: 'Liquidity', color: 'acid', summary: 'Locurile unde stau order-urile în piață — sub low-urile recente, peste high-urile recente.', body: 'Lichiditatea înseamnă bani parcați sub formă de stop loss-uri și pending orders. Marketul caută aceste zone pentru a-și executa volumul. Identifici liquidity pool-urile uitându-te la swing high/low, equal highs/lows și sesiunile anterioare. Cea mai utilă întrebare: "unde au pus retailul stop-urile?"', formula: 'External liquidity = swing extremes · Internal liquidity = mid-range' }, { id: 'orderblock', title: 'Order Block (OB)', color: 'cyan', summary: 'Ultima candelă bearish înainte de o mișcare bullish puternică (sau invers).', body: 'Un order block reprezintă zona în care instituțiile au plasat volum semnificativ. Devine zonă de interes la retest. Confirmarea vine cu reacție clară: rejection wick, FVG creat, displacement în direcția opusă.', formula: 'Bullish OB = last bearish candle before BOS · Bearish OB = last bullish candle before BOS' }, { id: 'fvg', title: 'Fair Value Gap (FVG)', color: 'blue', summary: 'Imbalance de 3 candele — gap între wick-ul candelei 1 și wick-ul candelei 3.', body: 'FVG-ul indică o mișcare suficient de rapidă încât să nu existe tranzacționare în acel interval. Marketul revine adesea pentru a "rebalansa" acel gap. Folosit ca zonă de entry sau ca țintă.', formula: 'High[1] vs Low[3] (bullish FVG) · Low[1] vs High[3] (bearish FVG)' }, { id: 'ifvg', title: 'Inverse FVG (IFVG)', color: 'gold', summary: 'Un FVG care a fost umplut și acum acționează în direcția opusă inițială.', body: 'Când un FVG bullish e umplut complet și prețul rejectează acea zonă închizând sub el, devine inverse — acum e zonă de rezistență. Concept puternic pentru continuation trades.', formula: 'Filled FVG + opposite reaction = IFVG' }, { id: 'breaker', title: 'Breaker Block', color: 'acid', summary: 'Un order block care a fost violat, urmat de o întoarcere a structurii.', body: 'Breaker = OB care nu și-a respectat rolul. După invalidare, dacă structura se inversează, OB-ul violat devine breaker block și acționează în direcția opusă inițială.', formula: 'Failed OB + BOS opposite = Breaker' }, { id: 'displacement', title: 'Displacement', color: 'cyan', summary: 'O mișcare impulsivă, cu candele mari și volum, care indică o intenție clară.', body: 'Displacement-ul confirmă că instituționalii au intrat. Caută candele cu body mare relativ la average true range, închidere puternică și creare de FVG. Fără displacement, e doar zgomot.', formula: 'Large body candle + FVG created + BOS' }, { id: 'rr', title: 'Risk-to-Reward (R:R)', color: 'blue', summary: 'Raportul între riscul pe trade și potențialul de câștig.', body: 'Un trade 1:3 înseamnă riști 1R pentru a câștiga 3R. Cu win rate de 35% și R:R mediu de 1:3, ești profitabil pe termen lung. Calculezi întotdeauna ÎNAINTE de a intra, nu după.', formula: 'R:R = (TP - Entry) / (Entry - SL)' }, { id: 'sessions', title: 'Session Timing', color: 'gold', summary: 'Asia, London, NY — fiecare cu profil propriu de lichiditate și volatilitate.', body: 'Asia (00:00-08:00 RO) — acumulare, range. London (09:00-17:00 RO) — primul move real, sweep al Asia range. NY (15:30-22:00 RO) — volumul maxim, reverse-uri puternice. Cele mai bune setup-uri: London open + NY open.', formula: 'Asia → London sweep → NY reversal/continuation' }, { id: 'news', title: 'Economic News', color: 'acid', summary: 'CPI, NFP, FOMC, PPI — știrile care mișcă serios NASDAQ.', body: 'În prop firm, multe firme interzic trading-ul cu 2-5 min înainte și după știri high impact. Verifică calendarul economic zilnic. CPI și FOMC sunt cele mai periculoase și cele mai oportune pentru NQ.', formula: 'High impact = no trade window for prop' }, ]; const Accordion = ({ items, forceOpenId }) => { const [open, setOpen] = React.useState(null); // Auto-open when forceOpenId changes (e.g. user clicked a folder card) React.useEffect(() => { if (!forceOpenId) return; const idx = items.findIndex((it) => it.id === forceOpenId); if (idx >= 0) setOpen(idx); }, [forceOpenId, items]); return (
{items.map((it, i) => { const isOpen = open === i; return (

{it.body}

{it.formula && (
DEFINITION {it.formula}
)}
); })}
); }; // ============================================================ // CONCEPTS FOLDER — iOS-style yellow folder with peek cards // ------------------------------------------------------------ // Default: cards peek ~18% above the folder. // Hover: cards rise ~85% out + slight fan rotation. // Click: sets the matching CONCEPT in the accordion open and // scrolls to it smoothly. // ============================================================ const FOLDER_CARDS = [ { id: 'breaker', label: 'Breaker Block', accent: 'acid' }, { id: 'liquidity', label: 'Lichiditate', accent: 'cyan' }, { id: 'orderblock', label: 'Order Block', accent: 'blue' }, { id: 'reversal', label: 'Reversal', accent: 'rose' }, { id: 'retracement', label: 'Retracement', accent: 'cyan' }, { id: 'po3', label: 'PO3', accent: 'gold' }, ]; const ConceptsFolder = ({ onOpen }) => { const [hovered, setHovered] = React.useState(false); const clickCard = (id) => { onOpen?.(id); setTimeout(() => { const el = document.getElementById(`concept-${id}`); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 50); }; // 6 cards. Rest = small horizontal stagger + tiny tilt (each card peeks // slightly differently above the folder rim). Hover = wide fan-out arc. const restArrangement = [ { tx: -52, rot: -3.0 }, { tx: -32, rot: -1.8 }, { tx: -10, rot: -0.6 }, { tx: 10, rot: 0.6 }, { tx: 32, rot: 1.8 }, { tx: 52, rot: 3.0 }, ]; const hoverArrangement = [ { tx: -132, rot: -14 }, { tx: -80, rot: -8 }, { tx: -27, rot: -2 }, { tx: 27, rot: 2 }, { tx: 80, rot: 8 }, { tx: 132, rot: 14 }, ]; return (
setHovered(true)} onMouseLeave={() => setHovered(false)}>
{/* Folder back (the wall behind the cards) */}
{/* Folder tab on top */}
{/* Cards — clipped at the folder rim so the bottoms stay hidden */}
{FOLDER_CARDS.map((card, i) => { const a = hovered ? hoverArrangement[i] : restArrangement[i]; // Rest: card top peeks ~28px above the folder back top, bottom hidden inside. // Hover: card rises fully out of the folder. const restY = -40; const hoverY = -150; const ty = hovered ? hoverY : restY; const scale = hovered ? 1 : 0.96; return (
{ e.stopPropagation(); clickCard(card.id); }}>
{card.label}
); })}
{/* Folder front (the pocket lip) — sits IN FRONT of cards, hides the bottom portion of every card so only the top edge peeks above the rim. */}
); }; // ============================================================ // NEXT LEVEL CARD — interactive CTA with cursor-follow glow // Replaces the old `eborder acid` line animation with a soft // acid spotlight that tracks the mouse + subtle 3D tilt. // ============================================================ const NextLevelCard = ({ onApply, onNav, user }) => { const cardRef = React.useRef(null); const [hovered, setHovered] = React.useState(false); const [pos, setPos] = React.useState({ x: 50, y: 50 }); // % within card const [tilt, setTilt] = React.useState({ x: 0, y: 0 }); const onMove = (e) => { const el = cardRef.current; if (!el) return; const r = el.getBoundingClientRect(); const px = ((e.clientX - r.left) / r.width) * 100; const py = ((e.clientY - r.top) / r.height) * 100; setPos({ x: px, y: py }); // ±3° subtle tilt — keeps it premium, not jarring setTilt({ x: ((py / 100) - 0.5) * -3, y: ((px / 100) - 0.5) * 3, }); }; const onLeave = () => { setHovered(false); setTilt({ x: 0, y: 0 }); setPos({ x: 50, y: 50 }); }; return (
setHovered(true)} onMouseMove={onMove} onMouseLeave={onLeave}> {/* spotlight that follows the cursor */}
{/* subtle texture grain */}
{/* gradient border highlight */}
NEXT LEVEL

Vrei să înveți structurat?

Aplică pentru Elite Plan — mentorship 1-on-1, live calls de 2 ori pe săptămână, trade reviews și suport direct pe WhatsApp.

{!isEliteUser(user) && }
); }; const BasicsPage = ({ onNav, onApply, user, onLogin, onSignup }) => { const [openConceptId, setOpenConceptId] = React.useState(null); return ( <>
BASICS · MODULE

Trading Basics

Începe cu bazele corecte înainte să riști bani reali sau conturi de funding. Fără shortcuts, fără promisiuni.

{!user && (
Cont gratuit = acces complet la toate materialele
)}
setOpenConceptId(id)} />
{BASICS_MODULES.map((m, i) => (
{String(i + 1).padStart(2, '0')} / 07

{m.title}

{m.desc}

{m.time} {m.level}
))}
); }; Object.assign(window, { BasicsPage });