LP Components

      <section class="three-steps">
        <h2>3 steps text here</h2>
        <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
        <div class="three-steps-content">
          <div class="box">
            <img src="./images/step-1.png" class="lp-action" alt="step icon" loading="lazy" />
            <h3>
              Title
            </h3>
            <p>
              Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
            </p>
          </div>
          <div class="box">
            <img src="./images/step-2.png" class="lp-action" alt="step icon" loading="lazy" />
            <h3>
              Title
            </h3>
            <p>
              Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
            </p>
          </div>
          <div class="box">
            <img src="./images/step-3.png" class="lp-action" alt="step icon" loading="lazy" />
            <h3>
              Title
            </h3>
            <p>
              Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
            </p>
          </div>
        </div>
      </section>
    

      <section class="cards">
        <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
        <div class="cards-content">
          <div class="box">
            <img src="./images/card-1.jpg" class="lp-action" alt="card pic" loading="lazy" />
            <h3>
              Title
            </h3>
            <p>
              Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
            </p>
          </div>
          <div class="box">
            <img src="./images/card-2.jpg" class="lp-action" alt="card pic" loading="lazy" />
            <h3>
              Title
            </h3>
            <p>
              Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
            </p>
          </div>
          <div class="box">
            <img src="./images/card-3.jpg" class="lp-action" alt="card pic" loading="lazy" />
            <h3>
              Title
            </h3>
            <p>
              Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
            </p>
          </div>
          <div class="box">
            <img src="./images/card-4.jpg" class="lp-action" alt="card pic" loading="lazy" />
            <h3>
              Title
            </h3>
            <p>
              Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
            </p>
          </div>
        </div>
      </section>
    

      <section class="boxes">
        <div class="boxes-content">
          <div class="box">
            <img src="./images/box-1.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
          <div class="box">
            <img src="./images/box-2.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
          <div class="box">
            <img src="./images/box-3.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
          <div class="box">
            <img src="./images/box-4.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
        </div>
      </section>
    

      <section class="boxes five-template">
        <div class="boxes-content">
          <div class="box">
            <img src="./images/box-1.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
          <div class="box">
            <img src="./images/box-2.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
          <div class="box">
            <img src="./images/box-3.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
          <div class="box">
            <img src="./images/box-4.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
          <div class="box">
            <img src="./images/box-5.png" class="lp-action" alt="card pic" loading="lazy" />
            <p>Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.</p>
          </div>
        </div>
      </section>
    

    <section class="two-people">
      <h2>
        Lorem ipsum dolor sit amet, consectetur.
      </h2>
      <div class="two-people-content">
        <div class="box">
          <img src="./images/avatar-1.png" loading="lazy" />
          <h3>
            Name Here
          </h3>
          <h4>
            Role
          </h4>
          <p>
            Nibh elit lacus mi elit, dui maecenas vestibulum cursus. Aliquet quam
            cursus tortor eu a. Enim, integer pellentesque sagittis lectus aliquam
            sed cursus tortor, ac. Ornare quisque ullamcorper a eleifend fringilla
            turpis.
          </p>
        </div>
        <div class="box">
          <img src="./images/avatar-2.png" loading="lazy" />
          <h3>
            Name Here
          </h3>
          <h4>
            Role
          </h4>
          <p>
            Nibh elit lacus mi elit, dui maecenas vestibulum cursus. Aliquet quam
            cursus tortor eu a. Enim, integer pellentesque sagittis lectus aliquam
            sed cursus tortor, ac. Ornare quisque ullamcorper a eleifend fringilla
            turpis.
          </p>
        </div>
      </div>
    </section>
    

  <section class="journey">
    <h2>Your Guided Learning Journey in 60 Days</h2>

    <div class="journey-cards">
      <div class="journey-card">
        <div class="card-header">
          <img src="./images/calendar.png" alt="calendar-icon" loading="lazy" />
          <p>Month 1</p>
        </div>

        <h3>Learn &amp; Practice</h3>

        <p>
          Build your foundation with structured educational guidance and ongoing
          feedback, supporting the development of practical skills.   Learn within
          a guided framework that supports independent thinking and self-directed
          development.
        </p>
      </div>

      <img
        src="./images/arrow-in-circle.png"
        alt="arrow-icon"
        class="journey-arrow"
        loading="lazy"
      />

      <div class="journey-card rocket-card">
        <div class="card-header">
          <img src="./images/calendar.png" alt="calendar-icon" loading="lazy" />
          <p>Month 2</p>
        </div>

        <h3>Grow with BrainTrade</h3>

        <p>
          Develop your knowledge and trade independently with educational
          assistance available.
        </p>
      </div>
    </div>
  </section>
    

  <section class="bt-seven-benefits-boxes">
  <h2>Take your trading journey to the next level</h2>

  <div class="benefits-grid">
    <div class="item">
      <img src="./images/benefit-1.png" class="lp-action" alt="icon" loading="lazy" />
      <h4>Personal Mentor</h4>
      <p>Receive 1-on-1 personalized guidance</p>
    </div>

    <div class="item">
      <img src="./images/benefit-2.png" class="lp-action" alt="icon" loading="lazy" />
      <h4>AI-Powered Trading Tools</h4>
      <p>Enhance your decision-making while you learn</p>
    </div>

    <div class="item">
      <img src="./images/benefit-3.png" class="lp-action" alt="icon" loading="lazy" />
      <h4>Live Campus</h4>
      <p>Webinars, market updates, and live events</p>
    </div>

    <div class="item small">
      <img src="./images/benefit-4.png" class="lp-action" alt="icon" loading="lazy" />
      <h4>Real-Time Market Signals</h4>
      <p>Apply your learning in realistic conditions</p>
    </div>

    <div class="item small">
      <img src="./images/benefit-5.png" class="lp-action" alt="icon" loading="lazy" />
      <h4>Exclusive Content</h4>
      <p>Access structured learning paths and advanced tutorials</p>
    </div>

    <div class="item small">
      <img src="./images/benefit-6.png" class="lp-action" alt="icon" loading="lazy" />
      <h4>Competitive Promos</h4>
      <p>Get special offers for reputable brokers</p>
    </div>

    <div class="item small">
      <img src="./images/benefit-7.png" class="lp-action" alt="icon" loading="lazy" />
      <h4>Seamless Transition</h4>
      <p>Move confidently from practice mode to live trading</p>
    </div>
  </div>
</section>