intro-stats-block

Summary

Two-column section under the hero: an arrow illustration + a fw-300 mission line and CTA on the left, a tall portrait image on the right. Below the mission, two thin-bordered KPI tiles ("100% Clients Satisfaction", "6700 Projects Completed") sit on a bord-thin-top divider, each with a small inline arrow icon.

HTML structure (minimal)

<section class="intro section-padding">
  <div class="container">
    <div class="row lg-marg">
      <div class="col-lg-8">
        <div class="row lg-marg align-items-center">
          <div class="col-md-6"><div class="img1"><img src="/assets/imgs/arw2.png" alt="" /></div></div>
          <div class="col-md-6">
            <div class="text">
              <h3 class="mb-30">We believe in the power of <span class="fw-300">individual</span> <span class="fw-300">contribution.</span></h3>
              <p>We back the founders of new forms of network…</p>
              <a href="/page-about" class="underline main-color mt-40">
                <span class="text">More About Us <i class="ti-arrow-top-right"></i></span>
              </a>
            </div>
          </div>
        </div>
        <div class="numbers mt-80">
          <div class="row lg-marg">
            <div class="col-md-6">
              <div class="item bord-thin-top pt-30 d-flex align-items-end mt-20">
                <div>
                  <h3 class="fw-300 mb-10">100%</h3>
                  <h6 class="p-color sub-title">Clients Satisfaction</h6>
                </div>
                <div class="ml-auto"><div class="icon-img-40"><img src="/assets/imgs/arw0.png" alt="" /></div></div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="item bord-thin-top pt-30 d-flex align-items-end mt-20">
                <div>
                  <h3 class="fw-300 mb-10">6700</h3>
                  <h6 class="p-color sub-title">Projects Completed</h6>
                </div>
                <div class="ml-auto"><div class="icon-img-40"><img src="/assets/imgs/arw0.png" alt="" /></div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="img-full fit-img"><img src="/assets/imgs/intro/04.jpg" alt="" /></div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.intro {
  .text h3 { font-weight: 600; }
  .text h3 .fw-300 { font-weight: 300; } /* mixed-weight headline */
  .numbers .item h3 { font-size: 60px; }
  .bord-thin-top {
    position: relative;
    &:before {
      content: ''; position: absolute; top: 0; left: 0;
      width: 100%; height: 1px;
      background: rgba(255, 255, 255, .15);
    }
  }
  .underline.main-color {
    color: $main_color !important;
    border-bottom: 1px solid currentColor;
  }
}

Notable details

• Headline mixes fw-600 and fw-300 within the same <h3> to give the line "We believe in the power of individual contribution" a soft emphasis without italics or color shift.
• KPI tiles use the same h3 font scale (60px) as the lede — same hierarchy, different rhythm.
• bord-thin-top is a pseudo-element divider, so margin / padding adjustments don't cause it to disappear.

Use when

• Mission section that needs to introduce stats without breaking into a separate "counter" band.
• Pages where left-aligned copy is paired with a single tall portrait image.

Caveats

• No counter animation; numbers are static — easy to bolt CountUp.js on if needed.
• Two arrow icons (arw0.png, arw2.png) live in /public/assets/imgs/ — copy them along with the markup.