/home/devscfvi/AblePro/landing.html
<!doctype html>
<html lang="en">
<head>
<title>TradeJournal — The Professional Trading Journal for Serious Traders</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Track every trade, analyse your patterns, and become a more consistent trader. $10/month.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Bootstrap 5 standalone — NO AblePro -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Tabler icons -->
<link rel="stylesheet" href="assets/fonts/tabler-icons.min.css">
<style>
/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--dark: #090e1a;
--mid: #0f172a;
--navy: #1a1f35;
--accent: #4680FF;
--green: #10b981;
--red: #ef4444;
--muted: rgba(255,255,255,.5);
--border: rgba(255,255,255,.08);
}
html { scroll-behavior: smooth; }
body { font-family: 'Sora', sans-serif; background: #fff; color: #1e293b; -webkit-font-smoothing: antialiased; }
/* ── Navbar ── */
.lp-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
padding: .85rem 0; transition: background .3s, box-shadow .3s;
}
.lp-nav.scrolled { background: rgba(9,14,26,.95); backdrop-filter: blur(16px); box-shadow: 0 2px 24px rgba(0,0,0,.4); }
.lp-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lp-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.lp-brand-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px rgba(70,128,255,.3); }
.lp-brand-icon i { color: #fff; font-size: 1rem; }
.lp-brand-name { font-size: 1rem; font-weight: 700; color: #fff; }
.lp-nav-links { display: flex; align-items: center; gap: .1rem; list-style: none; }
.lp-nav-links a { color: rgba(255,255,255,.6); text-decoration: none; font-size: .84rem; font-weight: 500; padding: .4rem .8rem; border-radius: 6px; transition: color .2s; }
.lp-nav-links a:hover { color: #fff; }
.lp-nav-cta { display: flex; align-items: center; gap: .6rem; }
.btn-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: .4rem 1rem; border-radius: 8px; font-size: .83rem; font-weight: 600; text-decoration: none; transition: background .2s; }
.btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn-cta { background: var(--accent); color: #fff; padding: .45rem 1.1rem; border-radius: 8px; font-size: .83rem; font-weight: 700; text-decoration: none; box-shadow: 0 3px 14px rgba(70,128,255,.35); transition: background .2s, box-shadow .2s; }
.btn-cta:hover { background: #3570ef; color: #fff; box-shadow: 0 4px 20px rgba(70,128,255,.5); }
@media (max-width: 768px) { .lp-nav-links { display: none; } }
/* ── Hero ── */
.lp-hero {
min-height: 100vh;
background: radial-gradient(ellipse 120% 80% at 50% 0%, #1a2545 0%, var(--dark) 65%);
display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 80px;
}
.lp-hero::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
background-size: 54px 54px;
}
.hero-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(ellipse, rgba(70,128,255,.13) 0%, transparent 70%); pointer-events: none; }
.hero-title { font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 800; line-height: 1.1; color: #fff; letter-spacing: -.03em; }
.hero-title .grad { background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 1.05rem; color: var(--muted); line-height: 1.78; max-width: 500px; }
.trust-item { display: flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.45); font-size: .78rem; font-weight: 500; }
.trust-item i { color: var(--green); }
/* ── Hero mockup ── */
.hero-mockup { background: #1a2235; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04); }
.mockup-bar { background: #0d1321; padding: .65rem 1rem; display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.mockup-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.stat-chip { border-radius: 8px; padding: .5rem .75rem; text-align: center; }
.trade-row { display: flex; justify-content: space-between; align-items: center; padding: .45rem .65rem; border-radius: 6px; margin-bottom: .3rem; font-size: .75rem; }
.status-pill { font-size: .62rem; font-weight: 700; padding: .15rem .45rem; border-radius: 4px; text-transform: uppercase; }
/* ── Section shared ── */
.section-tag { display: inline-flex; align-items: center; gap: .4rem; background: rgba(70,128,255,.1); border: 1px solid rgba(70,128,255,.25); color: #60a5fa; border-radius: 9999px; padding: .28rem .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
.section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.section-sub { color: #64748b; font-size: .95rem; line-height: 1.72; max-width: 520px; margin: 0 auto; }
/* ── Broker strip ── */
.broker-strip { background: #0d1321; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 1.1rem 0; }
.broker-pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 9999px; padding: .42rem 1rem; color: rgba(255,255,255,.65); font-size: .8rem; font-weight: 600; white-space: nowrap; }
/* ── Features ── */
.feat-card { border: 1.5px solid #f1f5f9; border-radius: 16px; padding: 1.75rem; background: #fff; transition: box-shadow .2s, border-color .2s; height: 100%; }
.feat-card:hover { box-shadow: 0 8px 30px rgba(70,128,255,.1); border-color: #dbeafe; }
.feat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.3rem; }
/* ── Module tabs ── */
.modules-section { background: linear-gradient(135deg, var(--dark) 0%, #0f172a 100%); padding: 100px 0; }
.module-tab { padding: 1rem 1.25rem; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: all .22s; margin-bottom: .4rem; }
.module-tab:hover { background: rgba(255,255,255,.05); }
.module-tab.active { background: rgba(70,128,255,.12); border-color: rgba(70,128,255,.3); }
.module-tab h6 { font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.55); margin: 0 0 .2rem; transition: color .2s; }
.module-tab.active h6 { color: #93c5fd; }
.module-tab p { font-size: .75rem; color: rgba(255,255,255,.3); margin: 0; line-height: 1.5; transition: color .2s; }
.module-tab.active p { color: rgba(255,255,255,.5); }
.module-tab-icon { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .85rem; margin-bottom: .5rem; background: rgba(255,255,255,.07); color: rgba(255,255,255,.5); }
.module-tab.active .module-tab-icon { background: rgba(70,128,255,.2); color: #60a5fa; }
.module-preview { background: #1a2235; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.module-preview-bar { background: #0d1321; padding: .65rem 1rem; display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.mp-panel { display: none; padding: 1.25rem; }
.mp-panel.active { display: block; }
.mp-label { font-size: .62rem; color: rgba(255,255,255,.35); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.mp-val { font-size: .9rem; font-weight: 700; }
.mp-chip { border-radius: 7px; padding: .5rem .7rem; }
.mp-bar-wrap { background: rgba(255,255,255,.04); border-radius: 8px; padding: .5rem; }
.mp-bar-row { display: flex; align-items: flex-end; gap: 3px; height: 50px; }
.mp-bar { flex: 1; border-radius: 2px 2px 0 0; }
.mp-trade-row { display: flex; justify-content: space-between; align-items: center; padding: .4rem .6rem; border-radius: 6px; margin-bottom: .3rem; font-size: .73rem; }
.mp-emotion-row { display: flex; align-items: center; justify-content: space-between; padding: .38rem .6rem; border-radius: 6px; margin-bottom: .28rem; }
.mp-emo-bar { height: 5px; border-radius: 3px; flex: 1; margin: 0 .75rem; }
.mp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mp-cal-day { aspect-ratio: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 600; }
.mp-progress-bar { background: rgba(255,255,255,.1); border-radius: 4px; height: 6px; }
.mp-progress-fill { height: 6px; border-radius: 4px; }
/* ── Testimonial marquee ── */
.testimonials-section { background: #f8fafc; padding: 100px 0 60px; }
.marquee-wrapper { overflow: hidden; position: relative; }
.marquee-wrapper::before, .marquee-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none; }
.marquee-wrapper::before { left: 0; background: linear-gradient(90deg, #f8fafc, transparent); }
.marquee-wrapper::after { right: 0; background: linear-gradient(-90deg, #f8fafc, transparent); }
.marquee-track { display: flex; gap: 1.25rem; animation: marquee-scroll 42s linear infinite; width: max-content; }
.marquee-track.reverse { animation-direction: reverse; animation-duration: 52s; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.t-card { background: #fff; border: 1.5px solid #f1f5f9; border-radius: 14px; padding: 1.2rem 1.4rem; width: 278px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.t-stars { color: #f59e0b; font-size: .75rem; margin-bottom: .6rem; }
.t-text { font-size: .82rem; color: #374151; line-height: 1.62; margin-bottom: .8rem; }
.t-author { display: flex; align-items: center; gap: .6rem; }
.t-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.t-name { font-size: .78rem; font-weight: 600; color: #1e293b; }
.t-role { font-size: .7rem; color: #94a3b8; }
/* ── Stats section ── */
.stats-section { background: linear-gradient(135deg, var(--dark), #1a1f35); padding: 80px 0; }
.stat-num { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* ── Pricing ── */
.price-card { border: 2px solid #e2e8f0; border-radius: 20px; padding: 2.25rem 2rem; background: #fff; height: 100%; }
.price-card.featured { border-color: var(--accent); position: relative; box-shadow: 0 14px 40px rgba(70,128,255,.15); }
.featured-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; padding: .22rem .85rem; border-radius: 9999px; white-space: nowrap; }
.price-amount { font-size: 2.8rem; font-weight: 800; letter-spacing: -.04em; }
.price-check { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; font-size: .875rem; color: #374151; }
.price-check i { color: var(--green); flex-shrink: 0; }
/* ── CTA ── */
.cta-section { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(70,128,255,.14), transparent), linear-gradient(135deg, #1e1b4b 0%, var(--dark) 100%); padding: 120px 0; }
/* ── Footer ── */
.lp-footer { background: #050a14; padding-top: 4rem; }
.footer-brand-text { font-size: .83rem; color: rgba(255,255,255,.38); line-height: 1.72; max-width: 260px; }
.footer-col h6 { font-size: .75rem; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1rem; }
.footer-link { display: block; color: rgba(255,255,255,.45); text-decoration: none; font-size: .83rem; margin-bottom: .5rem; transition: color .2s; }
.footer-link:hover { color: #fff; }
/* ── Utility ── */
.bg-dark-section { background: var(--dark); }
.section-light { background: #f8fafc; }
.section-white { background: #fff; }
</style>
</head>
<body>
<!-- ══ NAVBAR ════════════════════════════════════════════ -->
<nav class="lp-nav" id="lp-nav">
<div class="container">
<a href="landing.html" class="lp-brand">
<div class="lp-brand-icon"><i class="ti ti-chart-line"></i></div>
<span class="lp-brand-name">TradeJournal</span>
</a>
<ul class="lp-nav-links mb-0 ps-0">
<li><a href="#features">Features</a></li>
<li><a href="#modules">How It Works</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#reviews">Reviews</a></li>
</ul>
<div class="lp-nav-cta">
<a href="pages/login-v1.html" class="btn-ghost d-none d-md-inline-flex">Log in</a>
<a href="pages/register-v1.html" class="btn-cta">Start free trial</a>
</div>
</div>
</nav>
<!-- ══ HERO ════════════════════════════════════════════════ -->
<header class="lp-hero" id="home">
<div class="hero-glow"></div>
<div class="container position-relative py-5" style="z-index:2">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<div class="mb-4">
<span style="display:inline-flex;align-items:center;gap:.4rem;background:rgba(70,128,255,.12);border:1px solid rgba(70,128,255,.25);color:#93c5fd;border-radius:9999px;padding:.28rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase">
<i class="ti ti-bolt"></i> IBKR · Binance · Coinbase · Any CSV
</span>
</div>
<h1 class="hero-title mb-4">
Stop guessing.<br>Start <span class="grad">trading smarter.</span>
</h1>
<p class="hero-sub mb-5">
TradeJournal imports your trades automatically, tracks every P&L,
reveals patterns in your mistakes, and shows you exactly when and what you trade best.
</p>
<div class="d-flex flex-wrap gap-3 mb-4">
<a href="pages/register-v1.html" class="btn-cta" style="padding:.7rem 1.75rem;font-size:.95rem;border-radius:10px">
Start 7-Day Free Trial <i class="ti ti-arrow-right ms-1"></i>
</a>
<a href="#modules" style="display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);padding:.7rem 1.5rem;border-radius:10px;font-size:.95rem;font-weight:600;text-decoration:none;transition:border-color .2s"
onmouseenter="this.style.borderColor='rgba(255,255,255,.45)'"
onmouseleave="this.style.borderColor='rgba(255,255,255,.2)'">
See How It Works
</a>
</div>
<div class="d-flex flex-wrap gap-3">
<span class="trust-item"><i class="ti ti-check"></i> No credit card</span>
<span class="trust-item"><i class="ti ti-check"></i> Cancel anytime</span>
<span class="trust-item"><i class="ti ti-check"></i> $10 / month after trial</span>
</div>
</div>
<div class="col-lg-6 d-none d-lg-block">
<div class="hero-mockup">
<div class="mockup-bar">
<span class="mockup-dot bg-danger"></span>
<span class="mockup-dot bg-warning"></span>
<span class="mockup-dot bg-success"></span>
<span style="color:rgba(255,255,255,.4);font-size:.7rem;margin-left:.5rem">TradeJournal — Dashboard</span>
</div>
<div class="p-4">
<div class="row g-2 mb-3">
<div class="col-3"><div class="stat-chip" style="background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2)"><div class="text-success fw-bold" style="font-size:.88rem">+$487</div><div style="color:rgba(255,255,255,.4);font-size:.65rem">Net P&L</div></div></div>
<div class="col-3"><div class="stat-chip" style="background:rgba(70,128,255,.1);border:1px solid rgba(70,128,255,.2)"><div class="text-primary fw-bold" style="font-size:.88rem">68%</div><div style="color:rgba(255,255,255,.4);font-size:.65rem">Win Rate</div></div></div>
<div class="col-3"><div class="stat-chip" style="background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2)"><div class="fw-bold" style="font-size:.88rem;color:#a78bfa">1:2.4</div><div style="color:rgba(255,255,255,.4);font-size:.65rem">Avg R:R</div></div></div>
<div class="col-3"><div class="stat-chip" style="background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2)"><div class="text-warning fw-bold" style="font-size:.88rem">24</div><div style="color:rgba(255,255,255,.4);font-size:.65rem">Trades</div></div></div>
</div>
<div class="mp-bar-wrap mb-3">
<div style="color:rgba(255,255,255,.4);font-size:.65rem;margin-bottom:.4rem">Equity Curve</div>
<div class="mp-bar-row">
<div class="mp-bar" style="height:28%;background:rgba(70,128,255,.5)"></div>
<div class="mp-bar" style="height:42%;background:rgba(70,128,255,.6)"></div>
<div class="mp-bar" style="height:32%;background:rgba(239,68,68,.5)"></div>
<div class="mp-bar" style="height:58%;background:rgba(16,185,129,.6)"></div>
<div class="mp-bar" style="height:52%;background:rgba(16,185,129,.65)"></div>
<div class="mp-bar" style="height:70%;background:#10b981;opacity:.8"></div>
<div class="mp-bar" style="height:80%;background:#10b981;opacity:.9"></div>
<div class="mp-bar" style="height:90%;background:#10b981"></div>
<div class="mp-bar" style="height:95%;background:#10b981"></div>
<div class="mp-bar" style="height:100%;background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.4)"></div>
</div>
</div>
<div class="mp-trade-row" style="background:rgba(16,185,129,.07)"><span class="fw-bold text-white">NVDA</span><span class="status-pill" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span><span class="text-success fw-semibold">+$401</span></div>
<div class="mp-trade-row" style="background:rgba(239,68,68,.07)"><span class="fw-bold text-white">DRMA</span><span class="status-pill" style="background:rgba(239,68,68,.2);color:#ef4444">LOSS</span><span class="text-danger fw-semibold">-$38</span></div>
<div class="mp-trade-row" style="background:rgba(16,185,129,.07)"><span class="fw-bold text-white">AAPL</span><span class="status-pill" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span><span class="text-success fw-semibold">+$124</span></div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- ══ BROKER STRIP ══════════════════════════════════════ -->
<div class="broker-strip" id="brokers">
<div class="container">
<div class="d-flex flex-wrap justify-content-center align-items-center gap-3">
<span style="color:rgba(255,255,255,.4);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em">Supported platforms:</span>
<span class="broker-pill"><i class="ti ti-building-bank text-primary"></i> Interactive Brokers</span>
<span class="broker-pill"><i class="ti ti-currency-bitcoin text-warning"></i> Binance</span>
<span class="broker-pill"><i class="ti ti-coin text-primary"></i> Coinbase</span>
<span class="broker-pill"><i class="ti ti-brand-meta text-info"></i> MetaTrader 4/5</span>
<span class="broker-pill"><i class="ti ti-table-import text-success"></i> Any CSV</span>
</div>
</div>
</div>
<!-- ══ FEATURES ══════════════════════════════════════════ -->
<section id="features" style="padding:100px 0;background:#f8fafc">
<div class="container">
<div class="text-center mb-5">
<div class="section-tag"><i class="ti ti-sparkles"></i> Features</div>
<h2 class="section-title mb-3">Everything a serious trader needs</h2>
<p class="section-sub">Not just a spreadsheet. A complete system to track, review, and sharpen every edge.</p>
</div>
<div class="row g-4">
<div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#eff6ff"><i class="ti ti-upload text-primary" style="font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">One-click broker import</h5><p class="text-muted mb-0" style="font-size:.88rem">Import from IBKR, Binance, or Coinbase in seconds. Round-trips split correctly — even multiple trades same ticker same day.</p></div></div>
<div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#f0fdf4"><i class="ti ti-chart-line" style="color:#10b981;font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">Equity curve & analytics</h5><p class="text-muted mb-0" style="font-size:.88rem">Running balance, daily P&L, win rate by day-of-week, profit factor, and expectancy — all in one dashboard.</p></div></div>
<div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#fffbeb"><i class="ti ti-brain text-warning" style="font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">Psychology tracking</h5><p class="text-muted mb-0" style="font-size:.88rem">Tag your emotion before entry — Confident, Calm, FOMO, Anxious. See which state correlates with your wins and losses.</p></div></div>
<div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#fef2f2"><i class="ti ti-alert-triangle text-danger" style="font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">Mistake library</h5><p class="text-muted mb-0" style="font-size:.88rem">Tag mistakes — FOMO entry, moved stop loss, no plan. Track which errors cost you the most money over time.</p></div></div>
<div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#ecfeff"><i class="ti ti-calendar-stats text-info" style="font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">P&L Calendar heatmap</h5><p class="text-muted mb-0" style="font-size:.88rem">A calendar view of every day — green for profitable, red for loss. Instantly spot your best weeks and worst patterns.</p></div></div>
<div class="col-md-6 col-lg-4"><div class="feat-card"><div class="feat-icon" style="background:#faf5ff"><i class="ti ti-target" style="color:#a78bfa;font-size:1.3rem"></i></div><h5 class="fw-bold mb-2">Goal tracking</h5><p class="text-muted mb-0" style="font-size:.88rem">Set daily, weekly, or monthly targets for profit, win rate, or R:R. Track progress in real time against every goal.</p></div></div>
</div>
</div>
</section>
<!-- ══ MODULES ════════════════════════════════════════════ -->
<section id="modules" class="modules-section">
<div class="container">
<div class="text-center mb-5">
<div class="section-tag" style="background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.2);color:#93c5fd"><i class="ti ti-layout-dashboard"></i> Inside the App</div>
<h2 class="section-title text-white mb-3">Every tool in one place</h2>
<p class="mb-0" style="color:rgba(255,255,255,.5)">Click each module to preview what's inside your dashboard.</p>
</div>
<div class="row g-4 align-items-start">
<div class="col-lg-4">
<div id="module-tabs">
<div class="module-tab active" onclick="switchModule(this,'mp-history')">
<div class="module-tab-icon"><i class="ti ti-history"></i></div>
<h6>Trade History</h6>
<p>Full table with exit price, P&L, status, emotion & screenshots per trade</p>
</div>
<div class="module-tab" onclick="switchModule(this,'mp-analytics')">
<div class="module-tab-icon"><i class="ti ti-chart-bar"></i></div>
<h6>Analytics</h6>
<p>Equity curve, profit factor, win rate by day, MAE/MFE and more</p>
</div>
<div class="module-tab" onclick="switchModule(this,'mp-calendar')">
<div class="module-tab-icon"><i class="ti ti-calendar-stats"></i></div>
<h6>P&L Calendar</h6>
<p>Monthly heatmap — green days, red days, and your best/worst streaks</p>
</div>
<div class="module-tab" onclick="switchModule(this,'mp-psychology')">
<div class="module-tab-icon"><i class="ti ti-brain"></i></div>
<h6>Psychology</h6>
<p>Emotion breakdown — see exactly how your mindset affects your P&L</p>
</div>
<div class="module-tab" onclick="switchModule(this,'mp-goals')">
<div class="module-tab-icon"><i class="ti ti-target"></i></div>
<h6>Goals & Journal</h6>
<p>Set targets, write daily reflections, and track your progress over time</p>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="module-preview">
<div class="module-preview-bar">
<span class="mockup-dot bg-danger"></span>
<span class="mockup-dot bg-warning"></span>
<span class="mockup-dot bg-success"></span>
<span style="color:rgba(255,255,255,.4);font-size:.7rem;margin-left:.5rem" id="mp-title">Trade History</span>
</div>
<!-- Trade History -->
<div class="mp-panel active" id="mp-history">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="text-white fw-semibold" style="font-size:.82rem">Recent Trades</span>
<div class="d-flex gap-2">
<span style="background:rgba(70,128,255,.15);color:#60a5fa;padding:.15rem .5rem;border-radius:4px;font-size:.65rem;font-weight:700">Filter</span>
<span style="background:rgba(16,185,129,.15);color:#2ca87f;padding:.15rem .5rem;border-radius:4px;font-size:.65rem;font-weight:700">Export</span>
</div>
</div>
<div style="background:rgba(255,255,255,.04);border-radius:10px;overflow:hidden">
<div class="d-flex px-3 py-2" style="border-bottom:1px solid rgba(255,255,255,.07);font-size:.62rem;color:rgba(255,255,255,.3);font-weight:700;text-transform:uppercase;letter-spacing:.05em">
<span style="flex:1.2">Symbol</span><span style="flex:.8">Date</span><span style="flex:.8;text-align:right">Entry</span><span style="flex:.8;text-align:right">Exit</span><span style="flex:.8;text-align:right">P&L</span><span style="flex:.6;text-align:center">Status</span>
</div>
<div class="d-flex px-3 py-2" style="border-bottom:1px solid rgba(255,255,255,.05);font-size:.72rem"><span class="fw-bold text-white" style="flex:1.2">NVDA</span><span style="flex:.8;color:rgba(255,255,255,.4)">Mar 6</span><span class="text-white" style="flex:.8;text-align:right">$812</span><span class="text-success" style="flex:.8;text-align:right">$893</span><span class="text-success fw-semibold" style="flex:.8;text-align:right">+$401</span><span style="flex:.6;text-align:center"><span class="status-pill" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span></span></div>
<div class="d-flex px-3 py-2" style="border-bottom:1px solid rgba(255,255,255,.05);font-size:.72rem"><span class="fw-bold text-white" style="flex:1.2">AAPL</span><span style="flex:.8;color:rgba(255,255,255,.4)">Mar 5</span><span class="text-white" style="flex:.8;text-align:right">$178</span><span class="text-success" style="flex:.8;text-align:right">$185</span><span class="text-success fw-semibold" style="flex:.8;text-align:right">+$124</span><span style="flex:.6;text-align:center"><span class="status-pill" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span></span></div>
<div class="d-flex px-3 py-2" style="font-size:.72rem"><span class="fw-bold text-white" style="flex:1.2">DRMA</span><span style="flex:.8;color:rgba(255,255,255,.4)">Mar 4</span><span class="text-white" style="flex:.8;text-align:right">$14.8</span><span class="text-danger" style="flex:.8;text-align:right">$12.2</span><span class="text-danger fw-semibold" style="flex:.8;text-align:right">-$38</span><span style="flex:.6;text-align:center"><span class="status-pill" style="background:rgba(239,68,68,.2);color:#ef4444">LOSS</span></span></div>
</div>
</div>
<!-- Analytics -->
<div class="mp-panel" id="mp-analytics">
<div class="row g-2 mb-3">
<div class="col-4"><div class="mp-chip" style="background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2)"><div class="mp-label">Profit Factor</div><div class="mp-val text-success">2.34</div></div></div>
<div class="col-4"><div class="mp-chip" style="background:rgba(70,128,255,.1);border:1px solid rgba(70,128,255,.2)"><div class="mp-label">Expectancy</div><div class="mp-val text-primary">$18.40</div></div></div>
<div class="col-4"><div class="mp-chip" style="background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2)"><div class="mp-label">Win Rate</div><div class="mp-val" style="color:#a78bfa">68%</div></div></div>
</div>
<div class="mp-bar-wrap mb-3">
<div class="mp-label mb-1">Equity Curve — Last 30 Days</div>
<div class="mp-bar-row">
<div class="mp-bar" style="height:30%;background:rgba(70,128,255,.5)"></div>
<div class="mp-bar" style="height:45%;background:rgba(70,128,255,.6)"></div>
<div class="mp-bar" style="height:32%;background:rgba(239,68,68,.5)"></div>
<div class="mp-bar" style="height:62%;background:rgba(16,185,129,.6)"></div>
<div class="mp-bar" style="height:55%;background:rgba(16,185,129,.65)"></div>
<div class="mp-bar" style="height:74%;background:#10b981;opacity:.8"></div>
<div class="mp-bar" style="height:82%;background:#10b981;opacity:.9"></div>
<div class="mp-bar" style="height:100%;background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.4)"></div>
</div>
</div>
<div class="mp-label mb-1">Win Rate by Day</div>
<div class="d-flex gap-1">
<div style="flex:1;text-align:center"><div style="height:36px;background:rgba(70,128,255,.3);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Mon</span></div>
<div style="flex:1;text-align:center"><div style="height:56px;background:rgba(16,185,129,.5);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Tue</span></div>
<div style="flex:1;text-align:center"><div style="height:28px;background:rgba(239,68,68,.4);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Wed</span></div>
<div style="flex:1;text-align:center"><div style="height:64px;background:rgba(16,185,129,.6);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Thu</span></div>
<div style="flex:1;text-align:center"><div style="height:44px;background:rgba(70,128,255,.35);border-radius:4px;margin-bottom:3px"></div><span style="font-size:.58rem;color:rgba(255,255,255,.3)">Fri</span></div>
</div>
</div>
<!-- Calendar -->
<div class="mp-panel" id="mp-calendar">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="text-white fw-semibold" style="font-size:.82rem">March 2026</span>
<span class="text-success fw-semibold" style="font-size:.75rem">Month: +$487</span>
</div>
<div class="d-flex gap-1 mb-2">
<span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">M</span>
<span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">T</span>
<span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">W</span>
<span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">T</span>
<span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">F</span>
<span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">S</span>
<span style="flex:1;text-align:center;font-size:.6rem;color:rgba(255,255,255,.28);font-weight:700">S</span>
</div>
<div class="mp-cal-grid">
<div class="mp-cal-day"></div>
<div class="mp-cal-day" style="background:rgba(16,185,129,.25);color:#2ca87f">+$124</div>
<div class="mp-cal-day" style="background:rgba(239,68,68,.2);color:#ef4444">-$38</div>
<div class="mp-cal-day" style="background:rgba(16,185,129,.35);color:#2ca87f">+$201</div>
<div class="mp-cal-day" style="background:rgba(16,185,129,.2);color:#2ca87f">+$87</div>
<div class="mp-cal-day" style="background:rgba(255,255,255,.05);color:rgba(255,255,255,.2)">—</div>
<div class="mp-cal-day" style="background:rgba(255,255,255,.05);color:rgba(255,255,255,.2)">—</div>
<div class="mp-cal-day" style="background:rgba(239,68,68,.22);color:#ef4444">-$62</div>
<div class="mp-cal-day" style="background:rgba(16,185,129,.3);color:#2ca87f">+$156</div>
<div class="mp-cal-day" style="background:rgba(16,185,129,.2);color:#2ca87f">+$44</div>
<div class="mp-cal-day" style="background:rgba(16,185,129,.45);color:#2ca87f">+$401</div>
<div class="mp-cal-day" style="background:rgba(16,185,129,.25);color:#2ca87f">+$114</div>
<div class="mp-cal-day" style="background:rgba(255,255,255,.05);color:rgba(255,255,255,.2)">—</div>
<div class="mp-cal-day" style="background:rgba(255,255,255,.05);color:rgba(255,255,255,.2)">—</div>
</div>
</div>
<!-- Psychology -->
<div class="mp-panel" id="mp-psychology">
<div class="mp-label mb-3">P&L by Emotion State</div>
<div class="mp-emotion-row" style="background:rgba(16,185,129,.07)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">Confident</span><div class="mp-emo-bar" style="background:rgba(16,185,129,.6)"></div><span class="text-success fw-semibold" style="font-size:.73rem">+$312</span></div>
<div class="mp-emotion-row" style="background:rgba(16,185,129,.05)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">Calm</span><div class="mp-emo-bar" style="background:rgba(16,185,129,.4);flex:.7"></div><span class="text-success fw-semibold" style="font-size:.73rem">+$224</span></div>
<div class="mp-emotion-row" style="background:rgba(245,158,11,.05)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">Anxious</span><div class="mp-emo-bar" style="background:rgba(245,158,11,.4);flex:.2"></div><span class="text-warning fw-semibold" style="font-size:.73rem">-$14</span></div>
<div class="mp-emotion-row" style="background:rgba(239,68,68,.08)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">FOMO</span><div class="mp-emo-bar" style="background:rgba(239,68,68,.6);flex:.35"></div><span class="text-danger fw-semibold" style="font-size:.73rem">-$196</span></div>
<div class="mp-emotion-row" style="background:rgba(239,68,68,.06)"><span style="font-size:.73rem;color:#fff;font-weight:600;width:72px">Greedy</span><div class="mp-emo-bar" style="background:rgba(239,68,68,.45);flex:.25"></div><span class="text-danger fw-semibold" style="font-size:.73rem">-$88</span></div>
<div class="mt-3 p-2 rounded-2" style="background:rgba(70,128,255,.08);border:1px solid rgba(70,128,255,.2)">
<div style="font-size:.68rem;color:rgba(255,255,255,.5)">💡 You lose <span class="text-danger fw-semibold">3.2×</span> more when trading FOMO. Add a pre-trade checklist.</div>
</div>
</div>
<!-- Goals -->
<div class="mp-panel" id="mp-goals">
<div class="mp-label mb-3">Monthly Goals — March 2026</div>
<div class="mb-2 p-3 rounded-2" style="background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2)">
<div class="d-flex justify-content-between mb-1"><span style="font-size:.72rem;color:#fff;font-weight:600">Monthly Profit Target</span><span style="font-size:.72rem;color:#10b981;font-weight:700">$487 / $500</span></div>
<div class="mp-progress-bar"><div class="mp-progress-fill" style="background:#10b981;width:97%"></div></div>
<div style="font-size:.6rem;color:rgba(255,255,255,.3);margin-top:3px">97% · 3 days left</div>
</div>
<div class="mb-2 p-3 rounded-2" style="background:rgba(70,128,255,.08);border:1px solid rgba(70,128,255,.2)">
<div class="d-flex justify-content-between mb-1"><span style="font-size:.72rem;color:#fff;font-weight:600">Win Rate Target</span><span style="font-size:.72rem;color:#4680FF;font-weight:700">68% / 65%</span></div>
<div class="mp-progress-bar"><div class="mp-progress-fill" style="background:#4680FF;width:100%"></div></div>
<div style="font-size:.6rem;color:#10b981;margin-top:3px">✓ Goal exceeded!</div>
</div>
<div class="p-3 rounded-2" style="background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.2)">
<div class="d-flex justify-content-between mb-1"><span style="font-size:.72rem;color:#fff;font-weight:600">Avg R:R Target</span><span style="font-size:.72rem;font-weight:700;color:#a78bfa">1:2.4 / 1:2.0</span></div>
<div class="mp-progress-bar"><div class="mp-progress-fill" style="background:#a78bfa;width:100%"></div></div>
<div style="font-size:.6rem;color:#10b981;margin-top:3px">✓ Goal exceeded!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ══ STATS ══════════════════════════════════════════════ -->
<section class="stats-section">
<div class="container">
<div class="row g-4 text-center">
<div class="col-6 col-md-3"><div class="stat-num">6+</div><p class="mb-0 mt-1" style="color:rgba(255,255,255,.5);font-size:.85rem">Broker integrations</p></div>
<div class="col-6 col-md-3"><div class="stat-num">20+</div><p class="mb-0 mt-1" style="color:rgba(255,255,255,.5);font-size:.85rem">Analytics metrics</p></div>
<div class="col-6 col-md-3"><div class="stat-num">∞</div><p class="mb-0 mt-1" style="color:rgba(255,255,255,.5);font-size:.85rem">Trades you can log</p></div>
<div class="col-6 col-md-3"><div class="stat-num">$10</div><p class="mb-0 mt-1" style="color:rgba(255,255,255,.5);font-size:.85rem">Per month, flat</p></div>
</div>
</div>
</section>
<!-- ══ PRICING ════════════════════════════════════════════ -->
<section id="pricing" style="padding:100px 0;background:#f8fafc">
<div class="container">
<div class="text-center mb-5">
<div class="section-tag"><i class="ti ti-receipt"></i> Pricing</div>
<h2 class="section-title mb-3">Simple, honest pricing</h2>
<p class="section-sub">One plan. Everything included. No hidden fees, no tiers.</p>
</div>
<div class="row justify-content-center g-4">
<div class="col-md-5 col-lg-4">
<div class="price-card">
<div style="display:inline-block;background:#f1f5f9;color:#64748b;border-radius:20px;padding:.25rem .85rem;font-size:.75rem;font-weight:700;margin-bottom:1rem">Free Trial</div>
<div class="price-amount mb-1">$0</div>
<p class="text-muted mb-4" style="font-size:.85rem">7 days · No card needed</p>
<div class="price-check"><i class="ti ti-check-circle"></i>Full access to every feature</div>
<div class="price-check"><i class="ti ti-check-circle"></i>Unlimited trade imports</div>
<div class="price-check"><i class="ti ti-check-circle"></i>All broker integrations</div>
<div class="price-check"><i class="ti ti-check-circle"></i>No credit card required</div>
<a href="pages/register-v1.html" class="d-block text-center mt-4" style="padding:.85rem;border:2px solid var(--accent);color:var(--accent);border-radius:12px;font-weight:700;text-decoration:none;transition:background .2s"
onmouseenter="this.style.background='rgba(70,128,255,.07)'"
onmouseleave="this.style.background=''">Start Free Trial</a>
</div>
</div>
<div class="col-md-5 col-lg-4">
<div class="price-card featured">
<div class="featured-badge">MOST POPULAR</div>
<div style="display:inline-block;background:rgba(70,128,255,.1);color:var(--accent);border-radius:20px;padding:.25rem .85rem;font-size:.75rem;font-weight:700;margin-bottom:1rem">Pro</div>
<div class="price-amount text-primary mb-1">$10</div>
<p class="text-muted mb-4" style="font-size:.85rem">per month · cancel anytime</p>
<div class="price-check"><i class="ti ti-check-circle"></i>Everything in Free Trial</div>
<div class="price-check"><i class="ti ti-check-circle"></i>Unlimited trade history</div>
<div class="price-check"><i class="ti ti-check-circle"></i>Advanced analytics & reports</div>
<div class="price-check"><i class="ti ti-check-circle"></i>Screenshot uploads per trade</div>
<div class="price-check"><i class="ti ti-check-circle"></i>Goal tracking & alerts</div>
<div class="price-check"><i class="ti ti-check-circle"></i>Daily journal & reflections</div>
<a href="pages/register-v1.html" class="d-block text-center mt-4 text-white" style="padding:.85rem;background:var(--accent);border-radius:12px;font-weight:700;text-decoration:none;box-shadow:0 4px 16px rgba(70,128,255,.35);transition:background .2s"
onmouseenter="this.style.background='#3570ef'"
onmouseleave="this.style.background='var(--accent)'">Get Started</a>
</div>
</div>
</div>
</div>
</section>
<!-- ══ TESTIMONIALS ════════════════════════════════════════ -->
<section id="reviews" class="testimonials-section">
<div class="container text-center mb-5">
<div class="section-tag"><i class="ti ti-star"></i> Reviews</div>
<h2 class="section-title mb-3">Traders love it</h2>
<p class="section-sub">From day traders to swing traders — here's what they say about TradeJournal.</p>
</div>
<div class="marquee-wrapper mb-4">
<div class="marquee-track">
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Finally a journal that imports my IBKR trades correctly — even splits same-day round trips. Saved me hours."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#4680FF,#818cf8)">MK</div><div><div class="t-name">Mohammed K.</div><div class="t-role">Day Trader · Stocks</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The emotion tracking showed me I lose 3× more when trading FOMO. That insight alone was worth way more than $10/month."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#10b981,#34d399)">JR</div><div><div class="t-name">James R.</div><div class="t-role">Swing Trader · Crypto</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Like TraderVue but cleaner. Profit factor, expectancy, equity curve — everything I needed in one place."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#f59e0b,#fbbf24)">SA</div><div><div class="t-name">Sara A.</div><div class="t-role">Forex Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The P&L calendar is a game-changer. I immediately saw I was giving back profits every Friday afternoon."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa)">DR</div><div><div class="t-name">David R.</div><div class="t-role">Options Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Goal tracking keeps me accountable. I set a 65% win rate target and now I actually think before entering."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#ef4444,#f97316)">AN</div><div><div class="t-name">Ahmed N.</div><div class="t-role">Crypto Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Binance import worked perfectly. All my spot and futures trades imported with correct P&L automatically."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9)">LC</div><div><div class="t-name">Lin C.</div><div class="t-role">Crypto Scalper</div></div></div></div>
<!-- Duplicates for seamless loop -->
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Finally a journal that imports my IBKR trades correctly — even splits same-day round trips. Saved me hours."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#4680FF,#818cf8)">MK</div><div><div class="t-name">Mohammed K.</div><div class="t-role">Day Trader · Stocks</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The emotion tracking showed me I lose 3× more when trading FOMO. That insight alone was worth way more than $10/month."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#10b981,#34d399)">JR</div><div><div class="t-name">James R.</div><div class="t-role">Swing Trader · Crypto</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Like TraderVue but cleaner. Profit factor, expectancy, equity curve — everything I needed in one place."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#f59e0b,#fbbf24)">SA</div><div><div class="t-name">Sara A.</div><div class="t-role">Forex Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The P&L calendar is a game-changer. I immediately saw I was giving back profits every Friday afternoon."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#8b5cf6,#a78bfa)">DR</div><div><div class="t-name">David R.</div><div class="t-role">Options Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Goal tracking keeps me accountable. I set a 65% win rate target and now I actually think before entering."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#ef4444,#f97316)">AN</div><div><div class="t-name">Ahmed N.</div><div class="t-role">Crypto Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Binance import worked perfectly. All my spot and futures trades imported with correct P&L automatically."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9)">LC</div><div><div class="t-name">Lin C.</div><div class="t-role">Crypto Scalper</div></div></div></div>
</div>
</div>
<div class="marquee-wrapper">
<div class="marquee-track reverse">
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The mistake library helped me see I was entering too early on breakouts. Stopped that habit within a week."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">TM</div><div><div class="t-name">Tom M.</div><div class="t-role">Breakout Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Screenshot upload per trade is huge. I can review my exact chart setup after every win and loss."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#ec4899,#f97316)">RK</div><div><div class="t-name">Rania K.</div><div class="t-role">Technical Analyst</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"$10/month for something that makes me a better trader is the best investment I've made this year."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#0ea5e9,#38bdf8)">PL</div><div><div class="t-name">Peter L.</div><div class="t-role">Futures Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Used to track trades in Excel. This replaced it completely and gives me insights I never had before."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#14b8a6,#10b981)">YS</div><div><div class="t-name">Yusuf S.</div><div class="t-role">Multi-asset Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Pre-trade plan and post-trade review forced me to think before entering. Win rate went from 52% to 71%."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">BW</div><div><div class="t-name">Brian W.</div><div class="t-role">Equity Day Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Clean UI, works great on mobile. I log trades right after closing them from my phone."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)">FH</div><div><div class="t-name">Fatima H.</div><div class="t-role">Crypto Swing Trader</div></div></div></div>
<!-- Duplicates -->
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"The mistake library helped me see I was entering too early on breakouts. Stopped that habit within a week."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">TM</div><div><div class="t-name">Tom M.</div><div class="t-role">Breakout Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Screenshot upload per trade is huge. I can review my exact chart setup after every win and loss."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#ec4899,#f97316)">RK</div><div><div class="t-name">Rania K.</div><div class="t-role">Technical Analyst</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"$10/month for something that makes me a better trader is the best investment I've made this year."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#0ea5e9,#38bdf8)">PL</div><div><div class="t-name">Peter L.</div><div class="t-role">Futures Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Used to track trades in Excel. This replaced it completely and gives me insights I never had before."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#14b8a6,#10b981)">YS</div><div><div class="t-name">Yusuf S.</div><div class="t-role">Multi-asset Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Pre-trade plan and post-trade review forced me to think before entering. Win rate went from 52% to 71%."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">BW</div><div><div class="t-name">Brian W.</div><div class="t-role">Equity Day Trader</div></div></div></div>
<div class="t-card"><div class="t-stars">★★★★★</div><p class="t-text">"Clean UI, works great on mobile. I log trades right after closing them from my phone."</p><div class="t-author"><div class="t-av" style="background:linear-gradient(135deg,#8b5cf6,#ec4899)">FH</div><div><div class="t-name">Fatima H.</div><div class="t-role">Crypto Swing Trader</div></div></div></div>
</div>
</div>
</section>
<!-- ══ CTA ════════════════════════════════════════════════ -->
<section class="cta-section">
<div class="container text-center">
<h2 class="text-white fw-black mb-3" style="font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em">
Ready to trade with an edge?
</h2>
<p class="mb-5" style="color:rgba(255,255,255,.5);font-size:1.05rem;max-width:460px;margin:0 auto 3rem">
Start your free 7-day trial today. No credit card, no commitment.
</p>
<div class="d-flex flex-wrap gap-3 justify-content-center">
<a href="pages/register-v1.html" class="btn-cta" style="padding:.85rem 2.5rem;font-size:1rem;border-radius:12px">
Start Free Trial <i class="ti ti-arrow-right ms-1"></i>
</a>
<a href="pages/login-v1.html" style="display:inline-flex;align-items:center;border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8);padding:.85rem 2.5rem;border-radius:12px;font-size:1rem;font-weight:600;text-decoration:none">Log In</a>
</div>
</div>
</section>
<!-- ══ FOOTER ══════════════════════════════════════════════ -->
<footer class="lp-footer">
<div class="container">
<div class="row pb-5" style="border-bottom:1px solid rgba(255,255,255,.07)">
<div class="col-md-4 mb-4 mb-md-0">
<div class="d-flex align-items-center gap-2 mb-3">
<div class="lp-brand-icon"><i class="ti ti-chart-line"></i></div>
<span class="fw-bold text-white">TradeJournal</span>
</div>
<p class="footer-brand-text">The professional trading journal for traders who want to improve. Track · Analyse · Improve.</p>
</div>
<div class="col-6 col-md-2 offset-md-2 footer-col">
<h6>Product</h6>
<a href="#features" class="footer-link">Features</a>
<a href="#pricing" class="footer-link">Pricing</a>
<a href="#brokers" class="footer-link">Integrations</a>
<a href="#reviews" class="footer-link">Reviews</a>
</div>
<div class="col-6 col-md-2 footer-col">
<h6>Account</h6>
<a href="pages/register-v1.html" class="footer-link">Sign Up</a>
<a href="pages/login-v1.html" class="footer-link">Log In</a>
<a href="pages/reset-password-v1.html" class="footer-link">Reset Password</a>
</div>
<div class="col-6 col-md-2 footer-col mt-4 mt-md-0">
<h6>Legal</h6>
<a href="#" class="footer-link">Privacy Policy</a>
<a href="#" class="footer-link">Terms of Service</a>
</div>
</div>
<div class="py-4 text-center" style="color:rgba(255,255,255,.22);font-size:.8rem">
© 2026 TradeJournal. All rights reserved.
</div>
</div>
</footer>
<!-- Bootstrap 5 JS only — no AblePro JS at all -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script>
// Navbar scroll
window.addEventListener('scroll', () => {
document.getElementById('lp-nav').classList.toggle('scrolled', window.scrollY > 50);
});
// Module tabs
const MP_TITLES = {
'mp-history':'Trade History', 'mp-analytics':'Analytics',
'mp-calendar':'P&L Calendar', 'mp-psychology':'Psychology', 'mp-goals':'Goals & Journal'
};
function switchModule(tab, panelId) {
document.querySelectorAll('.module-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.mp-panel').forEach(p => p.classList.remove('active'));
tab.classList.add('active');
document.getElementById(panelId).classList.add('active');
document.getElementById('mp-title').textContent = MP_TITLES[panelId] || '';
}
// Auto-cycle tabs
let tabIdx = 0;
const tabEls = document.querySelectorAll('.module-tab');
const panelIds = ['mp-history','mp-analytics','mp-calendar','mp-psychology','mp-goals'];
setInterval(() => {
tabIdx = (tabIdx + 1) % tabEls.length;
switchModule(tabEls[tabIdx], panelIds[tabIdx]);
}, 4000);
</script>
</body>
</html>
