service-grid-with-cta

Summary

Six-cell 3×2 service grid where five cells are color-coded service cards (each with its own accent: orange, indigo, magenta, green, yellow) and the sixth cell is a dark dashboard-screenshot CTA card with a button leading to project details.

HTML structure (minimal)

<div class="tp-service__area p-relative fix">
  <div class="tp-service__grey-shape grey-bg"></div>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="tp-service__section-box mb-50 text-center tp-title-anim">
          <h2 class="tp-section-title">Explore Our Data Services</h2>
          <p>More than 15,000 companies trust and choose Itech</p>
        </div>
      </div>
    </div>
    <div class="row">
      <!-- 5 color-coded service cards -->
      <div class="col-xl-4 col-md-6 wow tpfadeUp">
        <div class="tp-service__item mb-30">
          <div class="tp-service__icon"><img src="sv-icon-1.png"></div>
          <div class="tp-service__content">
            <h3 class="tp-service__title-sm tp-orange-color"><a>AI Data Analysis</a></h3>
            <p>Lorem Ipsum is simply dummy text of the printing</p>
          </div>
          <div class="tp-service__link"><a><svg>→</svg></a></div>
        </div>
      </div>
      <!-- … tp-theme-color, tp-purple-color, tp-green-color, tp-yellow-color -->

      <!-- 6th cell: dark CTA card -->
      <div class="col-xl-4 col-md-6 wow tpfadeUp">
        <div class="tp-service__dashboard" data-background="sv-bg.jpg">
          <div class="tp-service__top-content">
            <h3 class="tp-service__title-white">Data Analysis <br> Tools & Methods</h3>
            <p>Lorem Ipsum is simply dummy text of the printing</p>
            <a class="tp-btn-orange tp-btn-hover alt-color-white" href="project-details.html"><span>Work with Us</span><b></b></a>
          </div>
          <div class="tp-service__dashdboard-sm-img">
            <img class="wow tpfadeRight" src="sv-dashbord.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-service {
  &__grey-shape { position: absolute; inset: 30% 0 0 0; z-index: -1; }
  &__item {
    background: var(--tp-common-white);
    padding: 35px 30px;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(1, 16, 61, 0.05);
    transition: transform .35s ease;
    &:hover { transform: translateY(-6px); }
  }
  &__title-sm.tp-orange-color a { color: var(--tp-common-orange); }
  &__title-sm.tp-theme-color a  { color: var(--tp-theme-1); }
  &__title-sm.tp-purple-color a { color: var(--tp-common-purple); }
  &__title-sm.tp-green-color a  { color: var(--tp-common-green); }
  &__title-sm.tp-yellow-color a { color: var(--tp-common-yellow); }
  &__dashboard {
    background-color: var(--tp-common-black);
    background-image: url('../img/service/sv-bg.jpg');
    background-size: cover; background-position: right;
    color: #fff; padding: 40px 30px;
    border-radius: 20px;
    height: 100%;
  }
}

Animation logic

// data-background attribute populated by main.js to set background-image
$('[data-background]').each(function () {
  $(this).css('background-image', `url(${$(this).data('background')})`);
});

Notable details

• Sixth grid cell is a CTA card with the same footprint as service cards — creates an asymmetric grid without breaking the bootstrap row.
• Each service card title color comes from a single class swap (tp-orange-color, tp-theme-color, etc.), making it trivial to recolor for different verticals.
• data-background attribute pattern lets editors control card backgrounds in HTML without touching CSS.

Use when

• 5–6 service-tile sections where you want one tile to act as a CTA instead of a sixth feature.
• Multi-color SaaS service overviews where each service has its own brand chip.
• When you want a soft-card grid with a contrasting dark cell as visual anchor.

Caveats

• Color helper classes are tied to vocabulary in _colors.scss — adding a new accent means updating both SCSS and HTML class names.