feat-services-trio

Summary

Two-column block: left column carries a sub-title, h3 lede, paragraph and a circle-arrow CTA wrapped in .hover-this for the magnetic cursor. Right column stacks three rows of "image + copy" cards (Web Design / Branding / Marketing). A blurred orange glow sits behind via .circle-blur.

HTML structure (minimal)

<section class="feat section-padding">
  <div class="container ontop">
    <div class="row">
      <div class="col-lg-5">
        <div class="cont">
          <h6 class="sub-title main-color mb-15">Trusted Services</h6>
          <h3 class="mb-30">The service we offer is specifically designed to meet your needs.</h3>
          <p>Driven professional dedicated to making a lasting impact…</p>
          <a href="/page-about" class="butn-crev d-flex align-items-center mt-40">
            <span class="hover-this">
              <span class="circle hover-anim"><i class="ti-arrow-top-right"></i></span>
            </span>
            <span class="text">Learn more</span>
          </a>
        </div>
      </div>
      <div class="col-lg-6 offset-lg-1">
        <div class="item mb-30">
          <div class="row">
            <div class="col-md-4 bg-img" data-background="/assets/imgs/serv-img/1.jpg"></div>
            <div class="col-md-8"><div class="info"><h5 class="mb-15">Web Design</h5><p>This is the main factor…</p></div></div>
          </div>
        </div>
        <!-- two more items: Branding, Marketing -->
      </div>
    </div>
  </div>
  <div class="circle-blur"><img src="/assets/imgs/patterns/blur1.png" alt="" /></div>
</section>

Key SCSS tokens

.feat {
  position: relative;
  .item {
    .row { align-items: stretch; }
    .col-md-4.bg-img { min-height: 200px; border-radius: 12px; }
    .info { padding: 30px 20px; }
  }
}
.butn-crev {
  display: inline-flex; gap: 14px;
  .circle {
    width: 60px; height: 60px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
}
.circle-blur {
  position: absolute;
  right: 0; top: 50%;
  transform: translate(30%, -50%);
  width: 600px;
  pointer-events: none;
  opacity: .35;
  z-index: 1;
}

Notable details

• "Image + copy" cards are split across col-md-4 (image as background) and col-md-8 (text); the bg-img column carries data-background so the image is set at runtime — same pattern as the hero.
• Magnetic CTA pattern: .butn-crev wraps a .hover-this span around the circle so the arrow icon translates with the cursor while the label stays put.
• .circle-blur is a decorative orange glow PNG — cheap backdrop for hero or service sections; the template uses it across half the home sections.

Use when

• Service / capability sections with 3 items where you want each to feel like a row, not a card.
• Pages that already use the magnetic-cursor effect — the .hover-this wrapper composes into this naturally.

Caveats

• The blur PNG is large (~1500px) — lazy-load it or inline as a CSS gradient if your bundle budget is tight.
• Copy in each row is identical placeholder text — duplicate in the demo data is intentional but easy to forget to replace.