// ============================================================ // SHARED UI — icons, primitives, chart bg // ============================================================ const Icon = ({ name, size = 18, stroke = 2, ...rest }) => { const paths = { arrow: <>, arrowUR: <>, arrowDown: <>, check: <>, x: <>, plus: <>, chevDown: <>, chevRight: <>, chevLeft: <>, search: <>, menu: <>, play: <>, pause: <>, lock: <>, unlock: <>, shield: <>, chart: <>, candle: <>, target: <>, brain: <>, book: <>, bolt: <>, star: <>, users: <>, user: <>, discord: <>, youtube: <>, whatsapp: <>, phone: <>, mail: <>, calendar: <>, clock: <>, download: <>, file: <>, video: <>, settings: <>, layout: <>, flame: <>, coin: <>, diamond: <>, crown: <>, eye: <>, eyeOff: <>, heart: <>, globe: <>, refresh: <>, sparkle: <>, arrowUp: <>, info: <>, warn: <> }; return ( ); }; // ============================================================ // ICON CHIP — premium animated electric chip // ============================================================ const IconChip = ({ icon, color = 'acid', size = 'md', className = '' }) =>

; // ============================================================ // BUTTONS // ============================================================ const Button = ({ children, variant = 'acid', size = 'md', icon = 'arrow', iconOnly = false, onClick, href, type, className = '', ...rest }) => { const btnRef = React.useRef(null); const lastAddedRef = React.useRef(0); const [isListening, setIsListening] = React.useState(false); const [circles, setCircles] = React.useState([]); const createCircle = (x, y) => { const w = (btnRef.current && btnRef.current.offsetWidth) || 0; const xPos = w ? x / w : 0; const color = `linear-gradient(to right, var(--circle-start) ${xPos * 100}%, var(--circle-end) ${xPos * 100}%)`; setCircles(prev => [...prev, { id: Date.now() + Math.random(), x, y, color, fadeState: null }]); }; const handlePointerMove = (e) => { if (!isListening) return; const now = Date.now(); if (now - lastAddedRef.current > 100) { lastAddedRef.current = now; const r = e.currentTarget.getBoundingClientRect(); createCircle(e.clientX - r.left, e.clientY - r.top); } }; React.useEffect(() => { const pending = circles.filter(c => !c.fadeState); if (pending.length === 0) return; const timers = []; pending.forEach((c) => { timers.push(setTimeout(() => setCircles(p => p.map(x => x.id === c.id ? { ...x, fadeState: 'in' } : x)), 0)); timers.push(setTimeout(() => setCircles(p => p.map(x => x.id === c.id ? { ...x, fadeState: 'out' } : x)), 1000)); timers.push(setTimeout(() => setCircles(p => p.filter(x => x.id !== c.id)), 2200)); }); return () => timers.forEach(clearTimeout); }, [circles]); const cls = `btn btn-glass btn-${variant} ${size === 'sm' ? 'btn-sm' : ''} ${size === 'lg' ? 'btn-lg' : ''} ${className}`; const inner = ( <> {children} {icon && } {circles.map(({ id, x, y, color, fadeState }) => )} ); const shared = { ref: btnRef, className: cls, onClick, onPointerMove: handlePointerMove, onPointerEnter: () => setIsListening(true), onPointerLeave: () => { setIsListening(false); }, }; if (href) { return {inner}; } return ; }; // ============================================================ // BACKGROUND — candlestick chart // ============================================================ const CandleChart = () => null; const _CandleChartArchived = ({ density = 'normal', opacity = 0.42 }) => { // Deterministic candles trending upward, diagonal bottom-left → top-right const candles = React.useMemo(() => { const N = density === 'dense' ? 70 : density === 'sparse' ? 30 : 48; const arr = []; let price = 80; for (let i = 0; i < N; i++) { const drift = i / N * 55; const noise = (Math.sin(i * 1.7) + Math.cos(i * 0.9) + Math.sin(i * 0.4)) * 4; const open = price + noise * 0.4; const close = open + Math.sin(i * 2.1) * 4 + (Math.random() > 0.5 ? 1.2 : -1.2); const high = Math.max(open, close) + 1 + Math.abs(Math.sin(i)) * 2; const low = Math.min(open, close) - 1 - Math.abs(Math.cos(i * 1.3)) * 2; arr.push({ x: 30 + i / (N - 1) * 1140, open, close, high, low, up: close > open }); price = close + drift / N; } // Invert Y for visual; use y = 360 - val * 2 return arr.map((c) => ({ x: c.x, up: c.up, bodyTop: 380 - Math.max(c.open, c.close) * 2.4, bodyBottom: 380 - Math.min(c.open, c.close) * 2.4, wickTop: 380 - c.high * 2.4, wickBottom: 380 - c.low * 2.4 })); }, [density]); const linePath = candles.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x} ${(c.bodyTop + c.bodyBottom) / 2}` ).join(' '); return ( ); }; // ============================================================ // STAT CARD // ============================================================ const Stat = ({ value, label, suffix = '', color = 'acid', icon }) =>

