1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / devscfvi / AblePro /
Filename : landingX.html
back
<!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,user-scalable=0,minimal-ui">
  <meta name="description" content="Track every trade, analyse your patterns, and become a more consistent trader. Supports IBKR, Binance, Coinbase imports. $10/month.">
  <link rel="icon" href="assets/images/favicon.svg" type="image/x-icon">
  <link href="assets/css/plugins/animate.min.css" rel="stylesheet">
  <link rel="stylesheet" href="assets/fonts/inter/inter.css" id="main-font-link">
  <link rel="stylesheet" href="assets/fonts/tabler-icons.min.css">
  <link rel="stylesheet" href="assets/fonts/feather.css">
  <link rel="stylesheet" href="assets/fonts/fontawesome.css">
  <link rel="stylesheet" href="assets/css/style.css" id="main-style-link">
  <link rel="stylesheet" href="assets/css/style-preset.css">
  <link rel="stylesheet" href="assets/css/landing.css">
  <style>
    /* ── Hero ── */
    .tj-hero {
      min-height: 100vh;
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #0f172a 100%);
      display: flex; align-items: center; position: relative; overflow: hidden;
    }
    .tj-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(70,128,255,.22), transparent);
      pointer-events: none;
    }
    .tj-grid-bg {
      position: absolute; inset: 0; opacity: .03;
      background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
      background-size: 60px 60px;
    }
    .tj-hero-title {
      font-size: clamp(2.4rem, 5vw, 4rem);
      font-weight: 800; line-height: 1.15; color: #fff; letter-spacing: -.02em;
    }
    .tj-gradient-text {
      background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .tj-hero-sub { font-size: 1.12rem; color: rgba(255,255,255,.62); line-height: 1.75; max-width: 540px; }

    /* ── Feature cards ── */
    .tj-feature-icon {
      width: 52px; height: 52px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; flex-shrink: 0;
    }

    /* ── Pricing card highlight ── */
    .tj-pricing-popular {
      border: 2px solid var(--bs-primary) !important;
      position: relative;
    }
    .tj-pricing-popular::before {
      content: 'MOST POPULAR';
      position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
      background: var(--bs-primary); color: #fff;
      font-size: .7rem; font-weight: 700; letter-spacing: .08em;
      padding: .2rem .75rem; border-radius: 9999px;
    }

    /* ── Broker logos strip ── */
    .tj-broker-strip {
      background: rgba(255,255,255,.04);
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .tj-broker-pill {
      display: inline-flex; align-items: center; gap: .5rem;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
      border-radius: 9999px; padding: .5rem 1.1rem;
      color: rgba(255,255,255,.75); font-size: .82rem; font-weight: 600;
    }

    /* ── Stats ── */
    .tj-stat-num {
      font-size: 2.4rem; font-weight: 800;
      background: linear-gradient(135deg, #60a5fa, #a78bfa);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Testimonials ── */
    .tj-testimonial { border-left: 3px solid var(--bs-primary); }

    /* ── Section background helpers ── */
    .bg-dark-hero  { background: linear-gradient(135deg, #0f172a, #1e1b4b); }
    .bg-dark-subtle { background: #0f172a; }
  </style>
</head>
<body data-pc-preset="preset-1" data-pc-sidebar-caption="true"
      data-pc-layout="vertical" data-pc-direction="ltr"
      data-pc-theme_contrast="" data-pc-theme="light" class="landing-page">

<div class="page-loader"><div class="bar"></div></div>

<!-- ══ NAVBAR ══════════════════════════════════════════════ -->
<nav class="navbar navbar-expand-md navbar-dark default" style="background:transparent">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center gap-2 fw-bold text-white" href="landing.html">
      <i class="ti ti-chart-line f-22 text-primary"></i>
      TradeJournal
    </a>
    <button class="navbar-toggler border-0" type="button"
      data-bs-toggle="collapse" data-bs-target="#tjNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="tjNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-center gap-1">
        <li class="nav-item"><a class="nav-link text-white-50" href="#features">Features</a></li>
        <li class="nav-item"><a class="nav-link text-white-50" href="#pricing">Pricing</a></li>
        <li class="nav-item"><a class="nav-link text-white-50" href="#brokers">Integrations</a></li>
        <li class="nav-item ms-2"><a class="btn btn-outline-light btn-sm px-3" href="pages/login-v1.html">Log in</a></li>
        <li class="nav-item"><a class="btn btn-primary btn-sm px-3" href="pages/register-v1.html">Start free trial</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- ══ HERO ══════════════════════════════════════════════ -->
<header class="tj-hero" id="home">
  <div class="tj-grid-bg"></div>
  <div class="container position-relative" style="z-index:2; padding-top:80px; padding-bottom:80px">
    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <!-- Badge -->
        <div class="mb-4">
          <span class="badge bg-primary bg-opacity-20 text-primary border border-primary border-opacity-25 px-3 py-2 rounded-pill f-13 fw-semibold">
            <i class="ti ti-bolt me-1"></i> Supports IBKR · Binance · Coinbase
          </span>
        </div>

        <h1 class="tj-hero-title mb-4">
          Stop Guessing.<br>
          Start <span class="tj-gradient-text">Trading Smarter.</span>
        </h1>

        <p class="tj-hero-sub mb-5">
          TradeJournal automatically imports your trades from any broker,
          tracks your P&L, identifies patterns in your mistakes, and tells you
          exactly when and what you trade best.
        </p>

        <div class="d-flex flex-wrap gap-3 mb-5">
          <a href="pages/register-v1.html" class="btn btn-primary btn-lg px-4">
            Start 7-Day Free Trial <i class="ti ti-arrow-right ms-1"></i>
          </a>
          <a href="#features" class="btn btn-outline-light btn-lg px-4">
            See Features
          </a>
        </div>

        <!-- Trust micro-copy -->
        <div class="d-flex flex-wrap align-items-center gap-3">
          <span class="text-white-50 f-13"><i class="ti ti-check text-success me-1"></i>No credit card required</span>
          <span class="text-white-50 f-13"><i class="ti ti-check text-success me-1"></i>Cancel anytime</span>
          <span class="text-white-50 f-13"><i class="ti ti-check text-success me-1"></i>$10 / month after trial</span>
        </div>
      </div>

      <div class="col-lg-6 d-none d-lg-block">
        <!-- Dashboard mockup card -->
        <div class="rounded-4 overflow-hidden shadow"
          style="background:#1e293b; border:1px solid rgba(255,255,255,.1)">
          <!-- Fake window bar -->
          <div class="d-flex align-items-center gap-2 px-3 py-2"
            style="background:#0f172a; border-bottom:1px solid rgba(255,255,255,.08)">
            <span class="rounded-circle bg-danger" style="width:10px;height:10px"></span>
            <span class="rounded-circle bg-warning" style="width:10px;height:10px"></span>
            <span class="rounded-circle bg-success" style="width:10px;height:10px"></span>
            <span class="text-white-50 f-11 ms-2">TradeJournal — Dashboard</span>
          </div>
          <div class="p-4">
            <!-- Mini stat row -->
            <div class="row g-2 mb-3">
              <div class="col-3">
                <div class="rounded-3 p-2 text-center" style="background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.2)">
                  <div class="text-success fw-bold f-14">+$487</div>
                  <div class="text-white-50 f-10">Net P&L</div>
                </div>
              </div>
              <div class="col-3">
                <div class="rounded-3 p-2 text-center" style="background:rgba(70,128,255,.12); border:1px solid rgba(70,128,255,.2)">
                  <div class="text-primary fw-bold f-14">68%</div>
                  <div class="text-white-50 f-10">Win Rate</div>
                </div>
              </div>
              <div class="col-3">
                <div class="rounded-3 p-2 text-center" style="background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.2)">
                  <div class="fw-bold f-14" style="color:#a78bfa">1:2.4</div>
                  <div class="text-white-50 f-10">Avg R:R</div>
                </div>
              </div>
              <div class="col-3">
                <div class="rounded-3 p-2 text-center" style="background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.2)">
                  <div class="text-warning fw-bold f-14">24</div>
                  <div class="text-white-50 f-10">Trades</div>
                </div>
              </div>
            </div>
            <!-- Fake equity bars -->
            <div class="mb-3 rounded-3 p-3" style="background:rgba(255,255,255,.04)">
              <div class="text-white-50 f-11 mb-2">Equity Curve</div>
              <div class="d-flex align-items-end gap-1" style="height:60px">
                <div class="flex-fill bg-primary rounded-1 opacity-50" style="height:30%"></div>
                <div class="flex-fill bg-primary rounded-1 opacity-60" style="height:45%"></div>
                <div class="flex-fill bg-primary rounded-1 opacity-70" style="height:35%"></div>
                <div class="flex-fill bg-primary rounded-1 opacity-80" style="height:55%"></div>
                <div class="flex-fill bg-primary rounded-1 opacity-90" style="height:65%"></div>
                <div class="flex-fill bg-primary rounded-1" style="height:50%"></div>
                <div class="flex-fill bg-success rounded-1" style="height:75%"></div>
                <div class="flex-fill bg-success rounded-1" style="height:80%"></div>
                <div class="flex-fill bg-success rounded-1" style="height:90%"></div>
                <div class="flex-fill bg-success rounded-1" style="height:100%"></div>
              </div>
            </div>
            <!-- Fake trade rows -->
            <div class="d-flex flex-column gap-1">
              <div class="d-flex justify-content-between align-items-center px-2 py-1 rounded-2" style="background:rgba(16,185,129,.07)">
                <span class="fw-bold text-white f-12">AAPL</span>
                <span class="badge" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span>
                <span class="text-success f-12 fw-semibold">+$124.50</span>
              </div>
              <div class="d-flex justify-content-between align-items-center px-2 py-1 rounded-2" style="background:rgba(239,68,68,.07)">
                <span class="fw-bold text-white f-12">DRMA</span>
                <span class="badge" style="background:rgba(239,68,68,.2);color:#ef4444">LOSS</span>
                <span class="text-danger f-12 fw-semibold">-$38.20</span>
              </div>
              <div class="d-flex justify-content-between align-items-center px-2 py-1 rounded-2" style="background:rgba(16,185,129,.07)">
                <span class="fw-bold text-white f-12">NVDA</span>
                <span class="badge" style="background:rgba(16,185,129,.2);color:#2ca87f">WIN</span>
                <span class="text-success f-12 fw-semibold">+$401.00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- ══ BROKER STRIP ══════════════════════════════════════ -->
<div class="tj-broker-strip py-4" style="background:#0f172a" id="brokers">
  <div class="container">
    <div class="d-flex flex-wrap justify-content-center align-items-center gap-3">
      <span class="text-white-50 f-13 me-2">Import directly from:</span>
      <span class="tj-broker-pill"><i class="ti ti-building-bank"></i> IBKR (.tlg &amp; CSV)</span>
      <span class="tj-broker-pill"><i class="ti ti-currency-bitcoin"></i> Binance</span>
      <span class="tj-broker-pill"><i class="ti ti-coin"></i> Coinbase</span>
      <span class="tj-broker-pill"><i class="ti ti-table-import"></i> Any CSV</span>
    </div>
  </div>
</div>

<!-- ══ FEATURES ══════════════════════════════════════════ -->
<section id="features">
  <div class="container title">
    <div class="row justify-content-center text-center wow fadeInUp" data-wow-delay="0.2s">
      <div class="col-md-7">
        <h2 class="mb-3">Everything a serious trader needs</h2>
        <p class="text-muted mb-0">Not just a spreadsheet. A complete system to track, review, and improve every trade.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row g-4">

      <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.1s">
        <div class="card h-100">
          <div class="card-body">
            <div class="tj-feature-icon bg-light-primary mb-3">
              <i class="ti ti-upload text-primary"></i>
            </div>
            <h5 class="mb-2">One-click broker import</h5>
            <p class="text-muted mb-0">Import from IBKR, Binance, or Coinbase in seconds. Trades are split by round-trip — even multiple trades on the same ticker same day.</p>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.2s">
        <div class="card h-100">
          <div class="card-body">
            <div class="tj-feature-icon bg-light-success mb-3">
              <i class="ti ti-chart-line text-success"></i>
            </div>
            <h5 class="mb-2">Equity curve &amp; analytics</h5>
            <p class="text-muted mb-0">See your running balance over time, daily P&L, win rate by day-of-week, profit factor, and expectancy — all in one dashboard.</p>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.3s">
        <div class="card h-100">
          <div class="card-body">
            <div class="tj-feature-icon bg-light-warning mb-3">
              <i class="ti ti-brain text-warning"></i>
            </div>
            <h5 class="mb-2">Psychology tracking</h5>
            <p class="text-muted mb-0">Log your emotion before each trade — Confident, Calm, FOMO, Greedy. See which emotional state correlates with your best and worst trades.</p>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.4s">
        <div class="card h-100">
          <div class="card-body">
            <div class="tj-feature-icon bg-light-danger mb-3">
              <i class="ti ti-alert-triangle text-danger"></i>
            </div>
            <h5 class="mb-2">Mistake library</h5>
            <p class="text-muted mb-0">Tag each trade with a mistake type — FOMO entry, moved stop loss, no plan. See which mistakes cost you the most money over time.</p>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.5s">
        <div class="card h-100">
          <div class="card-body">
            <div class="tj-feature-icon bg-light-info mb-3">
              <i class="ti ti-calendar-stats text-info"></i>
            </div>
            <h5 class="mb-2">P&amp;L Calendar</h5>
            <p class="text-muted mb-0">A heatmap view of every trading day — instantly spot your best weeks and identify days where you tend to give back gains.</p>
          </div>
        </div>
      </div>

      <div class="col-md-6 col-lg-4 wow fadeInUp" data-wow-delay="0.6s">
        <div class="card h-100">
          <div class="card-body">
            <div class="tj-feature-icon mb-3" style="background:rgba(168,85,247,.12)">
              <i class="ti ti-target" style="color:#a78bfa"></i>
            </div>
            <h5 class="mb-2">Goal setting</h5>
            <p class="text-muted mb-0">Set daily, weekly, or monthly targets for profit, win rate, or R:R. Track your progress in real time against each goal.</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ══ STATS BANNER ═══════════════════════════════════════ -->
<section style="background:linear-gradient(135deg,#0f172a,#1e1b4b); padding:80px 0">
  <div class="container">
    <div class="row g-4 text-center">
      <div class="col-6 col-md-3 wow fadeInUp" data-wow-delay="0.1s">
        <div class="tj-stat-num">6+</div>
        <p class="text-white-50 mb-0 f-14">Broker integrations</p>
      </div>
      <div class="col-6 col-md-3 wow fadeInUp" data-wow-delay="0.2s">
        <div class="tj-stat-num">20+</div>
        <p class="text-white-50 mb-0 f-14">Analytics metrics</p>
      </div>
      <div class="col-6 col-md-3 wow fadeInUp" data-wow-delay="0.3s">
        <div class="tj-stat-num">∞</div>
        <p class="text-white-50 mb-0 f-14">Trades you can log</p>
      </div>
      <div class="col-6 col-md-3 wow fadeInUp" data-wow-delay="0.4s">
        <div class="tj-stat-num">$10</div>
        <p class="text-white-50 mb-0 f-14">Per month, flat</p>
      </div>
    </div>
  </div>
</section>

<!-- ══ PRICING ══════════════════════════════════════════ -->
<section id="pricing" class="bg-white">
  <div class="container title">
    <div class="row justify-content-center text-center wow fadeInUp" data-wow-delay="0.2s">
      <div class="col-md-7">
        <h2 class="mb-3">Simple, honest pricing</h2>
        <p class="text-muted mb-0">One plan. Everything included. No hidden fees.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row justify-content-center g-4">

      <!-- Free trial -->
      <div class="col-md-5 col-lg-4 wow fadeInUp" data-wow-delay="0.2s">
        <div class="card h-100">
          <div class="card-body p-4">
            <h5 class="mb-1">Free Trial</h5>
            <p class="text-muted f-13 mb-4">Try everything, no card needed</p>
            <div class="mb-4">
              <span class="f-36 fw-bold">$0</span>
              <span class="text-muted"> / 7 days</span>
            </div>
            <ul class="list-unstyled mb-4">
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Full access to all features</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Unlimited trade imports</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>All broker integrations</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>No credit card required</li>
            </ul>
            <a href="pages/register-v1.html" class="btn btn-outline-primary w-100 btn-lg">Start Free Trial</a>
          </div>
        </div>
      </div>

      <!-- Pro -->
      <div class="col-md-5 col-lg-4 wow fadeInUp" data-wow-delay="0.3s">
        <div class="card h-100 tj-pricing-popular">
          <div class="card-body p-4">
            <h5 class="mb-1">Pro</h5>
            <p class="text-muted f-13 mb-4">For traders who take it seriously</p>
            <div class="mb-4">
              <span class="f-36 fw-bold text-primary">$10</span>
              <span class="text-muted"> / month</span>
            </div>
            <ul class="list-unstyled mb-4">
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Everything in Free Trial</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Unlimited trades &amp; history</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Advanced analytics &amp; reports</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Screenshot uploads per trade</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Goal tracking &amp; alerts</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Daily journal &amp; reflections</li>
              <li class="mb-2"><i class="ti ti-check text-success me-2"></i>Cancel anytime</li>
            </ul>
            <a href="pages/register-v1.html" class="btn btn-primary w-100 btn-lg">Get Started</a>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ══ TESTIMONIALS ══════════════════════════════════════ -->
<section>
  <div class="container title">
    <div class="row justify-content-center text-center wow fadeInUp">
      <div class="col-md-7">
        <h2 class="mb-3">Traders love it</h2>
        <p class="text-muted">From day traders to swing traders — here's what they say.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row g-4">
      <div class="col-md-4 wow fadeInUp" data-wow-delay="0.1s">
        <div class="card h-100 tj-testimonial">
          <div class="card-body">
            <p class="mb-3">"Finally a journal that actually imports my IBKR trades correctly — even splits the same-day round trips properly. Saved me hours of manual entry."</p>
            <div class="d-flex align-items-center gap-2">
              <div class="avtar avtar-s bg-light-primary text-primary fw-bold">MK</div>
              <div>
                <p class="mb-0 fw-semibold f-13">Mohammed K.</p>
                <p class="mb-0 text-muted f-12">Day Trader · Stocks</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 wow fadeInUp" data-wow-delay="0.2s">
        <div class="card h-100 tj-testimonial">
          <div class="card-body">
            <p class="mb-3">"The emotion tracking showed me I lose 3x more when I trade feeling FOMO. That insight alone was worth way more than $10/month."</p>
            <div class="d-flex align-items-center gap-2">
              <div class="avtar avtar-s bg-light-success text-success fw-bold">JR</div>
              <div>
                <p class="mb-0 fw-semibold f-13">James R.</p>
                <p class="mb-0 text-muted f-12">Swing Trader · Crypto</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 wow fadeInUp" data-wow-delay="0.3s">
        <div class="card h-100 tj-testimonial">
          <div class="card-body">
            <p class="mb-3">"The analytics page is like TraderVue but cleaner. Profit factor, expectancy, equity curve — everything I needed to see in one place."</p>
            <div class="d-flex align-items-center gap-2">
              <div class="avtar avtar-s bg-light-warning text-warning fw-bold">SA</div>
              <div>
                <p class="mb-0 fw-semibold f-13">Sara A.</p>
                <p class="mb-0 text-muted f-12">Forex Trader</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ CTA ══════════════════════════════════════════════ -->
<section style="background:linear-gradient(135deg,#1e1b4b,#0f172a); padding:100px 0">
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-md-8 wow fadeInUp">
        <h2 class="text-white mb-3" style="font-size:2.4rem; font-weight:800">
          Ready to trade with an edge?
        </h2>
        <p class="mb-5" style="color:rgba(255,255,255,.6); font-size:1.1rem">
          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 btn-primary btn-lg px-5">
            Start Free Trial <i class="ti ti-arrow-right ms-1"></i>
          </a>
          <a href="pages/login-v1.html" class="btn btn-outline-light btn-lg px-5">
            Log In
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══ FOOTER ══════════════════════════════════════════ -->
<footer class="footer" style="background:#0a0f1e">
  <div class="container">
    <div class="row py-5 border-bottom" style="border-color:rgba(255,255,255,.08)!important">
      <div class="col-md-4 mb-4 mb-md-0">
        <div class="d-flex align-items-center gap-2 fw-bold text-white mb-3 f-18">
          <i class="ti ti-chart-line f-22 text-primary"></i> TradeJournal
        </div>
        <p class="text-white-50 f-14 mb-0">
          The professional trading journal for traders who want to improve.
          Track · Analyse · Improve.
        </p>
      </div>
      <div class="col-md-2 offset-md-2">
        <h6 class="text-white mb-3">Product</h6>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#features" class="text-white-50 text-decoration-none f-14">Features</a></li>
          <li class="mb-2"><a href="#pricing" class="text-white-50 text-decoration-none f-14">Pricing</a></li>
          <li class="mb-2"><a href="#brokers" class="text-white-50 text-decoration-none f-14">Integrations</a></li>
        </ul>
      </div>
      <div class="col-md-2">
        <h6 class="text-white mb-3">Account</h6>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="pages/register-v1.html" class="text-white-50 text-decoration-none f-14">Sign Up</a></li>
          <li class="mb-2"><a href="pages/login-v1.html" class="text-white-50 text-decoration-none f-14">Log In</a></li>
          <li class="mb-2"><a href="pages/reset-password-v1.html" class="text-white-50 text-decoration-none f-14">Reset Password</a></li>
        </ul>
      </div>
      <div class="col-md-2">
        <h6 class="text-white mb-3">Legal</h6>
        <ul class="list-unstyled">
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none f-14">Privacy Policy</a></li>
          <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none f-14">Terms of Service</a></li>
        </ul>
      </div>
    </div>
    <div class="py-4 text-center">
      <p class="text-white-50 f-13 mb-0">&copy; 2026 TradeJournal. All rights reserved.</p>
    </div>
  </div>
</footer>

<!-- Scripts -->
<script src="assets/js/plugins/popper.min.js"></script>
<script src="assets/js/plugins/simplebar.min.js"></script>
<script src="assets/js/plugins/bootstrap.min.js"></script>
<script src="assets/js/fonts/custom-font.js"></script>
<script src="assets/js/pcoded.js"></script>
<script src="assets/js/plugins/feather.min.js"></script>
<script src="assets/js/plugins/wow.min.js"></script>
<script>
layout_change('light');
layout_theme_contrast_change('false');
change_box_container('false');
layout_caption_change('true');
layout_rtl_change('false');
preset_change('preset-1');

// Navbar scroll effect
let lastScroll = 0;
document.addEventListener('scroll', function() {
  const nav = document.querySelector('.navbar');
  const scroll = document.documentElement.scrollTop;
  if (scroll > 60) {
    nav.style.background = 'rgba(15,23,42,0.95)';
    nav.style.backdropFilter = 'blur(12px)';
    nav.style.boxShadow = '0 2px 20px rgba(0,0,0,.3)';
  } else {
    nav.style.background = 'transparent';
    nav.style.backdropFilter = '';
    nav.style.boxShadow = '';
  }
  lastScroll = scroll;
});

// WOW animations
var wow = new WOW({ animateClass: 'animated', offset: 60 });
wow.init();
</script>
</body>
</html>