{icon && }

Live

{value}{suffix}

{label}

; // ============================================================ // FLOAT CHIP — proof chip you scatter in sections (right/left) // ============================================================ const FloatChip = ({ brand, color = 'acid', line, val, valExtra, top, bottom, left, right, size = 'md', center = false, delay = 0, duration = 8, rotate, boost = 1 }) => { const ref = React.useRef(null); const [revealed, setRevealed] = React.useState(false); // Per-chip rotation seed (between -15 and 15) derived from delay if not specified const seedRotate = rotate !== undefined ? rotate : (((delay * 47) % 30) - 15); React.useEffect(() => { const el = ref.current; if (!el) return; // Trigger entry animation when chip enters viewport const io = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setRevealed(true); io.disconnect(); } }, { threshold: 0.1 }); io.observe(el); // Scroll-driven scale (chips grow as they travel through viewport) let frame = null; const update = () => { const rect = el.getBoundingClientRect(); const vh = window.innerHeight; const centerY = rect.top + rect.height / 2; // t: 0 when chip-center is at viewport-bottom, 1 when at top const t = Math.max(0, Math.min(1, 1 - (centerY / vh))); // Scale from 0.82 (entering bottom) to 1.18 (about to exit top) const scale = 0.82 + t * 0.36; el.style.setProperty('--scroll-scale', scale.toFixed(3)); frame = null; }; const onScroll = () => { if (frame === null) frame = requestAnimationFrame(update); }; window.addEventListener('scroll', onScroll, { passive: true }); update(); return () => { io.disconnect(); window.removeEventListener('scroll', onScroll); if (frame) cancelAnimationFrame(frame); }; }, []); const pos = { top, bottom, left, right }; Object.keys(pos).forEach((k) => pos[k] === undefined && delete pos[k]); const CHIP_COLORS = { acid: { cls: 'hf-acid', icon: 'rgba(183,255,26,0.18)' }, cyan: { cls: 'hf-cyan', icon: 'rgba(79,231,213,0.18)' }, blue: { cls: 'hf-blue', icon: 'rgba(90,200,255,0.18)' }, gold: { cls: 'hf-gold', icon: 'rgba(255,203,82,0.18)' }, indigo: { cls: 'hf-indigo', icon: 'rgba(99,102,241,0.20)' }, rose: { cls: 'hf-rose', icon: 'rgba(244,63,94,0.20)' }, violet: { cls: 'hf-violet', icon: 'rgba(139,92,246,0.20)' }, amber: { cls: 'hf-amber', icon: 'rgba(245,158,11,0.20)' }, }; const cInfo = CHIP_COLORS[color] || CHIP_COLORS.acid; const sizeCls = size === 'sm' ? 'scatter-chip-sm' : size === 'lg' ? 'scatter-chip-lg' : ''; const chipCls = `hero-float scatter-chip ${cInfo.cls} ${sizeCls}`; const brandData = brand === 'apex' ? { src: 'assets/logo-apex-fit.png', bg: '#000', bd: 'rgba(255,255,255,0.18)' } : brand === 'tradeify' ? { src: 'assets/logo-tradeify-icon.png', bg: '#000', bd: 'rgba(255,255,255,0.18)' } : brand === 'fundednext' ? { src: 'assets/logo-fundednext-fit.png', bg: '#000', bd: 'rgba(255,255,255,0.18)' } : null; const inner = (

{brandData ?

}

{line}

{val}{valExtra && <> · {valExtra}}

); if (center) { return (

{inner}

); } return (

{inner}

); }; // ============================================================ // SECTION HEADER // ============================================================ const SectionHeader = ({ eyebrow, title, subtitle, align = 'left', accentWord }) => { const renderTitle = () => { if (!accentWord) return title; const parts = title.split(accentWord); return <>{parts[0]}{accentWord}{parts[1]}; }; return (

{eyebrow &&

{eyebrow}

}

{renderTitle()}

{subtitle &&

{subtitle}

}

); }; // ============================================================ // REVEAL ON SCROLL — IntersectionObserver // ============================================================ const Reveal = ({ children, delay = 0, as: As = 'div', className = '', style = {}, ...rest }) => {children} ; // Helper used across pages to hide "Apply for Elite" CTAs from // users that already have Elite (or admin) — single source of truth. const isEliteUser = (user) => user?.role === 'elite' || user?.role === 'admin'; // Export to window Object.assign(window, { Icon, IconChip, Button, CandleChart, Stat, FloatChip, SectionHeader, Reveal, isEliteUser });